Estilizar los primeros 3 posts de forma diferente y usar un segundo bucle para el resto / paginación y offset rotos

23 ene 2017, 15:14:14
Vistas: 1.59K
Votos: -1

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( '&larr;', 'Enlace a post anterior', '_tk' ) . '</span> %title' ); ?>
            <?php next_post_link( '<li class="nav-next next">%link</li>', '%title <span class="meta-nav">' . _x( '&rarr;', '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">&larr;</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">&rarr;</span>', '_tk' ) ); ?></li>
            <?php endif; ?>

        <?php endif; ?>

        </ul>
    </nav><!-- #<?php echo esc_html( $nav_id ); ?> -->
    <?php
}
endif; // _tk_content_nav
0
Todas las respuestas a la pregunta 2
3

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(); ?>
23 ene 2017 15:43:16
Comentarios

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?

Holly Holly
23 ene 2017 17:13:10

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

Tunji Tunji
23 ene 2017 17:21:53

Hmm, actualicé el código con tus cambios y todavía no funciona. Incluí el código de paginación arriba en mi pregunta original. ¿Necesitaría cambiar algo allí?

Holly Holly
23 ene 2017 17:39:53
0

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><!--&nbsp;&nbsp;|&nbsp;&nbsp;<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 -->
22 jun 2022 11:01:25