En nuestra cuarta entrega, vamos a dedicarle tiempo a revisar y analizar la parte más importante de un tema de WordPress, el loop o bucle principal. Este sección de nuestro sitio WordPress se encarga de mostrar la mayor parte del contenido de nuestro sitio o blog. El loop principal debe ir inmediatamente después del encabezado dentro del archivo index.php que es el punto de partida de toda la estructura del tema.
Tabla de Contenido
Preparativos para trabajar con el loop principal
En el apartado anterior terminamos la parte del encabezado, dejando únicamente la base del loop. Por esta razón, nuestro tema se ve como muestra la imagen de abajo, es decir, el encabezado y sólo una frase de ejemplo como contenido.
Para que valga la pena lo que haremos a continuación, crearemos algunas entradas de prueba.
De esta manera podemos jugar un poco con ellas e ir visualizando los cambios conforme trabajemos esta sección.
El enfoque de nuestro tema será a dos columnas, así que recomiendo crear unas 4 o 6 entradas para una mejor prueba.
Por supuesto, si estas probando con un blog que ya tenga contenido, puedes saltarte este paso.
Creando la estructura básica para el loop principal
En el archivo index.php, comenzamos con la siguiente estructura:
Como recordatorio:
- get_header(): Une el archivo header.php con index.php
- have_posts : Regresa true si hay entradas en el blog o false en caso contrario.
- the_post: Regresa un array con las entradas del blog.
- _e: Salida básica de WordPress
Lo primero será meter todo el loop dentro de un <div> al que llamaremos mainBody. Dentro de este, dos secciones, la primera llamada content que tendrá todo el loop completo y la segunda llamada sidebar para la barra lateral (que trataremos en otra entrada)
<?php get_header(); ?>
<!-- Contenido principal en un solo DIV -->
<div id="mainBody">
<section id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Colocar aquí lo necesario para definir todo el contenido del tema
<?php endwhile; else : ?>
<p><?php _e( 'Lo sentimos. Por el momento no hay contenido en este sitio.' ); ?></p>
<?php endif; ?>
</section>
<section id="sidebar"></section>
</div>
Lo siguiente es reemplazar esa frase genérica que se encuentra dentro del IF, para ello, meteremos cada entrada dentro de un <article>.
<article>
Necesitamos el título, para ello utilizaremos dos ganchos de WordPress: the_permalink() nos entrega el enlace directo hacia la página de la entrada y the_title() nos da el título. Metemos todo eso dentro de un <h2> y un enlace.
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
Luego, para no mostrar la entrada completo, utilizaremos el gancho the_excerpt() dentro de un párrafo, este gancho nos muestra una descripción breve de nuestra utilizando parte del primer párrafo de la misma.
<p><?php the_excerpt(); ?></p>
Mostraremos la fecha y el nombre del autor con los ganchos the_time() y the_author respectivamente. En este caso los metemos en un <div> dividido en dos secciones para poder separarlos y distribuirlos correctamente.
<div>
<section id="conFecha"><?php the_time('F j, Y'); ?></section>
<section id="conAutor"><?php the_author(); ?></section>
</div>
Por último, mostraremos el típico botón para invitar al usuario a leer el resto de la entrada. En este caso usamos un enlace.
<a id="conBoton" href="<?php the_permalink(); ?>">Leer más</a>
Con eso finalizado, cerramos el <article> que se abrió al proincipio.
</article>
Nuestro código debe verse así:
Al echar un vistazo, este es el resultado de momento.
Creando la hoja de estilos para nuestro loop principal
En nuestro archivo style.css, hacemos una llamada a la hoja de estilos para el loop, le hemos llamado index.css
Por supuesto, hay que crear dicho archivo en nuestro proyecto.
Lo primero es crear la caja principal, en este caso la identificamos como mainBody. Con display en modo flex y con la propiedad flex-wrap colocada en wrap, el <div> será un contenedor al 90% de ancho. Los márgenes superior e inferior serán de 20 píxeles para que no este pegado al header ni al footer. También bajaremos el tamaño de la fuente a un 80% para que no se vea tan grande.
#mainBody{
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 20px auto;
font-size: 80%;
}
La sección identificada como #content será la parte principal que irá a la izquierda, está también será un contenedor tipo flex, pero con un ancho del 70%.
#content{
display: flex;
flex-wrap: wrap;
width: 70%;
}
Los objetos <article> que se crean con la entradas tendrán un ancho del 40%, un padding de 2.5% en sus 4 valores al igual que el margin. Con esto sumamos el 50% para que cada <article> ocupe la mitad exacta de su contenedor; por último, le ponemos una delgada sombra oscura de 1 píxel.
#content article{
width: 40%;
padding: 2.5%;
margin: 2.5%;
box-shadow: 0 0 1px #000;
}
Centramos los subtítulos de cada <article>, la fuente la aumentamos un poco y colocamos un margen inferior de 10 píxeles para separarlo del párrafo.
#content article h2{
text-align: center;
font-size: 1.4em;
margin-bottom: 10px;
}
Como cada subtítulo tiene un enlace, le cambiamos el color a un naranja acorde.
#content article h2 a{
color: #FF4C45;
}
Y cuando se haga el hover, lo cambiamos a negro.
#content article h2 a:hover{
color: #000;
}
Al párrafo lo hacemos de 1em de tamaño de fuente, le ponemos el margen inferior a 20 píxeles, justificamos el texto, la cambiamos el color para que no sea tan pronunciado y separamos las líneas de texto a 30 píxeles con line-height para que no este todo tan amontonado.
#content article p{
font-size: 1em;
margin-bottom: 20px;
text-align: justify;
color: #333;
line-height: 30px;
}
El <div> que está debajo del párrafo la ampliamos al 100% de su contenedor.
#content article div{
width: 100%;
}
Dentro de ese <div> tenemos dos <section> ambos estarán al 50% de ancho, con un padding inferior y superior de 2%, flotando de izquierda a derecha, el texto alineado al centro, la fuente ligeramente más pequeña que el párrafo y el borde superior de color gris.
#conFecha, #conAutor{
width: 50%;
padding: 2% 0;
float: left;
text-align: center;
font-size: 0.9em;
border-top: 1px solid #CCC;
}
El anlace debajo del <div> lo convertimos en un elemento inline-block al 100% de ancho, su padding inferior y superior de 5%, el color de fondo naranja y el texto blanco. Centramos el texto y lo hacemos 2 veces más grande.
#conBoton{
display: inline-block;
width: 100%;
padding: 5% 0%;
background-color: #FF4C45;
color: white;
text-align: center;
font-size: 2em;
}
Al hacer hover sobre ese enlace, cambiamos el fondo a negro.
#conBoton:hover{
background-color: #000;
}
Después de guardar todo el avance, es hora de probar lo que hemos hecho. Debe quedar así:
Añadiendo una imagen a las entradas de nuestro loop
Lo siguiente será colocar una imagen destacada para nuestras entradas. Esto hace que nuestra portada del blog se vea mucho mejor. Pero, antes de eso, necesitamos permitirle a nuestro tema utilizarlas. Para eso, abrimos el archivo functions.php y añadimos el gancho add_theme_support.
add_theme_support('post-thumbnails');
Tal como se ve en la imagen:
Con este cambio hecho, podemos ir a cualquiera de nuestras entradas, dar clic en la sección Imagen destacada y luego en el botón Establecer imagen destacada.
Una vez, cargamos o arrastramos la imagen hacia la Biblioteca de medios de nuestro WordPress.
Una vez cargada, llenamos el Texto alternativo, el Título y la Descripción de la imagen (importante para el SEO) y presionamos el botón Establecer imagen destacada.
Por supuesto, tendremos que hacerlo para todas las entradas que lo necesiten.
También, preparamos una imagen genérica para mostrar por aquellas entradas que no tengan imagen destacada. Esta debe ir en la carpeta de imágenes de nuestro tema.
Una vez hecho esto, nos vamos al archivo index.php. La imagen destacada estará justo debajo del subtítulo, así que abrimos un bloque PHP y con la función has_post_thumbnail preguntamos si la entrada tiene una imagen destacada. en caso de tenerla, la función the_post_thumbnail se encargará de mostrarla.
<?php
if( has_post_thumbnail() ) {
the_post_thumbnail();
}
Pero si no la tiene:
- Generamos la ruta hacia nuestro tema con get_bloginfo.
- Cargamos la imagen concatenando la ruta obtenida con el nombre de la carpeta y la imagen
- También asignamos como texto alterno de la imagen, el título de la entrada
- Finalmente cerramos el else y el bloque PHP que teníamos abierto.
else{
$ruta = get_bloginfo('template_url');
?>
<img src="<?= $ruta; ?>/img/Entrada-Generica-CableNaranja.jpg" alt="<?php the_title(); ?>" />
<?php }
?>
Queda como sigue:
En nuestro archivo index.css vamos a añadir la regla para controlar el tamaño de las imágenes. Básicamente, el ancho siempre será el 100%, para el alto utilizaremos el valor fit-content lo que harpa que la imagen no se deforme ya que ajustará siempre de acuerdo al contenido.
#content article img{
width: 100%;
height: fit-content;
}
Observemos el resultado:
Hagamos responsive nuestro loop principal
Lo último que haremos por ahora, será la parte responsive. Después de hacer varias pruebas, noté que a partir de los 840 píxeles de ancho las cosas comienzan a verse demasiado extrañas, así que añadiremos una regla muy simple a partir de ese valor. Simplemente haremos que el elemento #content y su <article> tengan el ancho al 100%.
@media screen and (max-width:840px) {
#content{
width: 100%;
}
#content article{
width: 100%;
}
}
¡Y eso es todo! Realmente no hay nada más que agregar ya que buscaba algo simple de adaptar. Podemos observar el resultado.
Y con eso hemos dado un cuarto paso en la creación de nuestro tema de WordPress, no te olvides de:
DESCARGAR EL CÓDIGO FUENTE PARA PROBAR
¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
