XeoryBaseに「前の記事」「次の記事」リンクを実装する方法

XeoryBaseに「前の記事」「次の記事」リンクを実装する方法

どうもタスです。

ブログ記事を書くことはとても大事だと思うのですが、外観も大事ですよね。

見た目がカッコ良かったり、可愛いと思えるような、自分好みであればブログライフはさらに充実するはずです。

そこで、今回はデザインのカスタマイズをします。

個別の記事ページ下部に「前の記事」「次の記事」リンクを実装する方法です。

 

実装するにあたり参考にしたサイト

実装と言っても、一から自分でコーディングしたわけではなく、以下のサイトを参考にさせて頂きました。

とっても丁寧に解説されていて、見るだけで勉強になるサイトです。

 

その中で、「Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装」という記事があるので、この内容をもとに僕のブログに適用してみました。

この記事をもとに実装するので、まずは一読してくださいね。

 

記事どおりにやってみたけど失敗した

Webクリエイターボックスさんに掲載されているとおり行ったのですが、ちょっと失敗してしまいました。

もしかすると、情報が古いままなのかもしれません。

とはいえ、有益な情報には変わりないので、Webクリエイターボックスさんにはとてもとても感謝しております!

では、まずはWebクリエイターボックスさんで紹介されている内容をお話しします。

 

style.cssへの適用

まずは、CSSを「style.css」に全適用します。

  • モバイル用リンク作成
  • レスポンシブ対応
  • サムネイル画像入り

※矢印は付けませんでした。今度、SVGに挑戦します。

 

single.phpへの適用

次に、個別の記事ページ下部に「前の記事」「次の記事」リンクを反映します。

僕は記事外に表示したかったので、『</article>』直下に挿入しました(全くカスタマイズしていない状態であれば、95行目にあります)。

 

functions.phpへの適用

次に、テーマ関数ファイルに以下の関数を追加します。

追加位置はどこでも構いません。

 

完成したので画面表示で確認する

以下の画像は、「Windows10で外付けHDDを停止させない3つの方法」の記事のページ下部の状態です。

XeoryBaseに「前の記事」「次の記事」リンクを実装する方法

確認したところ、以下の内容を修正するべきと判断しました。

  1. 両リンクとも「前のページ」になっている。
  2. 前のページと次のページは、同一カテゴリ内の記事に対してリンクが張られている。

簡単に終わるかと思いきや、人生早々上手くは行きません。

 

修正して正常に表示されたことを確認

ということで、一つずつ修正を行いました。

プログラム経験はあるものの、PHPは触ったことないし、CSSも経験に乏しい状態なので、苦戦しましたね…

でも、頑張ったけどね、うん、頑張った。

 

1.「前のページ」表記を「次のページ」に修正

これは簡単ですね。

 

2.前のページと次のページをカテゴリ関係なしに移動できるリンクに修正する

これが結構大変でした。

 

結論としては、single.phpについて以下の修正が必要です。

  1. get_adjacent_post関数に渡すパラメータを修正
  2. previous_post_link関数に渡すパラメータを修正
  3. next_post_link関数に渡すパラメータを修正

 

参考にしたサイトは、

get_adjacent_post関数に渡すパラメータを修正

 

previous_post_link関数に渡すパラメータを修正

になります。

 

まずは、get_adjacent_post関数に渡すパラメータを修正します。

最初に指定するパラメータを「true」から「false」に変更します。

そうすることで、カテゴリを無視して最新の情報を取得するようになります。

 

次に、previous_post_link関数とnext_post_link関数に渡すパラメータを修正します。

こちらも同様に、最後の指定するパラメータを「true」から「false」に変更することで、カテゴリを無視して最新の情報を取得するようになります。

 

完成したので画面表示で確認する

以下の画像は、先程と同じく「Windows10で外付けHDDを停止させない3つの方法」の記事のページ下部の状態です。

XeoryBaseに「前の記事」「次の記事」リンクを実装する方法

できた!

完成ーーー!

ということで、パラメータを修正するだけで正しい表示なりました。

 

まとめ

今回は、「XeoryBaseに「前の記事」「次の記事」を実装する方法」を紹介しました。

回遊率の向上が目的ではあるけど、冒頭でも言ったとおり、自分のサイトのデザインが変われば、気分良いですよね!

なので、僕はたまにデザインのカスタマイズに注力してしまいます。

で、また気持ち良くなって記事を書くと。

正のスパイラルはどんどん生んで行きたいですね。

 

その他のXeoryBaseカスタマイズ記事

他にも紹介しているので、良ければ見て下さい!

 

スポンサーリンク


Pocket


SNSでもご購読できます。

コメントを残す

*

タスlife