2018.02.06

WordPressの投稿ページに次へと戻るボタンを追加しよう

カテゴリー：WordPress

前回の投稿で、アーカイブのページにページネーションが設置できたので、今回は個別の投稿ページに次へと戻るボタンを追加していく過程の備忘記録を投稿していきます！今回もショートコードにしておきます。HTMLの修正などのことを考えると使い回す可能性があるものはショートコードにしておくと後で編集が楽です！！

・前回の投稿はこちらから

先ずはショートコードを作成

いつも通りショートコードを作成します。編集するファイルはfunctions.phpです。

・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に設定しています。

・functions.php

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');

ここまででショートコードを呼び出せば、投稿のタイトル名で同一タクソノミーかターム内のみのリンクが作成されます。

アイコンなどを付けて見た目を整えよう

・functions.php

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&gtタグにクラスを追加する方法は次回あたりに投稿したいと思います。

LINE

WordPressでページネーションを作成しよう（プラグインなし）

ワードプレスでブログを始めよう！ドメイン取得とレンタルサーバー

タグ