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

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

この投稿は2013/10/24に一部訂正しております。詳しくは、また後程投稿します。 投稿しました↓

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

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

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


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での装飾をしやすくするため)。

2013/10/24この抜粋表示部分の「get_the_excerpt」と干渉していた模様。以下に書き換えました。

			'<p>'.mb_substr(strip_tags( get_the_content()), 0, 80).'</p>

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

 

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 がショートコードの状態で表示された時は、顎が落ちるんじゃないかと思うぐらい驚きました、、、

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

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

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

One comment Add yours

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA