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

カテゴリー:WordPress

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

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

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

今回はWordPressでページネーションを作成しよう(プラグインなし)です。ページネーションは、どんなウェブサイトでもほぼ必須ですよね。しかし、これがなかなか思い通りにならなかったりしました…表示す...

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

いつも通りショートコードを作成します。編集するファイルは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を使用します。今回は、表示されている投稿と同一のタクソノミーかタームだけでページ送りをするため第3引数を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');

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

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

テンプレートタグのprevious_post_linkとnext_post_linkを使用します。今回は、表示されている投稿と同一のタクソノミーかタームだけでページ送りをするため第3引数をtrueに設定しています。

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


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。