サイト内の昔の記事にリンクを簡単にかつカッコよくアイキャッチ付きで表示するショートコード

スポンサー

内部リンクをショートコードで簡単にカッコよく表示

投稿作成時に、過去の自分の記事にリンクをはることってよくあると思うんだけど・・・
今までは、文字だけのリンクでした。
例：続、androidスマホにiCloudみたいな機能を。フォトコレクションとau Cloud（auスマートパス）

最近ではtwitterやFacebookの外部にリンクをはるコードってのがあるのを知ってからはそのコードを使ってた。

ブログ更新！: 続、androidスマホにiCloudみたいな機能を。フォトコレクションとau Cloud（auスマートパス） http://t.co/KfbcF9kUVz 以前、androidスマホにもiPhoneのiCloudみたいな機能があればいいのにな～と思って

— nekomoriya (@nekomoriya) October 12, 2013

facebookの埋め込みだとこんな感じ。

だけど、Facebookは例によって横幅固定だし、いちいちコードをとってくるのが大変ですよね～
なので、連休返上（予定もないけど）で、設定してみました。

エラーと挫折と解決への道程

で、なんか良い手はないものかとさまよっていたら、おなじみのゆめぴょんさんところで、そのものズバリを見つけた↓

エラーと挫折ひとつめ

もう！まるっとコピペッ！・・・

がーーーん！エラー(　▽|||)サー 何度試みてもエラーになるの。。。

諦めて、またまたウロウロしてたら以下の記事を発見！

エラーと挫折ふたつめ

コピペッ！（懲りない(／▽＼)
成功～♪が、しかしサムネイルのみの表示で抜粋が表示されない。
//がコメントアウトだからと外してみるも、表示されない（後でわかったことだけど;（セミコロン）の位置が違ってた模様）。

エラーと挫折みっつめ（実はこれが暗闇への入り口でした）

そしてたどり着いた上記の ぷらすぶろぐさんの記事の元記事らしいリンク先↓のこちら。

function add_other_post($params = array()) {
	extract(shortcode_atts(array(
		'slug' => ''
	), $params));
	$html = '';
	if ($slug == '') return $html;

	$queries = new WP_Query("pagename=$slug");
	if (!$queries->have_posts()) {
		$queries = new WP_Query("name=$slug");
	}
	// こっからループっぽい
	while ($queries->have_posts()) {
		$queries->the_post();

		// 生成されるHTML。自由に作っちゃえばいいじゃない
		$link = '<a href="' . get_permalink() . '">';
		$html .=
			'<h2>' . $link . the_title('','',false) . "</a></h2>\n" .
			(has_post_thumbnail() ?
				$link . get_the_post_thumbnail() . '</a>' : ''
			) .
			get_the_excerpt();
	}
	return $html;
}
add_shortcode('otherpost', 'add_other_post');

おー！ぶらぼー！！
見事、表示できました～♪

Crayon Syntax Highlighterが表示できない不具合発生

しかし！ここで重大な不具合に遭遇・・・
上記のコードではコードを綺麗に表示するプラグイン Crayon Syntax Highlighter でのコードが表示できなくなるという症状が出て、丸一日悩みました！

なんと！

wp_reset_postdata();

コレ↑が、抜けてました！！(///（ｴ）///) ｶｰｯ 

コードをちょっとカスタマイズslug⇒idとか

が、スラッグで呼び出すのは実用的じゃない気がして、やはり ぷらすぶろぐさんとこのみたいに投稿IDで呼び出したい。

/*過去記事をアイキャッチ付きで表示するショートコード*/
function add_other_post($params = array()) {
	extract(shortcode_atts(array(
		'id' => ''
	), $params));
	$html = '';
	if ($id == '') return $html;

	$queries = new WP_Query("pagename=$id");
	if (!$queries->have_posts()) {
		$queries = new WP_Query("p=$id");
	}

	while ($queries->have_posts()) {
		$queries->the_post();

		$link = '<a href="' . get_permalink() . '">';
		$html .=
			'<div class="old-link"><h5>' . $link . the_title('','',false) . "</a></h5>\n" .
			(has_post_thumbnail() ?
				$link . get_the_post_thumbnail() . '</a>' : ''
			) .
			'<p>'.mb_substr(strip_tags( get_the_content()), 0, 80).'</p>
<div class="sns">
<div class="sns_hatebu"><a href="http://b.hatena.ne.jp/entry/' . get_permalink() .'/" class="hatena-bookmark-button" data-hatena-bookmark-title="' . the_title('','',false) . '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
</div>
<div class="sns_tw"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-via="yume_pyon" data-url="' . get_permalink() .'/" data-text="' . the_title('','',false) . '">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="sns_pocket"><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="' . get_permalink() .'/" data-pocket-count="horizontal" data-pocket-align="left" >Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</div>
</div>
</div>'; 
	}
//コレ↓が抜けてた～
wp_reset_postdata();
	return $html;
}
add_shortcode('otherpost', 'add_other_post');

ポイントは、4か所の”slug”を”id”に変更。
10行目の

		$queries = new WP_Query("name=$slug");

を、

		$queries = new WP_Query("p=$id");

に変更すること。

19行目でdivで囲み、クラスを付与してます（CSSでの装飾をしやすくするため）。
また、h2をh5に変更してます。

			'<h2>' . $link . the_title('','',false) . "</a></h2>\n" .

を、

			'<div class="old-link"><h5>' . $link . the_title('','',false) . "</a></h5>\n" .

としました。

抜粋表示の部分↓

			get_the_excerpt();

を、80文字表示するようにしてPタグで囲みました（CSSでの装飾をしやすくするため）。

そして、 ゆめぴょんさんとこみたいに、ソーシャルボタンを付けてみましたぞ！
我ながらあっぱれ！

 

CSSは以下が参考になればお使いくださいませ。

.old-link{
	background:url(img/old-link_bg.jpg);
	width:95%;
	border:1px dotted #ddd;
	padding:2.5%;
	margin:0 auto;;
	}
.old-link h5{
	margin:0;
	padding: 0px 0px 0px 30px !important;
	font-size: 16px !important;
	line-height: 18px !important;
	background:url(img/h4_tori.png) no-repeat;
	}
#content .old-link img{
	width:30% !important;
	height:auto !important;
	float:left;
	margin:0 10px 0 0 !important;
	border:1px dotted #ddd;
	}
.old-link p{
	margin:0px;
	}
.old-link a.continued{
	display:none;
	}
.old link .sns{
	width:55%;
	height:20px;
	margin:10px 0 0 30%;
	}
.old-link .sns div{
	display:inline;
	}
.twitter-share-button {
	width:110px !important;
	}
.sns_pocket{
	vertical-align:-2px;
	}
.old-link iframe {
	display: inherit !important;
	max-width: none !important;
	margin: 0 0 0 0 !important;
	}

投稿画面に[otherpost id=投稿ID]で呼び出せますよ！

後記

やったー！と思ってプレビューして、 Crayon Syntax Highlighter がショートコードの状態で表示された時は、顎が落ちるんじゃないかと思うぐらい驚きました、、、

ほんと、たったこれだけで・・・て思うけど、「されど、これだけ」ってこと。

奥が深いようで、ほんとは単純。

落ち着いて、よーく考えて、よーく目を凝らしたら見えてくる、それを今回は学びました。

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。