
どうもタスです。
ブログ記事を書くことはとても大事だと思うのですが、外観も大事ですよね。
見た目がカッコ良かったり、可愛いと思えるような、自分好みであればブログライフはさらに充実するはずです。
そこで、今回はデザインのカスタマイズをします。
個別の記事ページ下部に「前の記事」「次の記事」リンクを実装する方法です。
この記事の目次
実装するにあたり参考にしたサイト
実装と言っても、一から自分でコーディングしたわけではなく、以下のサイトを参考にさせて頂きました。
とっても丁寧に解説されていて、見るだけで勉強になるサイトです。
その中で、「Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装」という記事があるので、この内容をもとに僕のブログに適用してみました。
この記事をもとに実装するので、まずは一読してくださいね。
記事どおりにやってみたけど失敗した
Webクリエイターボックスさんに掲載されているとおり行ったのですが、ちょっと失敗してしまいました。
もしかすると、情報が古いままなのかもしれません。
とはいえ、有益な情報には変わりないので、Webクリエイターボックスさんにはとてもとても感謝しております!
では、まずはWebクリエイターボックスさんで紹介されている内容をお話しします。
style.cssへの適用
まずは、CSSを「style.css」に全適用します。
- モバイル用リンク作成
- レスポンシブ対応
- サムネイル画像入り
※矢印は付けませんでした。今度、SVGに挑戦します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━ -- ┃2018-06-15 -- ┃ Flexboxを使ってレスポンシブ対応の「前の記事」 -- ┃ 「次の記事」リンクを実装 -- ┗━━━━━━━━━━━━━━━━━━━━━━━━ ---------- start*/ /* モバイル用リンクを作成 */ .prev-next-link a { border-bottom: 1px #ddd solid; display: block; text-decoration: none; padding: 14px 40px; color: #0bd; } .prev-next-link a:hover { background-color: #f6f6f6; } .prev-next-link a:first-child { border-top: 1px #ddd solid; } .prev-next-label { font-size: .825rem; color: #000; margin-bottom: 10px; } /* レスポンシブ対応(大きい画面用) */ @media ( min-width: 600px) { .prev-next-link { display: flex; } .prev-next-link a { flex: 1; } .prev-next-link a, .prev-next-link a:first-child { border: none; } .next-link { text-align: right; } } /* サムネイル */ .thumb-wrap { display: flex; } .thumb-wrap p { margin: 0 0 0 16px; } .thumb-wrap img { width: 80px; height: 100%; } /*-------- end*/ |
single.phpへの適用
次に、個別の記事ページ下部に「前の記事」「次の記事」リンクを反映します。
僕は記事外に表示したかったので、『</article>』直下に挿入しました(全くカスタマイズしていない状態であれば、95行目にあります)。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $prevPost = get_adjacent_post(true, '', true); // 前の記事を取得 $nextPost = get_adjacent_post(true, '', false); // 次の記事を取得 $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(80,80) ); // 前の記事のサムネイル画像を取得 $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(80,80) ); // 次の記事のサムネイル画像を取得 if( $prevPost || $nextPost ){ // 前の記事か次の記事のどちらかが存在しているなら echo '<div class="prev-next-link">'; previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true ); next_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', true ); echo '</div>'; } ?> |
functions.phpへの適用
次に、テーマ関数ファイルに以下の関数を追加します。
追加位置はどこでも構いません。
1 2 3 4 5 6 7 8 9 10 11 |
add_filter('next_post_link', 'next_post_link_attributes'); add_filter('previous_post_link', 'prev_post_link_attributes'); function next_post_link_attributes($output) { $injection = 'class="next-link"'; return str_replace('<a href=', '<a '.$injection.' href=', $output); } function prev_post_link_attributes($output) { $injection = 'class="prev-link"'; return str_replace('<a href=', '<a '.$injection.' href=', $output); } |
完成したので画面表示で確認する
以下の画像は、「Windows10で外付けHDDを停止させない3つの方法」の記事のページ下部の状態です。
確認したところ、以下の内容を修正するべきと判断しました。
- 両リンクとも「前のページ」になっている。
- 前のページと次のページは、同一カテゴリ内の記事に対してリンクが張られている。
簡単に終わるかと思いきや、人生早々上手くは行きません。
修正して正常に表示されたことを確認
ということで、一つずつ修正を行いました。
プログラム経験はあるものの、PHPは触ったことないし、CSSも経験に乏しい状態なので、苦戦しましたね…
でも、頑張ったけどね、うん、頑張った。
1.「前のページ」表記を「次のページ」に修正
これは簡単ですね。
1 2 |
previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true ); next_post_link( '%link', '<p class="prev-next-label">次の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', true ); |
2.前のページと次のページをカテゴリ関係なしに移動できるリンクに修正する
これが結構大変でした。
結論としては、single.phpについて以下の修正が必要です。
- get_adjacent_post関数に渡すパラメータを修正
- previous_post_link関数に渡すパラメータを修正
- next_post_link関数に渡すパラメータを修正
参考にしたサイトは、
get_adjacent_post関数に渡すパラメータを修正
previous_post_link関数に渡すパラメータを修正
になります。
まずは、get_adjacent_post関数に渡すパラメータを修正します。
最初に指定するパラメータを「true」から「false」に変更します。
そうすることで、カテゴリを無視して最新の情報を取得するようになります。
1 2 |
get_adjacent_post(false, '', true); // 前の記事を取得 get_adjacent_post(false, '', false); // 次の記事を取得 |
次に、previous_post_link関数とnext_post_link関数に渡すパラメータを修正します。
こちらも同様に、最後の指定するパラメータを「true」から「false」に変更することで、カテゴリを無視して最新の情報を取得するようになります。
1 2 |
previous_post_link( '%link', '<p class="prev-next-label">前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', false ); next_post_link( '%link', '<p class="prev-next-label">次の記事</p><div class="thumb-wrap">'.$nextThumbnail.'<p>%title</p></div>', false ); |
完成したので画面表示で確認する
以下の画像は、先程と同じく「Windows10で外付けHDDを停止させない3つの方法」の記事のページ下部の状態です。
できた!
完成ーーー!
ということで、パラメータを修正するだけで正しい表示なりました。
まとめ
今回は、「XeoryBaseに「前の記事」「次の記事」を実装する方法」を紹介しました。
回遊率の向上が目的ではあるけど、冒頭でも言ったとおり、自分のサイトのデザインが変われば、気分良いですよね!
なので、僕はたまにデザインのカスタマイズに注力してしまいます。
で、また気持ち良くなって記事を書くと。
正のスパイラルはどんどん生んで行きたいですね。
その他のXeoryBaseカスタマイズ記事
他にも紹介しているので、良ければ見て下さい!
- XeoryBaseで「続きを読む」を自動的に付加する方法
- Broken Link Checkerでリンク切れをチェック
- 「XAMPP」を利用したWordPressのローカル環境構築 その1
- 「XAMPP」を利用したWordPressのローカル環境構築 その2
- 「XAMPP」を利用したWordPressのローカル環境構築 その3