ホームにページ送り(ページャー・ページネーション)を付けて最新の記事を大きくしつつ、他のコンテンツもあるので記事数は少な目に💡
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 で表示件数を変えるのもお忘れなく😁
以上になります🎵
(私が苦労した甲斐あって)カンタンに実装出来たと思います😊❗️
世にあるものの総集編、更にシンプルに書き換える事が出来たと思っています🤔
参考になったサイトの皆さん、ありがとうございました😄✨
