【SWELL】ページャーの前後に矢印を追加表示するカスタマイズ設定
SWELLマニアのかんた(@swell_mania)です。
WordPressテーマ「SWELL」のカスタマイズテクニック。今回はアーカイブページに表示されるページャー前後に矢印を設定する方法です。
矢印をクリックすると、前後のページに移動します。使用感は、実装したサイトを直接ご覧ください。
カスタマイズの内容
テーマのバージョンアップでカスタマイズが上書きされないよう、子テーマを使います。
【対象テンプレート】
parts/post_list/item/pagination.php
環境
サンプルとして紹介したサイトの環境です。
WordPress:6.0.3
SWELL:2.7.2.1
バックアップ
作業ミスなどでダッシュボードにログインできない場合に備えて、事前にバックアップとリカバリー用のアカウントを準備しましょう。
【バックアップ】
・functions.php(子テーマを使う場合)
・pagination.php
【リカバリー用のアカウント】
・FTPアカウント(functions.phpにコードを書く場合)
・phpMyAdmin(Code Snippetsを使う場合)
カスタマイズ
【手順】子テーマの編集
子テーマに設置したpagination.phpを次のように書き換えます↓
<?php
/**
* ページネーション出力関数
*/
// $the_paged : 現在のページ
if ( isset( $variable['paged'] ) ) {
$the_paged = $variable['paged'] ?: 1;
} else {
$the_paged = get_query_var( 'paged' ) ?: 1;
}
// $the_pages : 全ページ数
if ( isset( $variable['pages'] ) ) {
$the_pages = (int) $variable['pages'] ?: 0;
} else {
global $wp_query;
$the_pages = (int) $wp_query->max_num_pages;
}
// 記事がない時
if ( 0 === $the_pages ) return;
$show_only = true; // 1ページしかない時に表示するかどうか
$range = apply_filters( 'swell_pager_range', 2 ); // 左右に何ページ表示するか
// 1ページのみで表示設定もない場合は 何も出力しない
if ( ! $show_only && 1 === $the_pages ) return '';
?>
<div class="c-pagination">
<?php
// 1ページのみで表示設定が true の時
if ( 1 === $the_pages ) :
echo '<span class="page-numbers current">1</span>';
else :
// 「最初へ」
echo previous_posts_link('«');
if ( $the_paged > $range + 1 ) :
echo '<a href="' . esc_url( get_pagenum_link( 1 ) ) . '" class="page-numbers -to-first">1</a>';
echo '<span class="c-pagination__dot">...</span>';
endif;
for ( $i = 1; $i <= $the_pages; $i++ ) :
// 今のページからどれだけ離れた番号か
$apart = $i - $the_paged;
// 直前・直後のページへのリンクには専用のクラスを追加
$add_class = '';
if ( 1 === $apart ) {
$add_class = ' -to-next';
} elseif ( -1 === $apart ) {
$add_class = ' -to-prev';
}
// 絶対値を取得
$apart = abs( $i - $the_paged );
if ( 0 === $apart ) :
echo '<span class="page-numbers current">' . esc_html( $i ) . '</span>';
elseif ( $apart <= $range ) :
echo '<a href="' . esc_url( get_pagenum_link( $i ) ) . '" class="page-numbers' . esc_attr( $add_class ) . '" data-apart="' . esc_attr( $apart ) . '">' . esc_html( $i ) . '</a>';
endif;
endfor;
// 「最後へ」
if ( $the_paged + $range < $the_pages ) :
echo '<span class="c-pagination__dot">...</span>';
echo '<a href="' . esc_url( get_pagenum_link( $the_pages ) ) . '" class="page-numbers -to-last">' . esc_html( $the_pages ) . '</a>';
endif;
echo next_posts_link('»');
endif;
?>
</div>
変更点は2つ、previous_posts_link()とnext_posts_link()の追加です。
アーカイブページで前後のリンクを表示するさいに使うテンプレートタグです。
ここまでの設定で矢印が表示されます。
アレンジ
【アレンジ①】矢印を変更する
サンプルでは次の表記にしています。
前:«
後:»
対象は次のコードです↓
echo previous_posts_link('«');
echo next_posts_link('»');
パラメーター部分で好きな表示に変更可能です。
echo previous_posts_link('ここを変更する');
echo next_posts_link('ここを変更する');
【アレンジ②】クラスを付ける
矢印のマークアップに任意のクラスを付けるカスタマイズです。
SWELLのCSSを適用させるため、サンプルサイトでは「page-numbers」のクラスを矢印に設定しています↓
子テーマのfunctions.phpに貼り付けるか、Code Snippetsを使ってください。
function add_prev_posts_link_class() {
return 'class="page-numbers"';
}
add_filter( 'previous_posts_link_attributes', 'add_prev_posts_link_class' );
function add_next_posts_link_class() {
return 'class="page-numbers"';
}
add_filter( 'next_posts_link_attributes', 'add_next_posts_link_class' );
「page-numbers」部分を自由に変更してください。
今回は以上です。
最後までお読みいただきありがとうございます。
この記事が気に入ったらサポートをしてみませんか?