WordPressなどのブログには、ほとんどの場合、記事下に「前の記事」「次の記事」へ移動できるリンクが設置されています。
設置した方がSEO的にに有利だと言われていますし、時系列に記事を並べている時など、順番に記事を読んでいくことができるので、ユーザビリティの面から考えてもとても有効だと言われています。
ただ、ほとんどのテーマに設置されているリンクは、テキストと矢印だけのそっけないデザインになっているので、少しでもデザインを華やかにするために、サムネイル画像付きリンクにカスタマイズしてみました。
このブログがデモサイトになるので、僕が作ったリンクを見るにはこの記事の下を見てください。
目次
サンプルコード
それでは、サムネイルを表示させる方法紹介していきたいと思います
作るにあたって参考にしたのは以下のWordPressサポートフォーラムです。↓
参考サイト:Next & Previous Post Titles With Thumbnails
まず、表示させたい箇所へ以下のコードを貼り付けてください。とてもシンプルなコードですが、このコードを貼り付けるだけで、サムネイル画像付きの「前の記事」「次の記事」リンクをブログに表示させることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="prev-next-link clearfix"> <div class="prev-link"> <?php $prevPost = get_previous_post(true); //「前の記事」データを取得 $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(120,80) ); //「前の記事」データのサムネイル取得 previous_post_link( '%link',$prevThumbnail.'%title' ); //出力 ?> </div> <div class="next-link"> <?php $nextPost = get_next_post(true); //「次の記事」データを取得 $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(120,80) ); //「次の記事」データのサムネイル取得 next_post_link( '%link', '%title'.$nextThumbnail); //出力 ?> </div> </div> |
ほぼほぼサポートフォーラム書かれている通りのコードになりますが、後でCSSで装飾しやすいようにdivを追記しています。
書かれているコードの説明
前の記事、次の記事データを取得
まず書いてあるコードを見ていくと、以下のコードが書かれていると思います。
- $prevPost = get_previous_post(true);
- $nextPost = get_next_post(true);
上の段から説明すると「get_previous_post(true);」というタグがありますが、これは「前の記事」データを取得するという意味になります。そして変数「$prevPost」を使ってデータを格納しています。
下の段も同様で「get_next_post(true); 」で「次の記事」を取得し、変数「$nextPost」にデータを格納しています。
(ture)は、同じカテゴリーからという意味で、すべての記事からにしたければ(false)に変更すればOKです。
サムネイルデータ抽出
次に以下のコードで格納したデータからサムネイルデータを抽出していきます。
- $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(120,80) );
- $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(120,80) );
「get_the_post_thumbnail」というタグは、サムネイルを抽出するというタグで、このタグを使って先ほど格納した変数「$prevPost」から「前の記事」、「$nextPost」から「次の記事」のサムネイルだけを抽出し、変数に格納します。
(120,80)というのは、サムネイルのサイズになります。
「previous_post_link」「next_post_link」タグを使う
最後にサムネイルデータを格納した変数「$prevThumbnail」と「$nextThumbnail」を「previous_post_link」と「next_post_link」というタグを使ってブログに表示させます。
- previous_post_link( ‘%link’, ‘%title’.$nextThumbnail);
- next_post_link( ‘%link’, ‘%title’.$nextThumbnail);
()の中を説明すると「%link」は<a href=などのリンクという意味で、「%title」は記事のタイトルを表示します。この例を見ればタイトルの後ろにサムネイルを表示するということになります。
以上で簡単な説明は終わりますが、あとはCSSを使って装飾すれば良いだけなので、自分好みにカスタマイズしてみてください。