Crear un tema WordPress a partir de HTML estático: Añadir un bucle

En las tres primeras partes de esta serie, aprendiste a preparar HTML estático para WordPress y a crear un tema dividiendo tu archivo HTML en un conjunto de archivos de plantilla así como a editar la hoja de estilos. Luego subiste tu tema a WordPress y lo activaste.

Sin embargo, el tema todavía no está mostrando ningún contenido que añadas a través del administrador de WordPress, para ello, debes añadir un bucle a los archivos de plantilla.

De momento tu tema solo tiene un archivo de plantilla principal, index.php, por lo tanto añadirás un bucle en ella.

Lo que necesitarás

• El editor de código de tu elección
• Un navegador para probar tu trabajo
• Software de imagen para guardar la captura de pantalla en las dimensiones correctas
• Una instalación de WordPress, ya sea local o remota
• Si está trabajando localmente, necesitarás MAMP, WAMP o LAMP para permitir que WordPress se ejecute
• Si estás trabajando de forma remota, necesitarás acceso FTP a tu sitio además de una cuenta de administrador en tu instalación de WordPress

1. Añadir una página en WordPress

Voy a suponer que ya sabes cómo usar el administrador de WordPress para añadir una página. Voy a crear una página llamada 'Home' (Inicio), le añadiré un poco de contenido ficticio y después editaré los 'Ajustes de lectura' en WordPress para que esta sea la página de inicio del sitio, en lugar de mostrar la lista de entradas del blog.

Usaré el contenido de mi sitio estático como contenido para mi nueva página, a excepción de que no añadiré al contenido la primera imagen a ancho completo: aprenderás a añadir una imagen como esta a tu tema a modo de imagen destacada en la Parte 10 de esta serie.

Así que sigue adelante y crea una página, y si lo deseas, incluye algunas imágenes y en la página 'Ajustes de lectura' modifica la configuración para que tu nueva página sea la página de inicio.

2. Añadir un bucle

Una vez creada tu nueva página, vuelve a visitar la página de inicio de tu sitio. Verás que nada ha cambiado, WordPress no muestra el contenido de tu página. Esto se debe a que necesitas añadir un bucle para indicarle que lo haga. El bucle extraerá el contenido de la página desde la base de datos, este procedimiento es lo hace que WordPress funcione.

Abre tu archivo index.php. Después de la etiqueta div de apertura .content y antes de la etiqueta de apertura <article>, añade lo siguiente:

1

<?php while ( have_posts() ) : the_post(); ?>

Ahora, después de la etiqueta de cierre </article>, añade lo siguiente:

1

<?php endwhile; ?>

El primer fragmento de código que has añadido inicia el bucle. Esto comprueba si existe una entrada o página para mostrar y, a continuación, abre la primera entrada o página.

Si estás en una página de archivo, recorre todas las entradas relevantes, ya sean las entradas más recientes en la página principal del blog o las entradas pertenecientes a una categoría concreta que aparecen en la página de la misma.

El segundo fragmento de código finaliza el bucle para que WordPress pueda pasar a mostrar otro contenido como pueda ser la barra lateral o el pie de página.

3. Clases e IDs para el artículo

La etiqueta de apertura <article> puede tener clases y un ID que son generados automáticamente por WordPress. Si lo deseas, podrás usarlos en el futuro para aplicar estilos CSS a esa entrada o página.

Encuentra la etiqueta de apertura <article>:

1

<article class="post" id="01">

Edítala para que diga:

1

<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">

Las dos funciones que ha añadido son:

• the_ID() - esto añade una clase a article que es la referencia de ID único de la entrada o página que se esté mostrando
• post_class - esto añade una serie de clases al elemento article, incluyendo la categoría de la entrada, el tipo de entrada y mucho más

Así que puedes usar el ID para aplicar CSS únicamente a una entrada específica, y de la misma manera, la clase para aplicar estilo a todas las entradas pertenecientes a una categoría determinada, por ejemplo.

4. Añadir el título de la página o de la entrada en el bucle

Lo siguiente que se muestra en tu entrada o página es el título. En el código existente, se trata de un título estático dentro de una etiqueta <h2>. Encuentra la siguiente línea de código:

1

<h2 class="entry-title">This is the title of a post or page</h2>

Edítala para que ahora sea como ves a continuación:

1

<h2 class="entry-title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark">

2

	<?php the_title(); ?>

3

</a></h2>

Esto añade dos cosas:

• Un enlace a la propia entrada o página (usando the_permalink() ). Esto es útil en las páginas de archivo para permitir a los usuarios hacer clic en un enlace que dirija a la página de una entrada
• El título de la entrada o página, que automáticamente será rellenado por WordPress

5. Añadir metadatos de entrada

El primer elemento section dentro del bucle es para los metadatos de la entrada, en concreto, la fecha y el autor de la misma.

Encuentra esta línea de código (o todo el código dentro de ese primer elemento section: podría diferir en tu tema):

1

Posted on 5 November by Rachel McCollin

Reemplázalo por:

1

Posted on <?php the_date(); ?> by <?php the_author(); ?>

Has añadido dos etiquetas de plantilla:

• La fecha en que se publicó la entrada, utilizando the_date()
• El autor de la entrada, utilizando the_author()

6. Añadir contenido a la entrada

Lo más importante es asegurarse de que se muestra el contenido de la entrada o la página y esto lo hace utilizando una sencilla etiqueta de plantilla, the_content().

Busca la sección con la clase .entry-content y elimina todo su contenido. Reemplaza estos con la etiqueta the_content() para que toda la sección tenga este aspecto:

1

<section class="entry-content"><?php the_content(); ?></section><!-- .entry-content -->

7. Más metadatos de entradas

En mi diseño, existen más metadatos de entrada después del contenido de la entrada o la página. Esto es algo opcional, pero aquí lo usaré para mostrar un listado de categorías asociadas a la entrada. Es posible que prefieras dejar esto fuera de tu tema dependiendo de tu diseño y del uso que hagas de las categorías o las etiquetas.

Elimina el contenido de la sección final y sustituyelo por la clase .entry-meta de manera que toda la sección sea como la siguiente:

1

<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>

2

	<span class="cat-links">

3

		Categories: <?php echo get_the_category_list( ', ' ); ?>

4

	</span>

5

<?php endif; ?></section><!-- .entry-meta -->

Vale la pena invertir un momento para trabajar en este código, ya que es el fragmento de PHP más largo que has añadido hasta ahora.

• La línea de apertura comprueba el número de categorías asignadas a la entrada mediante la instrucción if y, si es superior a cero, ejecuta el resto del código.
• A continuación, abre un elemento span y enumera las categorías de las entradas dentro de él, utilizando echo get_the_catgeory_list(). echo es importante ya que sin esto la función get_the_category_list() no mostraría realmente el listado, simplemente accedería a la lista y no haría nada con ella.
• Finalmente, la instrucción endif cierra la instrucción if para que WordPress pueda pasar a la siguiente pieza de código.

Finalmente, guarda tu archivo index.php, vuelve a tu navegador y vuelve a cargar la pantalla de inicio. Esta página debería haber cambiado ligeramente, como se muestra a continuación:

Como puedes ver, se muestran los siguientes elementos:

• El título de la página
• La fecha y el autor
• El contenido de la página
• La lista de categorías no se muestra, ya que estamos en una página, no en una entrada, y las categorías no pueden asignarse a las páginas de forma predeterminada. Verás un ejemplo que muestre un listado de categorías más adelante en esta misma serie

Resumen

Tu tema está ahora en el buen camino para convertirse en un tema completamente funcional. Tiene un bucle para mostrar el contenido añadido a través del administrador de WordPress, así como un conjunto de archivos de plantilla. El siguiente paso consiste en editar el archivo header.php para incluir un gancho de acción esencial y algunas etiquetas de plantilla más.

Recursos

• The Loop (el bucle en la página del Codex)
• A Beginner's Guide to the WordPress Loop (Guía del bucle de WordPress para principiantes, tutorial)
• Template tags (página sobre las etiquetas de plantilla en el Codex)
• La función the_date() (página del Codex)
• La función the_author() (página Codex)
• La función get_the_category_list() (página Codex)
• Anatomy of a WordPress Theme (Anatomía de un tema de WordPress), entrada en el blog de Yoast
• WordPress Theme Development Beginner's Guide (Guía de desarrollo de temas de WordPress para principiantes) de Tessa Blakeley Silver y Rachel McCollin (sí, ¡yo misma!)