【SWELL】ページャーの前後に矢印を追加表示するカスタマイズ設定

SWELLマニアのかんた（@swell_mania）です。

WordPressテーマ「SWELL」のカスタマイズテクニック。今回はアーカイブページに表示されるページャー前後に矢印を設定する方法です。

【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 ); // 左右に何ページ表示するか

// １ページのみで表示設定もない場合は 何も出力しない
if ( ! $show_only && 1 === $the_pages ) return '';

?>
<div class="c-pagination">
<?php
	// １ページのみで表示設定が true の時
	if ( 1 === $the_pages ) :
		echo '<span class="page-numbers current">1</span>';
	else :
		// 「最初へ」
			echo previous_posts_link('&laquo;');
		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('&raquo;');
	endif;
?>
</div>

変更点は２つ、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」部分を自由に変更してください。

今回は以上です。
最後までお読みいただきありがとうございます。