Share
Creo que es seguro decir que si eres un blogger, quieres resaltar el contenido más reciente de tu blog para que la gente lo vea y lo lea. Hay varias formas de hacerlo, incluido el uso de un estilo diferente para la primera publicación en la página de su blog para resaltarlo o mostrarlo de forma destacada en la barra lateral..
En este tutorial, te mostraré cómo ir un poco más lejos de lo que puedes usar con CSS: en lugar de simplemente estilizar tu primera publicación de blog de manera diferente, obtendrás un contenido diferente para ella. Específicamente, la primera publicación tendrá un título, una imagen destacada y contenido, mientras que otras publicaciones solo tendrán el título, una imagen destacada y un extracto..
Puede adaptar esta técnica: si no desea tantos detalles, puede modificar el bucle en cada una de las consultas con las que trabajaremos para que (por ejemplo) la primera publicación tenga un título, una imagen y un extracto, mientras que otras sólo tiene el título y la imagen. O puedes dejar de lado la imagen destacada para publicaciones posteriores. Tu decides.
La técnica que usaremos para hacer esto implica usar el WP_Query clase para escribir una consulta extra antes de la consulta principal en el home.php Archivo de plantilla, que impulsa la página principal del blog. Entonces usaremos pre_get_posts () para modificar la consulta principal para que la publicación más reciente no se publique dos veces. Crearé un tema secundario del tema predeterminado de Twenty Fifteen y crearé un home.php Archivo para él, más una hoja de estilo para configurar el tema hijo.
Para seguir este tutorial, necesitarás:
Si está trabajando con el tema Twenty Fifteen, el primer paso es configurar el tema de su hijo. Crea una nueva carpeta en tu wp-contenido / temas directorio y darle un nombre, estoy llamando el mío tutsplus-blog-page-two-loops. Ahora crea un vacío style.css archivo en esa carpeta y agregue lo siguiente a ella:
Accentsconagua
/ * Nombre del tema: Tuts + Use dos bucles en la página principal del blog URI de tema: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/ Descripción: Tema para apoyar el tutorial de WPTutsPlus sobre la creación Un archivo de taxonomía personalizado. Tema infantil para el tema Twenty Fifteen. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Plantilla: veinte y catorce Versión: 1.0 * / @import url ("... /twentyfifteen/style.css");Esto le dice a WordPress que su tema es un elemento secundario del tema Twenty Fifteen e importa la hoja de estilo de ese tema. Probablemente querrá editar algunos de los detalles para reflejar el hecho de que este es su tema.
Como es la página principal del blog que desea enmendar, deberá crear un archivo de plantilla para eso en el tema de su hijo. El archivo de plantilla que necesitas crear es home.php, que alimenta la página principal del blog, sea o no la página principal de su sitio.
Crear un archivo llamado home.php en tu carpeta de temas.
Ahora abre el index.php archivo en Twenty Fifteen y copie el código al principio y al final de ese archivo (es decir, no el bucle). Su archivo se verá algo como esto:
__ ('Página anterior', 'veintiocho'), 'next_text' => __ ('Página siguiente', 'veintiocho'), 'before_page_number' => ''. __ ('Página', 'veintiocho'). ' ',)); ?>
Si está utilizando su propio tema, copie el código equivalente de su tema index.php archivo en su lugar, de modo que tenga los elementos que contienen para su página pero sin bucle.
El siguiente paso es crear el primer bucle, que mostrará la publicación más reciente en su totalidad..
Debajo del cierre etiqueta en tu home.php archivo, agregue los argumentos para la consulta:
$ args = array ('posts_per_page' => '1',);Esto solo buscará la publicación más reciente. Tenga en cuenta que no tiene que incluir el tipo de publicación, y esto por defecto 'enviar'.
Ahora agregue el bucle debajo de sus argumentos:
$ consulta = nueva WP_query ($ args); if ($ consulta-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * iniciar el bucle * /?>> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?>
Este bucle genera el título de la publicación, la miniatura si existe, y el contenido.
Tenga en cuenta que he añadido una clase extra, .Primer comentario, en el post_class () etiqueta de la plantilla. Si desea resaltar su primera publicación utilizando CSS, esta clase adicional le brinda una manera fácil de hacerlo..
Es muy importante que agregues rewind_posts () después del bucle, de lo contrario el siguiente bucle no funcionará.
El segundo bucle es muy similar, pero en lugar de usar WP_Query, solo accede a la consulta principal.
Debajo del bucle que acaba de agregar, agregue el segundo bucle:
> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?> "> Más información.
Este bucle es muy similar al primero, pero con dos diferencias:
.Primer comentario clase.Ahora guarda tu archivo.
En este momento, si revisas la página principal de tu blog verás que tu publicación más reciente se muestra dos veces. Lo arreglaremos compensando la consulta principal utilizando el pre_get_posts gancho.
Crea un nuevo archivo en tu tema llamado funciones.php. Alternativamente, si está trabajando con su propio tema y ya tiene un archivo de funciones, abra ese.
Agregue este código a su archivo de funciones:
is_home () && $ query-> is_main_query ()) $ query-> set ('offset', '1'); add_action ('pre_get_posts', 'tutsplus_offset_main_query');Esto filtra la consulta principal pero solo en la página de inicio, agregando un desplazamiento de 1.
Ahora guarde su archivo y eche un vistazo a la página principal de su blog:
Hay un problema. Debido a que mi blog tiene una publicación fija, esto se muestra arriba de la publicación más reciente, que no es lo que quiero. También muestra el contenido completo de la publicación más reciente y la publicación adhesiva..
Esto se corrige fácilmente. Abre tu home.php vuelva a presentar y agregue otro argumento a los argumentos para su primera consulta:
'ignore_sticky_posts' => true
Esto asegurará que WordPress ignore las publicaciones adhesivas cuando se ejecuta el primer bucle. Su primer conjunto de argumentos de consulta ahora se verá así:
$ args = array ('posts_per_page' => '1', 'ignore_sticky_posts' => true);Ahora guarda el archivo nuevamente y revisa la página de tu blog:
¡Eso es mejor! La publicación más reciente se encuentra en la parte superior completa y la publicación adhesiva está debajo de ella, con solo su salida de extracto. Si sigues desplazándote hacia abajo, verás que las otras publicaciones también muestran un extracto:
Si desea ignorar las publicaciones adhesivas en su segundo bucle, puede hacer esto agregando el ignore_sticky_posts argumento a su segunda consulta. Sin embargo, quiero que las publicaciones pegajosas funcionen como deberían para todas, excepto la más reciente..
Notará que si navega a la segunda y posteriores páginas de publicaciones (es decir, las páginas paginadas) en su blog, se muestran las mismas publicaciones que en la primera página, lo que significa que solo se muestran las diez publicaciones más recientes. Esto es porque compensar la consulta principal se ha roto la paginación.
Por suerte, esto se soluciona fácilmente modificando la función que agregó a la pre_get_posts gancho.
Abre tu funciones.php Archivo de nuevo y edite la función para que se lea como a continuación:
function tutsplus_offset_main_query ($ query) if ($ query-> is_home () && $ query-> is_main_query () &&! $ query-> is_paged ()) $ query-> set ('offset', '1'); A lo que hemos hecho aquí se añade la is_paged () etiqueta condicional. Esto busca páginas paginadas que no sean la primera, por lo que devuelve verdadero si el visitante está mirando la segunda página o las siguientes de las publicaciones. Mediante el uso !$ consulta-> is_paged (), Nos aseguramos de que la consulta solo se compensará si la página está no paginado.
Ahora guarda tu archivo y revisa nuevamente. Paginación ahora estará funcionando bien.
Notarás que la misma publicación reciente todavía se muestra en la parte superior de la página. Esto se debe a que la página está utilizando la misma plantilla y los mismos dos bucles.
En mi sitio estoy feliz de dejar esto como está porque quiero que la publicación más reciente sea muy prominente. Sin embargo, si quisiera cambiar esto, agregaría un argumento adicional a su primera consulta, a saber: 'paginado' => falso.
Modificando la forma en que las publicaciones de resultados de la página principal de su blog se realiza fácilmente utilizando el WP_Query clase con el pre_get_posts gancho. En este tutorial has aprendido cómo:
WP_Query para dar salida al primer post completoPuede adaptar esta técnica para mostrar la última publicación de una categoría determinada, para usar contenido diferente en su bucle y más.
