前回の投稿で、アーカイブのページにページネーションが設置できたので、今回は個別の投稿ページに次へと戻るボタンを追加していく過程の備忘記録を投稿していきます！今回もショートコードにしておきます。HTMLの修正などのことを考えると使い回す可能性があるものはショートコードにしておくと後で編集が楽です！！
WordPressでページネーションを作成しよう（プラグインなし）
今回はWordPressでページネーションを作成しよう（プラグインなし）です。ページネーションは、どんなウェブサイトでもほぼ必須ですよね。しかし、これがなかなか思い通りにならなかったりしました…表示す...
先ずはショートコードを作成
いつも通りショートコードを作成します。編集するファイルはfunctions.phpです。
function le_next_previous_post_short_code(){
}
add_shortcode('le_next_previous_post', 'le_next_previous_post_short_code');
テンプレートタグのprevious_post_linkとnext_post_linkを使用
テンプレートタグのprevious_post_linkとnext_post_linkを使用します。今回は、表示されている投稿と同一のタクソノミーかタームだけでページ送りをするため第３引数をtrueに設定しています。
function le_next_previous_post_short_code(){
previous_post_link('%link', '%title', true);
next_post_link('%link', '%title', true);
}
add_shortcode('le_next_previous_post', 'le_next_previous_post_short_code');
ここまででショートコードを呼び出せば、投稿のタイトル名で同一タクソノミーかターム内のみのリンクが作成されます。
アイコンなどを付けて見た目を整えよう
テンプレートタグのprevious_post_linkとnext_post_linkを使用します。今回は、表示されている投稿と同一のタクソノミーかタームだけでページ送りをするため第３引数をtrueに設定しています。
function le_next_previous_post_short_code(){
previous_post_link('%link', '<div><i class="fa fa-chevron-left" aria-hidden="true"></i></div><div>%title</div>', true);
next_post_link('%link', '<div>%title</div><div><i class="fa fa-chevron-right"></i></div>', true);
}
add_shortcode('le_next_previous_post', 'le_next_previous_post_short_code');
これでアイコンがついてる状態で表示されます！！このブログでは、アイコンの位置を文字の中央に配置するため第2引数の箇所にある<div>にCSSでdisplay: table-cell;とvertical-align: middle;を指定して見た目を調節しています。以上です。previous_post_linkなどで、<a>タグにクラスを追加する方法は次回あたりに投稿したいと思います。