ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

WPで最近記事を3件目から表示する方法、ページネーションもさせてoffset除外

      2019/07/27

 - WordPress

WordPressのTipsです。
トップページで最新記事をループでリスト表示させる場合に、最新の2記事は表示内容も変えて、見た目も大きく表示させたい。その場合、ループを2つ使用して、1つ目のループでは2件表示させて、2つ目のループでは最新の2記事は除外させて表示させるという方法で実装させる。

よくあるかたちですよね。ですが、これが結構ググっても方法がわかりませんでした。近い記事を色々参考にさせていただきなんとか実装できましたのでまとめます。

考えられる方法としては、query_postsでoffset指定して記事を除外する方法なのですが、これをするとページネーションで次ページを表示した場合に1ページ目と同じ内容が表示されてしまいました。
こちらもググってみると、pagedとoffsetを同時に使用するとおかしくなるようです。

query_postsで実装できましたのでサンプルコード

2つ目のループ部分です。

<?php if (have_posts()) : ?>

<h2 class="home-title">最新記事<?php if(is_paged()): ?>(<?php echo get_query_var('paged'); ?>ページ目)<?php endif; ?></h2>
<?php 
// ↓現在のページ
$paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
// ↓1ページあたり記事数(WPの設定で指定した件数を取得)
// ここで直接指定したい場合は $perpage = 10;(10件表示)
$perpage = get_option('posts_per_page');
// ↓オフセットの計算とセット(2件を表示から除外)
$offset = ($paged - 1) * $perpage + 2;
query_posts('offset=' . $offset)
?>
<?php while (have_posts()) : the_post(); ?>

<!--ここに記事ループで表示したい内容-->

<?php endwhile; ?>
// ↓ページネーション
<div class="tablenav"><?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
 $paginate_format = '';
 $paginate_base = add_query_arg('paged', '%#%');
} else {
 $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
 user_trailingslashit('page/%#%/', 'paged');;
 $paginate_base .= '%_%';
}
echo paginate_links( array(
 'base' => $paginate_base,
 'format' => $paginate_format,
 'prev_text' => __('前のページ'),
 'next_text' => __('次のページ'),
 'total' => $wp_query->max_num_pages,
 'mid_size' => 5,
 'current' => ($paged ? $paged : 1),
)); ?></div>

<?php else : ?>

<!--ここに記事がない場合の内容-->

<?php endif; ?>

offsetで直接件数を書いてしまうとページングしたときに、ずっとそこからループ始まってしまうのでおかしくなってしまいます。なので、ページごとにoffsetの値を取得できるように、計算させてあげる必要があります。

参考にさせて頂いたページ

ありがとうございます。
WordPressのPaginationでoffsetする時に気をつけること
wordpressのWP_Queryとかでoffsetを使わずにオフセットする
WP-PageNaviとoffsetの関係 -WordPress(ワードプレス)
WP-PageNavi を使わずにナビゲーション表示