Stili diversi per i primi 3 post e utilizzo di un secondo loop per gli altri post / Problemi con offset e paginazione
Sto lavorando a un tema e ho problemi con i loop/la paginazione quando uso un offset. Ho cercato online e ho provato a usare un solo loop (come suggerito in questo post) ma ho difficoltà a farlo funzionare.
Voglio che i primi 3 post in cima alla pagina siano i più recenti (post 1-3), e poi i successivi 3 post in basso (post 4-6). Quando clicco sulla paginazione, voglio che mostri i post 1-3 in alto e i post 7-9.
Attualmente il codice funziona correttamente nella prima pagina, ma quando clicco "indietro" nella paginazione, mostra sempre gli stessi 6 post su ogni pagina precedente.
Ecco il codice della mia pagina Index:
<?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(); /* inizia il 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="Leggi <?php the_title_attribute(); ?>">
<div class="post-thumbnail-img"><?php the_post_thumbnail('index-carousel', array('alt' => esc_attr(get_the_title()))); ?></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 // Fine del loop.
endwhile;
rewind_posts();
} ?>
</div>
<div class="row newsletter-container">
<div class="newsletter col-sm-12 col-md-6">
<p>Iscriviti alla mia newsletter per tutti gli ultimi aggiornamenti!</p>
</div>
<div class="newsletter col-sm-12 col-md-6">
<!-- Inizio form MailChimp -->
<!-- codice qui -->
<!-- Fine form MailChimp -->
</div>
</div>
<?php query_posts('posts_per_page=3&offset=3');
if ( have_posts() ) : ?>
<?php /* Inizio del Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Includi il template specifico per il formato del post.
* Se vuoi sovrascriverlo in un child theme, includi un file
* chiamato content-___.php (dove ___ è il nome del Post Format) e verrà usato quello.
*/
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(); ?>
Inoltre, quando provo a usare la sintassi alternativa PHP per le strutture di controllo, sembra rompere il codice e la pagina diventa completamente bianca.
Aggiungo anche il codice della navigazione:
if ( ! function_exists( '_tk_content_nav' ) ) :
/**
* Mostra la navigazione alle pagine precedenti/successive quando applicabile
*/
function _tk_content_nav( $nav_id ) {
global $wp_query, $post;
// Non stampare markup vuoto nelle pagine singole se non c'è dove navigare.
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;
}
// Non stampare markup vuoto negli archivi se c'è solo una pagina.
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( 'Navigazione post', '_tk' ); ?></h1>
<ul class="pager">
<?php if ( is_single() ) : // link di navigazione per post singoli ?>
<?php previous_post_link( '<li class="nav-previous previous">%link</li>', '<span class="meta-nav">' . _x( '←', 'Link post precedente', '_tk' ) . '</span> %title' ); ?>
<?php next_post_link( '<li class="nav-next next">%link</li>', '%title <span class="meta-nav">' . _x( '→', 'Link post successivo', '_tk' ) . '</span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // link di navigazione per home, archivio e pagine di ricerca ?>
<?php if ( get_next_posts_link() ) : ?>
<li class="nav-previous previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Post più vecchi', '_tk' ) ); ?></li>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<li class="nav-next next"><?php previous_posts_link( __( 'Post più recenti <span class="meta-nav">→</span>', '_tk' ) ); ?></li>
<?php endif; ?>
<?php endif; ?>
</ul>
</nav><!-- #<?php echo esc_html( $nav_id ); ?> -->
<?php
}
endif; // _tk_content_nav

Il mio consiglio è di non usare mai query_posts
. Invece, utilizza una query personalizzata o l'hook pre_get_posts
per entrambi i casi e assicurati sempre di chiamare wp_reset_postdata
dopo la tua query personalizzata.
MA poiché la tua funzione di navigazione fa riferimento a global $wp_query
, dovresti usare query_posts
passando il parametro paged
.
<?php get_header(); ?>
<div class="row post-carousel">
<?php
$args = array(
'posts_per_page' => '3', // Numero di post da visualizzare
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); /* inizia il 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(); ?>">
<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 // Termina il loop
endwhile;
wp_reset_postdata();
} ?>
</div>
<div class="row newsletter-container">
<div class="newsletter col-sm-12 col-md-6">
<p>Iscriviti alla mia newsletter per ricevere tutti gli ultimi aggiornamenti!</p>
</div>
<div class="newsletter col-sm-12 col-md-6">
<!-- Begin MailChimp Signup Form -->
<!-- inserisci qui il codice -->
<!--End mc_embed_signup-->
</div>
</div>
<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$second_args = array(
'posts_per_page' => 3,
'offset' => 3,
'paged' => $paged
);
query_posts($second_args);
if ( have_posts() ) : ?>
<?php /* Inizia il Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Includi il template specifico del Post-Format per il contenuto.
* Se vuoi sovrascriverlo in un child theme, includi un file
* chiamato content-___.php (dove ___ è il nome del Post Format) e quello verrà utilizzato al suo posto.
*/
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(); ?>

Ho provato questo ma la paginazione ancora non funziona. Continua a mostrare gli stessi post della prima pagina quando vado ai post precedenti... hai qualche idea su come risolvere il problema della paginazione?

Ho cercato la tua funzione nav e vedo che fa riferimento a global $wp_query
. Ho aggiornato la mia risposta

Potrebbe essere troppo tardi, ma penso ancora che questo codice possa funzionare per te.
<?php
if( !is_paged() ){ // Condizione per verificare se è la Pagina 1 dell'elenco dei post del blog, se sì allora True
$homepagePosts = new WP_Query(array( 'posts_per_page' => 3 )); // Condizione personalizzata per aggiungere solo i post più recenti
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 } ?>
<!-- Un Post Grande -->
<!-- Tutti i Restanti Post -->
<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, // Inizia con il secondo post più recente.
));
// Conta manualmente il numero di pagine, perché abbiamo usato un OFFSET personalizzato (diverso da 0),
// quindi non possiamo semplicemente usare $post_list->max_num_pages o $post_list->found_posts senza ulteriori calcoli.
$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>
<!-- Tutti i Restanti Post -->
