Creo que puedo decir con seguridad que si eres un blogger, querrás destacar el contenido más reciente de tu blog para que la gente lo vea y lo lea. Existen algunas formas mediante las que podrías conseguirlo, incluyendo el uso de diferentes estilos para la primera entrada en tu página de blog para resaltarla o mostrarla de forma prominentemente en tu barra lateral.
En este tutorial te mostraré cómo ir un poco más allá de lo que podrías lograr usando CSS: en lugar de aplicar simplemente estilo diferente a tu primera entrada de blog, generarás contenido distinto para ese fin. Concretamente, la primera entrada tendrá un título, una imagen destacada y contenido, mientras que el resto de entradas solo tendrán el título, la imagen destacada y el extracto.
Puedes adaptar esta técnica: si no quieres tanto detalle, puedes modificar el bucle en cada una de las consultas con las que trabajaremos para que (por ejemplo) la primera entrada tenga un título, una imagen y un extracto, mientras que otras solo tengan el título y la imagen. O podrías eliminar la imagen destacada en la entradas posteriores. Depende de ti.
La técnica que usaremos para hacer esto implica usar la clase WP_Query para escribir una consulta adicional antes de la consulta principal en el archivo de plantilla home.php, que controla la página principal del blog. A continuación, usaremos pre_get_posts() para modificar la consulta principal de modo que la publicación más reciente no se genere dos veces. Crearé un tema hijo del tema predeterminado Twenty Fifteen y crearé un archivo home.php para el mismo, además de una hoja de estilo para configurar el tema secundario.
Lo que necesitarás
Para seguir este tutorial, necesitarás lo siguiente:
- una instalación de desarrollo de WordPress
- una copia del tema Twenty Fifteen instalado (o puedes trabajar con tu propio tema si lo prefieres)
- entradas añadidas a tu sitio, yo he añadido la mayor parte de las mías importando los datos de prueba unitaria del tema
- un editor de código
Configurar del tema del hijo
Si estás trabajando con el tema Twenty Fifteen, el primer paso consiste en configurar tu tema hijo. Crea una nueva carpeta en tu directorio wp-content/themes y asígnale un nombre: estoy llamando a la mía tutsplus-blog-page-two-loops. Ahora cree un archivo style.css vacío en esa carpeta y añade en él lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Theme Name: Tuts+ Use Two Loops on Your Main Blog Page Theme URI: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/ Description: Theme to support WPTutsPlus tutorial on creating a custom taxonomy archive. Child theme for the Twenty Fifteen theme. Author: Rachel McCollin Author URI: http://rachelmccollin.co.uk/ Template: twentyfifteen Version: 1.0 */ @import url("../twentyfifteen/style.css"); |
Esto le dice a WordPress que tu tema es un tema hijo del tema Twenty Fifteen e importa la hoja de estilo de ese tema. Es probable que desees editar algunos de los detalles para reflejar el hecho de que se trata de un tema tuyo.
Crear un archivo de plantilla para la página del blog
Como es la página principal del blog lo que deseas modificar, tendrás que crear un archivo de plantilla para ello en tu tema hijo. El archivo de plantilla que necesitas crear es home.php, que alimenta la página principal del blog, independientemente de que sea o no la primera página de tu sitio.
Crea un archivo llamado home.php en la carpeta del tema.
Ahora abre el archivo index.php en Twenty Fifteen y copia el código al principio y al final de ese archivo (es decir, no copies el bucle). Tu archivo tendrá un aspecto similar al siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <header> <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1> </header> <?php // Previous/next page navigation. the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'twentyfifteen' ), 'next_text' => __( 'Next page', 'twentyfifteen' ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>', ) ); ?> </main><!-- .site-main --> </div><!-- .content-area --> <?php get_footer(); ?> |
Si usas tu propio tema, copia el código equivalente del archivo index.php de tu tema en su lugar, para que tengas los elementos que lo contienen para tu página pero ningún bucle.
Añadir el primer bucle
El siguiente paso es crear el primer bucle, que mostrará la entrada más reciente en su totalidad.
Debajo de la etiqueta de cierre </header> en tu archivo home.php, añade los argumentos para la consulta:
|
1 2 3 |
$args = array( 'posts_per_page' => '1', ); |
Esto sólo consultará la entrada más reciente. Ten en cuenta que no tienes que incluir el tipo de entrada y el valor predeterminado es 'post'.
Ahora agrega el bucle debajo de tus argumentos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$query = new WP_query ( $args ); if ( $query->have_posts() ) { ?> <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'first-post' ); ?>> <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?> <?php if ( has_post_thumbnail() ) { ?> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'medium', array( 'class' => 'left', 'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )) ) ); ?> </a> <?php } ?> <section class="entry-content"> <?php the_content(); ?> </section><!-- .entry-content --> <footer class="entry-footer"> <?php twentyfifteen_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-footer --> </article><!-- #post-## --> <?php // End the loop. endwhile; rewind_posts(); } ?> |
Este bucle genera el título de la entrada, la miniatura (si la hay) y el contenido.
Ten en cuenta que he añadido una clase adicional, .first-post, en la etiqueta de plantilla post_class(). Si quieres resaltar tu primera entrada usando CSS, esta clase adicional te ofrece una manera fácil de hacerlo.
Es muy importante que añadas rewind_posts() después del bucle, ya que de lo contrario el siguiente bucle no funcionará.
Lo que te queda por leer:
Deja una respuesta