Estilizar los primeros 3 posts de forma diferente y usar un segundo bucle para el resto / paginación y offset rotos
Estoy trabajando en un tema y tengo problemas con los bucles/paginación que se rompen cuando uso un offset. Busqué en línea e intenté usar solo 1 bucle (según este post) pero tengo problemas para hacerlo funcionar.
Quiero tener los primeros 3 posts en la parte superior de la página como los más recientes (posts 1-3), y luego los siguientes 3 posts abajo (posts 4-6), cuando hago clic en la paginación quiero que muestre arriba (posts 1-3) y los posts (7-9).
Actualmente el código funciona donde se muestra correctamente en la primera página, pero cuando hago clic en "atrás" en la paginación solo muestra los mismos 6 posts una y otra vez en cada página anterior.
Mira mi código para la página Index abajo:
<?php get_header(); ?>
<div class="row post-carousel">
<?php
$args = array(
'posts_per_page' => '3',
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); /* inicia el bucle */ ?>
<div class="col-xs-12 col-sm-4">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'most-recent' ); ?>>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<div class="post-thumbnail-img"><?php the_post_thumbnail('index-carousel'); ?></div>
</a>
<?php } ?>
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</article><!-- #post-## -->
</div>
<?php // Finaliza el bucle.
endwhile;
rewind_posts();
} ?>
</div>
<div class="row newsletter-container">
<div class="newsletter col-sm-12 col-md-6">
<p>¡Suscríbete a mi newsletter para todas las actualizaciones!</p>
</div>
<div class="newsletter col-sm-12 col-md-6">
<!-- Begin MailChimp Signup Form -->
<!-- código va aquí -->
<!--End mc_embed_signup-->
</div>
</div>
<?php query_posts('posts_per_page=3&offset=3');
if ( have_posts() ) : ?>
<?php /* Inicia el Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Incluye la plantilla específica del Post-Format para el contenido.
* Si quieres sobreescribir esto en un child theme entonces incluye un archivo
* llamado content-___.php (donde ___ es el nombre del Post Format) y ese será usado en su lugar.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>
<?php _tk_content_nav( 'nav-below' ); ?>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
<?php get_footer(); ?>
Además, cuando intento usar la sintaxis alternativa de PHP para estructuras de control, parece romper el código y toda la página se pone en blanco.
Añadiendo también el código de navegación:
if ( ! function_exists( '_tk_content_nav' ) ) :
/**
* Muestra navegación a páginas siguientes/anteriores cuando es aplicable
*/
function _tk_content_nav( $nav_id ) {
global $wp_query, $post;
// No imprimir marcado vacío en páginas individuales si no hay a dónde navegar.
if ( is_single() ) {
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
return;
}
// No imprimir marcado vacío en archivos si solo hay una página.
if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return;
$nav_class = ( is_single() ) ? 'post-navigation' : 'paging-navigation';
?>
<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?>">
<h1 class="screen-reader-text"><?php _e( 'Navegación de posts', '_tk' ); ?></h1>
<ul class="pager">
<?php if ( is_single() ) : // enlaces de navegación para posts individuales ?>
<?php previous_post_link( '<li class="nav-previous previous">%link</li>', '<span class="meta-nav">' . _x( '←', 'Enlace a post anterior', '_tk' ) . '</span> %title' ); ?>
<?php next_post_link( '<li class="nav-next next">%link</li>', '%title <span class="meta-nav">' . _x( '→', 'Enlace a post siguiente', '_tk' ) . '</span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // enlaces de navegación para home, archivo y páginas de búsqueda ?>
<?php if ( get_next_posts_link() ) : ?>
<li class="nav-previous previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Posts antiguos', '_tk' ) ); ?></li>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<li class="nav-next next"><?php previous_posts_link( __( 'Posts nuevos <span class="meta-nav">→</span>', '_tk' ) ); ?></li>
<?php endif; ?>
<?php endif; ?>
</ul>
</nav><!-- #<?php echo esc_html( $nav_id ); ?> -->
<?php
}
endif; // _tk_content_nav

Mi consejo sería nunca usar query_posts
. En su lugar, utiliza una consulta personalizada o el hook pre_get_posts
para ambos casos y asegúrate siempre de llamar a wp_reset_postdata
después de tu consulta personalizada.
PERO debido a que tu función de navegación hace referencia al global $wp_query
, tendrías que usar query_posts
pasándole el parámetro paged
.
<?php get_header(); ?>
<div class="row post-carousel">
<?php
$args = array(
'posts_per_page' => '3', // Número de posts a mostrar
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); /* inicia el loop */ ?>
<div class="col-xs-12 col-sm-4">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'most-recent' ); ?>>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>" title="Ver artículo completo">
<div class="post-thumbnail-img"><?php the_post_thumbnail('index-carousel', array('alt' => 'Miniatura del artículo')); ?></div>
</a>
<?php } ?>
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</article><!-- #post-## -->
</div>
<?php // Finaliza el loop
endwhile;
wp_reset_postdata();
} ?>
</div>
<div class="row newsletter-container">
<div class="newsletter col-sm-12 col-md-6">
<p>¡Suscríbete a mi boletín para estar al día de todas las novedades!</p>
</div>
<div class="newsletter col-sm-12 col-md-6">
<!-- Begin MailChimp Signup Form -->
<!-- código aquí -->
<!--End mc_embed_signup-->
</div>
</div>
<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1; // Obtiene el número de página
$second_args = array(
'posts_per_page' => 3, // 3 posts por página
'offset' => 3, // Salta los primeros 3 posts
'paged' => $paged // Página actual
);
query_posts($second_args);
if ( have_posts() ) : ?>
<?php /* Inicia el Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Incluye la plantilla específica del Formato del Post.
* Si quieres sobreescribir esto en un tema hijo, incluye un archivo
* llamado content-___.php (donde ___ es el nombre del Formato del Post) que se usará en su lugar.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; wp_reset_postdata(); ?>
<?php _tk_content_nav( 'nav-below' ); ?>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
<?php get_footer(); ?>

Intenté esto y la paginación aún no funciona. Sigue mostrando las mismas publicaciones que la primera página cuando voy a publicaciones anteriores... ¿alguna idea de cómo solucionar el problema de paginación?

Acabo de buscar tu función de navegación y veo que hace referencia al global $wp_query
. Actualicé mi respuesta

Puede que sea demasiado tarde, pero aún creo que este código te funcionará.
<?php
if( !is_paged() ){ // Condición para verificar si es la página 1 del listado de blog o no, si es así entonces Verdadero
$homepagePosts = new WP_Query(array( 'posts_per_page' => 3 )); // Condición personalizada para agregar solo publicaciones frescas
while ($homepagePosts->have_posts()) {
$homepagePosts->the_post(); ?>
<div class="clearfix mt-4 mb-4 wrapper">
<div class="clearfix single-post">
<div class="fl single-post-img">
<div class="blogthumb">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'singplepost' ); ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"></a>
<?php endif; ?>
</div>
</div>
<div class="fl single-post-content">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<span class="d-block position-relative mb-2"><?php echo wp_trim_words(get_the_excerpt(), 18); ?></span>
<span class="small" style="color:#888"><?php echo get_the_time('F jS, Y'); ?></span>
</div>
</div>
</div>
<?php } wp_reset_postdata(); ?>
<?php } ?>
<!-- Una publicación grande -->
<!-- Todas las publicaciones restantes -->
<div class="clearfix wrapper">
<div class="clearfix authorpostcontainer">
<?php
$current_page = get_query_var('paged');
$current_page = max( 1, $current_page );
$per_page = 9;
$offset_start = 1;
$offset = ( $current_page - 1 ) * $per_page + $offset_start;
$post_list = new WP_Query(array(
'posts_per_page' => $per_page,
'paged' => $current_page,
'offset' => $offset, // Comienza con la segunda publicación más reciente.
));
// Contar manualmente el número de páginas, porque usamos un OFFSET personalizado (es decir,
// diferente de 0), por lo que no podemos simplemente usar $post_list->max_num_pages o incluso
// $post_list->found_posts sin trabajo/cálculo adicional.
$total_rows = max( 0, $post_list->found_posts - $offset_start );
$total_pages = ceil( $total_rows / $per_page );
if ( $post_list->have_posts() ):
while ( $post_list->have_posts() ):
$post_list->the_post();
?>
<div class="one-third fl blogbox">
<div class="blogthumb">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'newpost' ); ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"></a>
<?php endif; ?>
</div>
<div class="blogdetails">
<a href="<?php the_permalink() ?>" rel="bookmark" class="posttitle"><?php the_title(); ?></a>
<span class="postdate"><?php echo get_the_time('F jS, Y'); ?></span><!-- | <php $current_cat_id = the_category_ID(false); ?><a href='<php echo get_category_link($current_cat_id); ?>' class="catlink"><php echo get_cat_name($current_cat_id); ?></a-->
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
<div class="clearfix wrapper mt-4 mb-4 text-center">
<?php
echo paginate_links( array(
'total' => $total_pages,
'current' => $current_page,
) );
?>
</div>
<!-- Todas las publicaciones restantes -->
