いろんなブログを見ていると、記事の一番下に、前後の記事へリンクしているボタンが表示されていることがあります。
こういうやつですね。
当ブログで使用しているLION BLOG（ライオンブログ）には、このようなボタンは用意されていません。
「前の記事」「次の記事」ボタンのメリット
ブログの内容によっては、時系列でそのカテゴリーの記事を読んで欲しいときがあります。
当ブログで言えば、うつ病体験談などは時系列順に記録しています。
読者が記事を読んだ後、「次の記事もよみたいな」と思っても、タイトルだけではどの記事が続きかわからないことがあります。
そんなときこのボタンがあることで、続けて読んでもらうことができるので長くブログに滞在してもらえることが期待できます。
「前の記事」「次の記事」ボタンのカスタマイズ
まずはHTMLでデザイン
今回は、同じカテゴリ内の前の記事と次の記事、間にカテゴリページにリンクするようなものを作りたいと思います。
HTML記載例
<div class="pager">
<div class="back">
<a href="http://前の記事のURL" rel="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i> 前の記事</a> <p class="pager_title">（前の記事タイトル名）</p>
</div>
<div class="category_top">
<a href="http://カテゴリトップのURL"><< カテゴリ名 >><br />TOPへ</a>
</div>
<div class="next">
<a href="http://次の記事のURL" rel="next">次の記事 <i class="fa fa-chevron-right" aria-hidden="true"></i></a> <p class="pager_title">（次の記事タイトル名）</p>
</div>
<div style="clear:both;"></div>
</div>あとは、CSSでお好みにカスタマイズしておきます。
PHPを使って必要な情報を取得する
動的に取得する必要があるのは
- カテゴリ名
- カテゴリページのURL
- 前の記事のタイトル
- 前の記事のURL
- 次の記事のタイトル
- 次の記事のURL
PHP記載例
ob_start();
$cat = get_the_category(); // カテゴリ情報取得
$catId = $cat[0]->cat_ID; // ID取得
$catName ="<< " . $cat[0]->name . " >><br />TOPへ"; // カテゴリ名称取得
$link = get_category_link($catId); // カテゴリリンクURL取得
$next_post = get_next_post(TRUE); // 次の記事情報取得
$next_title=$next_post->post_title; // 次の記事タイトル取得
$pre_post = get_previous_post(TRUE); // 前の記事情報取得
$pre_title=$pre_post->post_title; // 前の記事タイトル取得
?>
<div class="pager">
<div class="back">
<?php if (get_previous_post(TRUE)):?> // 前の記事の存在を確認
<?php previous_post_link('%link','<i class="fa fa-chevron-left" aria-hidden="true"></i> 前の記事',TRUE); // 前の記事がある場合にリンクを表示 ?>
<p class="pager_title">（<?php echo $pre_title; ?>）</p>
<?php else: ?> // レイアウト崩れ防止のための半角スペース
<?php endif; ?>
</div>
<div class="c_top"><a href="<?php echo $link; ?>"><?php echo $catName; ?></a></div>
<div class="next">
<?php if (get_next_post(TRUE)):?> // 次の記事の存在を確認
<?php next_post_link('%link','次の記事 <i class="fa fa-chevron-right" aria-hidden="true"></i>',TRUE); //次の記事がある場合にリンクを表示 ?>
<p class="pager_title">（<?php echo $next_title; ?>）</p>
<?php else: ?> // レイアウト崩れ防止のための半角スペース
<?php endif; ?>
</div>
<div style="clear:both;"></div>
</div>ショートコード化
多くのサイトでは、テーマファイルをカスタマイズしてこの機能を実装されているようですが、私はできるだけテーマファイルをカスタマイズしたくないので、ショートコード化してウィジェットに呼び出すことで全ての投稿ページに出力するようにしました。
有り難いことに、LION BLOG（ライオンブログ）は現在のところ頻繁に更新してくださっているので、テーマを更新したときに影響が出る可能性を減らしたいからです。
PHPを外部ファイルに記載
ショートコードをいくつか作成していくと、functions.phpに多くのコードを記入することになってしまい、私のような初心者がコードを触ることで、トラブったときの対処に困ることになるので、PHPを外部ファイルにすることでトラブル箇所をわかりやすくするために外部ファイルにしています。
テキストエディタに先ほどのPHPコードを貼りつけて、名前を仮に「pager.php」として保存します。
続けて、FTPで子テーマフォルダ内にアップロードしておきます。
functions.phpの編集
先ほどの「pager.php」を呼び出してショートコードを作成するために、functions.phpに次のコードを記載します。
/*ページャー追加*/
function paste_pager(){
get_template_part('pager'); // または require_once('pager.php');
return ob_get_clean();
}
add_shortcode('paste_pager', 'paste_pager');これで、ショートコードとして呼び出すことができるようになります。
そのまま貼りつけて使用する場合は、自己責任でお願いします。