[WordPress]関連記事をショートコードで呼び出すカスタマイズ

WordPress 関連記事 ショートコード
SPONSORLINK

当サイトの記事ページにショートコードで関連記事を表示できるようにしてみました!その備忘録と参考にさせて頂いたサイト様をご紹介します。

記事内に関連記事を表示

当サイトのように使い方などを紹介する場合、どうしても1記事で紹介しきれない場合があります。そんな時はサイト内の関連記事をリンクさせたりするのですが、ただのテキストリンクだとちょっと味気ない…。できればこんなことをしたいと思いました。

  • 記事IDで関連記事を呼び出したい
  • アイキャッチ画像をつけたい
  • 日付も呼び出したい
  • 常に同じコードとスタイルを適用させたい

こんな感じの要件を満たすためにどうしたらいいのか調べていると、どうやらショートコードを使うのが一番良さそうだ。でもさすがに1からショートコードをつくる知識も技術もない…というわけで、上記のような悩みを解決してくれる記事がないか探してみました!すると下記の記事を発見。

これは自分の要件にぴったりということでサイトに実装させていただきました!

functions.phpにショートコードを使えるようにするコードを記載

失礼ながら今回はほとんど上記サイト様のコードを大部分使用させていただきました。

function articleFunc($atts) {
	extract(shortcode_atts(array(
		'mode' => null,'type' => null,'id' => null,
		'y' => null,'m' => null,'d' => null,
		'numberposts' => 5,'offset' => null,'order' => 'DESC','orderby' => 'post_date','meta_key' => null,
		'include' => null,'exclude' => null,
		'head' => null,'tail' => null,
	),$atts));

	if($mode != null) $mode = '&'.$mode.'='.$id;
	$post = get_posts('post_status=publish&numberposts='.$numberposts.'&offset='.$offset.'&order='.$order.'&orderby='.$orderby.'&include='.$include.'&year='.$y.'&monthnum='.$m.'&day='.$d.'&exclude='.get_the_ID().','.$exclude.'&meta_key='.$meta_key.$mode);

	foreach ($post as $item){
		$im = wp_get_attachment_image_src(get_post_thumbnail_id($item->ID),'none',true);
		$date = date('Y.m.d',strtotime(get_post($item->ID)->post_date));
		$update = date('Y.m.d',strtotime(get_post($item->ID)->post_modified));
		$echo .= $type=='custom' ? '<a href="'.get_permalink($item->ID).'">'.$item->post_title.'</a>'
		: $head.'<a href="'.get_permalink($item->ID).'">'.$item->post_title.'</a>'.$tail;
	}

	return $echo;
}
add_shortcode('article','articleFunc');

17行目でサイトに出力させるコードが書かれています。この部分を自分のサイトにあうようにちょこっとカスタム。

$echo .= $type=='custom' ? '<div class="post-list related_article clear"><a href="'.get_permalink($item->ID).'" class="clear"><figure class="eyecatch"><img src="'.$im[0].'" /></figure><div class="meta inbox"><p class="ttl">'.$item->post_title.'</p><span class="date">'.$date.'</span></div></a></div>'

ここまでできたら記事内でショートコードを書いて関連記事を呼び出してみましょう。

関連記事を呼び出すショートコード

関連記事を呼び出すには下記のショートコードを使用します。

[kanren postid="記事ID" type="custom"]

include=”●”  この●の部分に記事IDを入力します。

  • ちなみにパーマリンク設定を変えていて記事IDがわからないという場合は、管理画面記事一覧ページのリンクさせたい記事にマウスオーバーすればブラウザの左下にURLが表示され、…post=●…と書かれている部分の数字がIDとなります。(Chrome)

ここまで完了したら確認してみます。すると下の写真のように、アイキャッチ画像・タイトル・投稿日が表示されました!やったー!

関連記事ノーマル

あとはCSSを好きなように調整して完成です。

最終的にはこんな感じ!

関連記事ノーマル2

ちなみにこのサイトで使用しているCSSは下記です。一応SAMPLEとして掲載。

.post-list.related_article{
	margin:1em 0;
}
.post-list.related_article .ttl{
	margin: 0 0 0.5em;
	font-size:1em!important;
	font-weight: bold;
}
.post-list.related_article .ttl:before{
	content:'関連記事';
	font-size:0.8em;
	font-weight:bold;
	color:#fff;
	background:#111;
	width:5em;
	display:inline-block;
	padding:0.1em;
	position:relative;
	top:-2px;
	text-align:center;
	margin-right:0.5em;
	border-radius:0.5em;
}
.post-list.related_article .date{
	font-size:0.8em!important;
}
.post-list.related_article .eyecatch{
	width: 22%;
	float:left;
	margin-right:3%;
}
.post-list.related_article a{
	color:#333;
	background:#ddd;
	display:block;
	padding:1em;
}

.post-list.related_article a:hover{
	color:#666;
}

このCSSは当サイトに合わせたものになりますので、コピーされる際はご注意下さい。

複数の関連記事を掲載したい場合

ここまでひとつだけの関連記事表示でしたが、複数掲載したい場合、ショートコードをたくさん書かないといけないのかというと、そんなことはありません。参考サイト様で確認してみると、記事IDをカンマ(,)区切りで記載してあげれば連続して複数の関連記事を表示できます。

[kanren postid="3283,3288" type="custom"]
関連記事複数

上記のように書いてあげると、複数連続して表示させることが可能!なんて便利なんでしょう!

まとめ

今回は関連記事をショートコードで呼び出すためのカスタマイズを行いました。もちろん、出力されるコードを記事内に直接書いてもいいのですが、コードを間違ったり、タイトルが万が一変わってしまった場合など変更するのが面倒になります。その点このカスタマイズなら後々のメンテンナンスも楽なので今回実装させて頂きました。

あとは表示速度にどのような影響が出るかですが、今のところさほど影響はなかったので、これが今後増えていったときにどうなるかというのは新調に見ておきたいと思います。

このような素晴らしいコードを紹介してくれている参考サイト様に感謝です。

  • ここで紹介したカスタマイズは環境により左右されますので、実装は自己責任でお願いします。

WordPress 関連記事 ショートコード

新作!究極のモバイルファースト「ストーク」


大人気ハミングバードWordPressテーマの続編登場!ストークはブログマーケッターJUNICHIさんとのコラボによりつくられた特別なテーマです。

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

ABOUTこの記事をかいた人

香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。