wordpress 前の記事 次の記事

WordPressで記事を投稿するとき、記事下のスペースが有効活用する方法見つけました。
メルマガ、関連記事、ブログランキングなどなど、いくつか使い方はありますが、
今回はサムネイル付きで「前の記事」「次の記事」を表示する方法です。

参考にしたサイトはこちら、ためになります。
【WordPressで「前の記事」「次の記事」にサムネイルを付けたり、記事が存在しない時の空欄を有効活用しよう】 | 今村だけがよくわかるブログ

賢威で「前の記事」「次の記事」を表示する

まずは、元となるソースコードを追加します。
「外観 > テーマ編集」から「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が得意な人は自己流に改造してください。