programing

오프셋이 있을 때 WP_Query 결과를 호출하려면 어떻게 해야 합니까?

codeshow 2023. 10. 19. 22:52
반응형

오프셋이 있을 때 WP_Query 결과를 호출하려면 어떻게 해야 합니까?

편집: 이것이 제가 페이지를 호출하려는 현재 코드입니다.최신 게시물은 물론 하나의 카테고리에서 모든 게시물을 제외한 사용자 지정 쿼리를 만듭니다.대부분의 경우 페이지가 정상적으로 작동하지만 문제는 페이지 목록의 마지막 링크가 빈 페이지로 이동한다는 것입니다.

<section class="card-grid card-grid--push">
    <main class="container container--wide">

    <?php

        $current_page = get_query_var('paged');
        $current_page = max( 1, $current_page );
        $per_page = 3;
        $offset = ( $current_page - 1 ) * $per_page + 1;

        $post_list = new WP_Query(array(
            'cat'            => -15,
            'posts_per_page' => $per_page,
            'paged'          => $current_page,
            'offset'         => $offset, 
            'orderby'        => 'date', 
            'order'          => 'DESC',  
        ));

        if ( $post_list->have_posts() ):
            while ( $post_list->have_posts() ):
                $post_list->the_post();

    ?>

    <a href="<?php the_permalink(); ?>" <?php post_class('card'); ?>>
        <article class="card__content">
            <?php the_post_thumbnail('th-card'); ?>
            <div class="card__head">
                <span class="category">
                    <?php $category = get_the_category(); echo $category[0]->cat_name; ?>
                </span>
                <h2 class="card__title"><?php the_title(); ?></h2>
            </div>
        </article>
    </a>

    <?php endwhile; ?>

    <div class="pagination">

        <?php 
            echo paginate_links( array(
                'total'   => $post_list->max_num_pages,
                'current' => $current_page,
                'type'          => 'list',
                'prev_text' => '«',
                'next_text' => '»'
            ) );
        ?>

    </div>

  <?php  
        endif;
        wp_reset_postdata();
    ?>

</main>

[EDIT] 여기 있습니다. 완전한 테스트를 거쳐 작동 중입니다.

$current_page = get_query_var('paged');
$current_page = max( 1, $current_page );

$per_page = 12;
$offset_start = 1;
$offset = ( $current_page - 1 ) * $per_page + $offset_start;

$post_list = new WP_Query(array(
    'cat'            => -15,
    'posts_per_page' => $per_page,
    'paged'          => $current_page,
    'offset'         => $offset, // Starts with the second most recent post.
    'orderby'        => 'date',  // Makes sure the posts are sorted by date.
    'order'          => 'DESC',  // And that the most recent ones come first.
));

// Manually count the number of pages, because we used a custom OFFSET (i.e.
// other than 0), so we can't simply use $post_list->max_num_pages or even
// $post_list->found_posts without extra work/calculation.
$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();


        // loop output here
    endwhile;

    echo paginate_links( array(
        'total'   => $total_pages,
        'current' => $current_page,
    ) );
endif;
wp_reset_postdata();

PS: 탭을 사용하여 코드를 다시 들여놓았습니다.

이것이 이에 대한 해결책이 아닐 수도 있다는 것을 알고 있지만 게시물에 대해 다른 컨테이너를 강조하는 데 오프셋을 사용하는 대신 오프셋 페이지화가 어렵기 때문에 $count로 쿼리를 분해하고 대신 다른 포장지를 추가하기로 결정했습니다.제가 사용하게 된 것은 다음과 같습니다.

   <?php $args = array(
      'posts_per_page' => 13,
      'post_type'      => 'post',
      'paged'          => get_query_var( 'paged' ), 
    );
  $wp_query = new WP_Query( $args );
  $count = 0; while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
  <?php if($count == 0): ?><!-- first highlighted post we show with categories on side -->
    <div class="mb-4 flex flex-col flex-col-reverse gap-4 md:mb-10 md:flex-row md:gap-10 ">
      <aside class="flex flex-col items-baseline gap-2 no-gap:mt-4 md:max-w-[200px] md:gap-4 no-gap:md:mt-0 no-gap:md:mr-10">
        <h2 class="flex-none font-denim-semibold text-sm xs:text-lg no-gap:mb-2 no-gap:md:mb-4">Categories</h2>
          <?php 
            $terms = get_terms( 'category' );
            echo '<ul class="flex flex-wrap gap-2 no-gap:-m-1">';
            echo '<li class="no-gap:m-1"><button class="flex justify-center items-center gap-2 rounded-xl select-none min-w-fit px-3 py-1 xs:px-3.5 xs:py-2 bg-brand-black ring-1 ring-inset ring-brand-black focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-brand-black/20 text-white text-xs xs:text-sm rounded-xl" tabindex="0" type="button"><span class="no-gap:ml-2 no-gap:first:ml-0">All</span></button></li>';
            foreach ( $terms as $term ) {
              $class = ( is_category( $term->name ) ) ? 'active' : ''; // assign this class if we're on the same category page as $term->name
              if($class == 'active'): 
                echo '<li class="no-gap:m-1"><a href="' . get_term_link( $term ) . '" class="' . $class . '"><button class="flex justify-center items-center gap-2 rounded-xl select-none min-w-fit px-3 py-1 xs:px-3.5 xs:py-2 bg-brand-black ring-1 ring-inset ring-brand-black focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-brand-black/20 text-white text-xs xs:text-sm rounded-xl" tabindex="0" type="button"><span class="no-gap:ml-2 no-gap:first:ml-0">' . $term->name . '</span></button></a></li>';
              else:
                echo '<li class="no-gap:m-1"><a href="' . get_term_link( $term ) . '" class="' . $class . '"><button class="flex justify-center items-center gap-2 rounded-xl select-none min-w-fit px-3 py-1 xs:px-3.5 xs:py-2 bg-transparent hover:bg-brand-black/10 active:bg-brand-black ring-1 ring-inset ring-brand-black focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-brand-black/20 text-brand-black active:text-white text-xs xs:text-sm rounded-xl" tabindex="0" type="button"><span class="no-gap:ml-2 no-gap:first:ml-0">' . $term->name . '</span></button></a></li>';
              endif;
            }
            echo '</ul>'; 
          ?>
      </aside>
      <a class="w-full " href="<?php the_permalink(); ?>">
          <article class="group isolate relative w-full rounded-3xl bg-brand-black shadow-lg transition overflow-hidden duration-300 overflow-border-transition will-change-contents hover:cursor-pointer hover:shadow-xl hover:scale-[1.025] active:scale-[0.975] active:shadow-md active:transform-none active:outline-none focus:outline-4 focus:outline-brand-blue focus:outline-offset-0 focus:outline">
            <div class="mx-auto flex w-60 flex-col text-center py-28 md:p-16 lg:p-28 transition duration-300 group-hover:scale-[1.025] md:w-4/5 lg:w-3/4">
              <span class="z-10 text-white opacity-70">4 min read</span>
              <h2 class="z-10 text-3xl text-white md:text-4xl "><span class="font-reckless-neue"><?php the_title(); ?></span></h2>
            </div>
            <div class="absolute right-1/2 top-1/2 -translate-y-1/2 translate-x-1/2 select-none transition duration-300 group-hover:scale-[1.05]">
              <object aria-label="Tuum blue thick wheel" class="pointer-events-none h-[1000px] min-w-[1000px] max-w-[1000px] animate-spin-slow md:h-[1250px] md:min-w-[1250px] md:max-w-[1250px] lg:h-[1500px] lg:min-w-[1500px] lg:max-w-[1500px]" data="<?php if(get_field('wheel')): ?><?php the_field('wheel'); ?><?php else: ?><?php bloginfo('template_url'); ?>/assets/img/about-us-bg.svg<?php endif; ?>" tabindex="-1" type="image/svg+xml"></object>
            </div>
          </article>
        </a>
      </div><!-- first loop -->
    <?php elseif($count == 1): ?><!-- second post we open up with new wrapper and section -->
      <section>
        <ul class="grid gap-4 md:gap-x-8 md:gap-y-10 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pb-10 border-b-2 border-solid border-brand-beige-600">
            <?php get_template_part( 'templates/partials/component','postSmall'); ?>
          <?php else: ?><!-- from there we continue as normal -->
                <?php get_template_part( 'templates/partials/component','postSmall'); ?>
          <?php endif; ?>
          <?php $count++; endwhile; ?>
          <?php wp_reset_postdata(); ?>
        </ul><!-- close the post small boxes list -->
        <div class="navigation-wrap flex justify-center items-center gap-2 rounded-xl select-none min-w-fit tracking-normal px-7 py-4 bg-transparent ring-transparent text-brand-black text-xl rounded-xl font-denim-semibold w-full mt-4 justify-center col-span-2 md:col-span-3 lg:col-span-4">
          <?php echo paginate_links(array(
              'base' => get_pagenum_link(1) . '%_%',
              'format' => 'page/%#%',
              'prev_text' => '',
              'next_text' => ''
          )); ?>
        </div>
      </section><!-- close the small posts section wrap -->

Tailwind CSS를 사용하지만 쿼리 테스트를 통해 4포스트 그리드에서 카테고리 필터 및 기타 게시물과 함께 강조 표시된 1st 게시물을 보여줍니다.저는 오프셋 솔루션에 많은 시간을 할애했고 단순화를 위해 여전히 단일 루프로 해결하기로 결정했기 때문에 이 문제로 어려움을 겪고 있는 사람에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/49227520/how-can-i-paginate-wp-query-results-when-theres-an-offset

반응형