WordPressで記事ごとに「前の記事」「次の記事」を表示する、賢威カスタマイズバージョン!
この記事は約10分で読めます。
WordPressで記事を投稿するとき、記事下のスペースが有効活用する方法見つけました。
メルマガ、関連記事、ブログランキングなどなど、いくつか使い方はありますが、
今回はサムネイル付きで「前の記事」「次の記事」を表示する方法です。
参考にしたサイトはこちら、ためになります。
【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】 | 今村だけがよくわかるブログ
Topics
賢威で「前の記事」「次の記事」を表示する
まずは、元となるソースコードを追加します。
「外観 > テーマ編集」から「functions.php」を開き、以下のコードを1番下に追加します。
//--------------------------------------------------------------------------- // 前の記事、次の記事を取得 //--------------------------------------------------------------------------- function pn_post() { $pn = ""; $pn_img = ""; $prevpost = get_adjacent_post(true, '', true); $nextpost = get_adjacent_post(true, '', false); if($prevpost or $nextpost) { $pn .= "<div class=\"cat_paging\">"; if ($prevpost) { $pn_img = get_the_post_thumbnail($prevpost->ID, array(120,120)); if (!$pn_img) { $pn_img = "<img width=\"120\" height=\"120\" src=\"noimage.jpg\" class=\"attachment-120x120 wp-post-image\" alt=\"noimage\" />"; } $pn .= "<dl class=\"alignleft\"><dt>前の記事(Previous)</dt><dd><a href=" . get_permalink($prevpost->ID) . " /><div class=\"thumb al-c\">" . $pn_img . "</div><span class=\"title\">" . get_the_title($prevpost->ID) . "</span></a></d d></dl>"; } else { $pn .= "<dl class=\"alignleft\"><dt>姉妹サイト(WebLink)</dt><dd><a href=\"#\" target=\"_blank\" /><div class=\"thumb al-c\"><img width=\"120\" height=\"120\" src=\"xxxx.jpg\" class=\"attachment-120x120 wp-post-image\" alt=\"アフィリエイト通信\" /></div><span class=\"title\">アフィリエイトで稼ぐ方法!アフィリエイト通信</span></a></dd></dl>"; } if ($nextpost) { $pn_img = get_the_post_thumbnail($nextpost->ID, array(120,120)); if (!$pn_img) { $pn_img = "<img width=\"120\" height=\"120\" src=\"noimage.jpg\" class=\"attachment-120x120 wp-post-image\" alt=\"noimage\" />"; } $pn .= "<dl class=\"alignright\"><dt>次の記事(Next)</dt><dd><a href=" . get_permalink($nextpost->ID) . " /><div class=\"thumb al-c\">" . $pn_img . "</div><span class=\"title\">" . get_the_title($nextpost->ID) . "</span></a></dd></dl>"; } else { $pn .= "<dl class=\"alignright\"><dt>姉妹サイト(WebLink)</dt><dd><a href=\"#\" target=\"_blank\" /><div class=\"thumb al-c\"><img width=\"120\" height=\"120\" src=\"xxx.jpg\" class=\"attachment-120x120 wp-post-image\" alt=\"アフィリエイト通信\" /></div><span class=\"title\">アフィリエイトで稼ぐ方法!アフィリエイト通信</span></a></dd></dl>"; } echo $pn."</div>"; } }
次に、追加した関数を単一記事から呼び出します。
「外観 > テーマ編集」から「single.php」を開きます。
賢威の場合は「<!–comment–>」で検索し、その上に以下のコードを追加します。
<div class="contents"> <?php pn_post(); ?> </div>
最後に、CSSを追加します。
「外観 > テーマ編集」から「design.css」を開き、以下のスタイルを1番下に追加します。
.cat_paging{ width: 100%; margin-bottom: 1.0em; float: left; border: 2px solid #fff; clear: both; } .cat_paging .alignleft{ width: 40%; float: left; margin-left: 1.5em; min-height: 10.0em; } .cat_paging .alignright{ width: 40%; float: right; margin-right: 1.5em; min-height: 10.0em; } .cat_paging .alignleft dt, .cat_paging .alignright dt{ padding: 0px 0px 5px; border-bottom: 1px solid #bbb; margin: 0px 0px 1.0em; } .cat_paging dd { margin: 0; } .cat_paging .alignleft .thumb, .cat_paging .alignright .thumb{ margin-bottom: 0.5em; } .cat_paging .alignleft .title, .cat_paging .alignright .title{ display: block; }
今村さんのブログから、カスタマイズしているので説明します。
サムネイルがない場合は「noimage」を表示
サムネイル(アイキャッチ)がない投稿もあります。
その場合、記事タイトルだけの表示になってしまうのでサムネイル(アイキャッチ)に「noimage」を表示します。
サムネイル(アイキャッチ)がなくても画像(noimageですが)が表示されます。
以下の2箇所をあなた用に変更してください。(19行目と30行目の2箇所)
$pn_img = "<img width=\"120\" height=\"120\" src=\"noimage.jpg\" class=\"attachment-120x120 wp-post-image\" alt=\"noimage\" />";
「src=\”noimage.jpg\”」を、自分のブログにアップロードした画像URLに変更します。
例えば、当ブログだと「src=\”http://www.keni-customize.net/wp-content/uploads/2013/11/noimage.jpg\”」にしています。
「前の記事」「次の記事」がない場合は、姉妹サイトへリンク
「前の記事」「次の記事」がない時に、今村さん流ではTOPページへリンクしていましたが、
当サイトでは、私の別ブログを姉妹サイトとしてリンクするようにしました。
これも修正箇所は2箇所です。(24行目と35行目の2箇所)
$pn .= "<dl class=\"alignleft\"><dt>姉妹サイト(WebLink)</dt><dd><a href=\"#\" target=\"_blank\" /><div class=\"thumb al-c\"><img width=\"120\" height=\"120\" src=\"xxxx.jpg\" class=\"attachment-120x120 wp-post-image\" alt=\"アフィリエイト通信\" /></div><span class=\"title\">アフィリエイトで稼ぐ方法!アフィリエイト通信</span></a></dd></dl>";
「<a href=\”#\” target=\”_blank\” />」の「#」をリンクを貼りたいURLに変更します。
「xxx.jpg」を自分のブログにアップロードした画像URLに変更します。
当ブログだと「http://www.keni-customize.net/wp-content/uploads/2013/11/afi-tsushin.jpg」にしています。
これは、被リンクを稼ぐという意味ではなく、単純に「TOPへ戻る」にした場合に
レスポンシブルデザインでうまく表示できなかったので、こっちに変更しました…
もっとうまい使い方があると思いますので、また記事にします。
画像サイズなど細かな点はお好みで
この「前の記事・次の記事」は、使い方次第でPVを上げる手助けをしてくれるので、
いろいろと使い勝手がいいと思います、今村さんすげー!!
また「サムネイルサイズが120×120」や、「サムネイルとタイトルを上下表示(レスポンシブルデザイン対応)」は、
好みで色々と変更できる部分ですので、PHPやCSSが得意な人は自己流に改造してください。
[…] WordPressで記事ごとに「前の記事」「次の記事」を表示する、賢威カスタマイズバージョン! | 賢威カスタマイズ研究所 […]