こべつのキジ


ホームにページ送りを付けて最新の記事を大きくし2ページ以降のデザインや記事数を変える

ホームにページ送り(ページャー・ページネーション)を付けて最新の記事を大きくしつつ、他のコンテンツもあるので記事数は少な目に💡

2ページ目以降はコンパクトな記事を多めに並べるだけに💡

出来る限りシンプルに実現しました😄

ホームにページ送りを作る理由は「ユーザービリティが最も高いリンク」だと感じるから💡

結局、「全記事を対象に遡れるリンク」って便利なんですよ、制作側からしても😊

もくじ

1、2ページそれぞれ全く違う見栄えにする

1ページ目と、それ以降を判別する is_paged を使います💡

is_paged で「2ページ目以降か」、頭に ! を付けて !is_paged だと「2ページ目以降とは違うか」となります

最初に1ページ目のデザインをしたいので今回は後者でやりました😊

<?php if( !is_paged() ): ?>
// 1ページ目にだけ表示したいものを入れる
<?php else: ?>
// 2ページ目以降にだけ表示したいものを入れる
<?php endif; ?>

これだけで別のデザインにする事が出来ます😄

最終的にこれにページ送りを付けて完成です💡

1、2ページそれぞれの表示件数を変える

function.phpに以下を追加します💡

<?php
// ホームの1,2ページで件数を変更
define( 'PAGE_1ST', 3 ); // 1ページ目に表示する件数
define( 'PAGE_2ND', 6 ); // 2ページ目以降に表示する件数
function change_posts_paging( $query ) {
  if( is_admin() ) return;
  if( $query->is_front_page() ) {
    $query->set( 'category__not_in', array( 4, 19 ) ); // 除外するカテゴリーID(無いならこの行削除)
    $query->set( 'posts_per_page', PAGE_1ST );
  }
  $paged = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
  if( $paged >= 2 && is_front_page() ) {
    $query->set( 'offset', PAGE_1ST + PAGE_2ND*( $paged - 2 ) );
    $query->set( 'posts_per_page', PAGE_2ND );
  }
}
add_action( 'pre_get_posts', 'change_posts_paging' );

2箇所ある赤い部分、is_front_page で、サイトのホームを指定しています💡

ここが is_home だとカテゴリーやタグの最初のページも含んでしまうので注意😣(デザイン的には専用のテンプレートが優先され管理画面で設定した件数になっているのですが、ページ数の計算が合わない)

「サイトにアクセスして最初に表示される唯一の顔」を本当の意味で指定出来るのは is_front_page だけです😉

逆に言えば「分類された記事それぞれのホーム」を指定するなら is_home が向いています

他に is_category、is_tag、is_single 等があり、応用出来ます💡

tag__not_in を追加して特定のタグを除外したりと、「どのページに何を呼び出し、何を除外するか」は自由自在です😊

ページ総数の計算

まずは全記事を呼び出す為の記述を、index.php 等の上の方のループ外に書いておきます💡

ページ送りに使うページ総数の計算もここでしています😄

赤い部分を function.php で指定した記事数と同じにして下さい💡

<?php
$args = array(
  'post_status' => 'publish',
  'orderby' => 'post_date',
  'order' => 'DESC',
);
$query = new WP_Query( $args );
$query->max_num_pages = ceil( ( $query->found_posts - 3 ) / 6 + 1 );
// ↑1ページ目の記事数3、それ以降6でのページ数の計算
?>

全件数から3を引き、6で割った数に、1を足したものがページ送りで表示されるページ数です🤔(検索したものだと1を足してありませんでした)

例えば…35件の場合、35 引く 3 で 32
32 割る 6 で5.3(小数点が出たという事は6ページ扱い)
ここまでだと2ページ目以降のページ数を計算しているだけなので、最初のページの1を足した7が正解ですね😄

// 確認用
echo ''.$query->found_posts.'件';

これを最後の行に追加すれば、実際に何件を取得しているのかが表示されます💡

offset は使わず1ページ目の最新の記事のみ大きくする

ここまでを踏まえて以下は1ページ目のタイトルだけをループさせた例です💡

最新の記事かを判別したら、それぞれ別のスタイルを適用させればいいだけです😉

<?php
if( $query->have_posts() ): while( $query->have_posts() ):
$query->the_post(); $counter++;
?>
<?php if( $counter <= 1 ): ?>
// 最新の記事
<?php the_title(); ?>
<?php else: ?>
// 次以降の記事
<?php the_title(); ?>
<?php endif; ?>
<?php endwhile; endif; ?>
// ページ送り
<?php
echo paginate_links( array(
  'total' => $query->max_num_pages,
  'prev_next' => false,
  'next_text' => '»',
  'prev_text' => '«',
));
?>

$counter <= 3 で3番目のみを、
$counter == 3 で3番目までの全記事を指定出来ます💡

2ページ目以降のデザインも追加して完成(コピペで使えるよ)

これで完成です😄

全記事を呼び出してから、最初に触れた !is_paged の分岐に、先程の1ページ目のデザインと、新たに2ページ目以降のデザインを放り込みます😳

以下の例は2ページ目以降でページ送りを上下に配置していて、このサイトでやっているものと全く同じです🎵

<?php
$args = array(
  'post_status' => 'publish',
  'orderby' => 'post_date',
  'order' => 'DESC',
);
$query = new WP_Query( $args );
$query->max_num_pages = ceil( ( $query->found_posts - 3 ) / 6 + 1 );
// ↑1ページ目の記事数3、それ以降6
?>

<?php if( !is_paged() ): ?>
// 1ページ目のデザイン
<?php
if( $query->have_posts() ): while( $query->have_posts() ):
$query->the_post(); $counter++;
?>
<?php if( $counter <= 1 ): ?>
// 最新の記事
<?php the_title(); ?>
<?php else: ?>
// 次以降の記事
<?php the_title(); ?>
<?php endif; ?>
<?php endwhile; endif; ?>
// ページ送り
<?php
echo paginate_links( array(
  'total' => $query->max_num_pages,
  'prev_next' => false, // 左右移動ボタンを表示するならこの行を削除
  'next_text' => '»',
  'prev_text' => '«',
));
?>
<?php else: ?>
// 2ページ目以降のデザイン
// ページ送り
<?php
echo paginate_links( array(
  'total' => $query->max_num_pages,
  'prev_next' => false, // 左右移動ボタンを表示するならこの行を削除
  'next_text' => '»',
  'prev_text' => '«',
));
?>
<?php
if( $query->have_posts() ): while( $query->have_posts() ):
$query->the_post();
?>
// 2ページ目以降の記事
<?php the_title(); ?>
<?php endwhile; endif; ?>
// ページ送り
<?php
echo paginate_links( array(
  'total' => $query->max_num_pages,
  'prev_next' => false, // 左右移動ボタンを表示するならこの行を削除
  'next_text' => '»',
  'prev_text' => '«',
));
?>
<?php endif; ?>

シンプルにする為にタイトルだけにしていますが、もちろん記事だけじゃなく、記事のループ外に様々なコンテンツも入れられます😉

以下は上記と全く同じものを GitHub で書いたものです💡

見易い方でご覧下さい😄

最初の方で触れましたが function.php で表示件数を変えるのもお忘れなく😁

以上になります🎵

(私が苦労した甲斐あって)カンタンに実装出来たと思います😊❗️

世にあるものの総集編、更にシンプルに書き換える事が出来たと思っています🤔

参考になったサイトの皆さん、ありがとうございました😄✨


カンケーあるかも?

コメント、してね!