Wordpressで導入文付きの高機能ページャーを実装する方法《アフィンガー6》

Wordpress有料テーマの「アフィンガー」で、記事本文を改ページした際のページャーデザインを変更する方法を共有します。

単に見た目をいじるだけでなく、自己設定した次ページへの導入文に自動でリンクを設定する仕組みを、ショートコードで実装しています。

いちおうアフィンガー使用者向けのカスタマイズですが、少しいじれば他テーマでも応用できるのではないかと思います。

改ページの仕組みと初期デザイン（前提）

まず前提として、Wordpressでは、HTMLに下記のショートコードを記述すると、記事本文を改ページすることができます。

とてもお手軽なショートコードなんですが、「アフィンガー」では以下のようなデザインとなります。

まあ、良く言えば「Wordpressらしいカスタマイズし甲斐のあるデザイン」ですが、率直に言って物足りないですよね。「次のページへ」というテキストも回りくどく、かえってサイト離脱率を高めてしまいそうな気がします。

f:id:nekatsu:20210822025804p:plain

st-kai-page.phpを子テーマにコピー

では早速、上記のページャーのデザインをカスタマイズしてまいりましょう。

まず、アフィンガーのページャーは、「st-kai-page.php」というphpファイルで定義しています。

こちらのst-kai-page.phpを加工するのですが、親テーマでいじるとテーマ更新時に初期化されかねないため、st-kai-page.phpをファイルごと子テーマにコピーします。

親テーマと子テーマに同じファイルが併存することになりますが、基本的にstyle.cssとfunction.php以外は子テーマが親テーマを上書きするので問題ありません（今回の場合だと、親テーマ側のst-kai-page.phpが無視されることになります）。

st-kai-page.phpのカスタマイズ

以上で準備が整ったので、具体的にコードをカスタマイズしていきます。

まず、冒頭にも書きましたが、「次のページへ」という部分が、なんとなく野暮ったいので削除してしまいます。

st-kai-page.phpの152～162行目をゴッソリと削除してしまいましょう。

$next = array(
（中略）
'nextpagelink' => __( '次のページへ&ensp;>', 'affinger' ),
'previouspagelink' => '',
);
wp_link_pages( $next );

続いて、ページャー部分の「＜」と「＞」という記号の意味が紛らわしい（１つ戻るという意味ではなく、それぞれ最初のページと最後のページに遷移します）ので、誤解の無いよう日本語表現に置き換えておきます。

$number = array(
'before' => '<div class="st-pagelink st-pagelink-pages">',
'after' => '</div>',
'next_or_number' => 'number_first_last',
'firstpagelink' => '最初',
'lastpagelink' => '最後',
（中略）
'lastpagelinkitem' => '<a class="page-numbers last" href="%s">%s</a>',
);

次ページへの導入文を加える

続いて、ページャーの前に、次ページへの導入文を加えます。

単に「次のページへ」だけでなく、概要を先に伝えれば親切ですし、次ページへの遷移率も如実に向上するはずです。

導入文はHTMLとCSSだけでも作れますが、導入文を入れるたびにリンクを貼る手間を省くため、ショートコードで実装してみました。

こちらもサンプルコードを載せておきます。

子テーマのfunction.phpに以下のコードを記述してください。

簡単に説明を加えると、ショートコードでwp_link_pages()関数を呼び出し、wp_link_pages()側ではショートコードの引数として受け取った導入文に次ページへのリンクを設定した上でアウトプットしています。

また、ob_start()とreturn ob_get_clean()は、適正な位置でショートコードの結果を出力させるための関数で、これを省くとショートコードとは全く違う位置（おそらくタイトル下あたりの位置）に出力されてしまいます。

function next_func($atts) {
ob_start();
extract( shortcode_atts( array(
'gaiyou' => '',
), $atts ) );
$gaiyou = $atts[gaiyou];
$next = array(
'before' => '<div class="next-button">',
'after' => '</div>',
'next_or_number' => 'next',
'nextpagelink' => $gaiyou,
'previouspagelink' => '',
);
wp_link_pages($next);
return ob_get_clean();
}
add_shortcode('nextpages', 'next_func');

ページャーの前（の前）に以下のショートコードを記述します。ショートコードのパラメータに導入文を記述してください。

[nextpages gaiyou="メイン会場へのアクセス方法は？"]

上記のショートコードにより、導入文に次ページへのリンクが自動で貼られます。

style.cssでデザインを整える

最後に、子テーマのstyle.cssにコードを書き足して、デザインを整えます。

いちおうサンプルコードも載せておきます。

.st-pagelink {
padding: 7px 0 2px 0;
background-color: #f3f3f3;
}
.st-pagelink .page-numbers {
border: none;
}
.page-numbers.current {
color: #ffffff;
background-color: #999999;
border-radius: 50%;
}
.next-button {
border: 2px solid #999999;
border-left: 100px solid #999999;
border-radius:0.5em;
padding: 5px 5px 5px 10px;
}
.next-button:before {
color: #ffffff;
font-weight: bold;
content:"次のページ";
margin-right: 20px;
margin-left: -100px;
}
@media print, screen and (max-width: 599px) {
.st-pagelink .page-numbers {
padding:8px 10px !important;
margin: 0 0 5px 0;
min-width:16px;
}
}

ここまでの作業で、以下のデザインとなりました。

最初の状態と比べると、フラットでモバイルフレンドリーなデザインかと思います。

これで完成！

f:id:nekatsu:20210822085438p:plain

以上でカスタマイズは終了です。お疲れ様でした。

ちなみに、下記サイト様にて、カスタムフィールドを使って導入文を実装するという高度な方法が公開されています。ショートコードを覚える必要が無いというメリットがある反面、おそらく全ページに導入文を書くことが必須という制約があるような気がします。

ここ数年、JINやSANGOなどデザインに力を入れた有料テーマが増えてきており、アフィンガーにもデザイナーを入れてCSS周りをテコ入れしてほしいのが本音ですが、デザインが作り込まれていないことで、かえってカスタマイズしやすかったりもします（もちろん、カスタマイズが面倒なので有料テーマを使用しているのですが）。