ほにゃららでお馴染みでお馴染みの次男さんのところの記事（Feedlyがイマイチ見づらいと思って拡張を探してみたらええの見つけた、Feedly Reader）からリンク頂いた時に、リンクの表示の仕方が良い感じで悔しかったのでパクリついでにショートコードにしてみたよ。

こんな感じです

プラグインでもあるのかなぁと実装方法を探してみたところ、よく見かけたのは WP-AddQuicktag を使ってHTMLタグを出力する方法。 それでもいいけども、サムネイル画像を生成する部分は外部のサービスを利用するため、もしもそのサービスが終了した時は全ての記事を書き換えるというとてつもなく面倒なことになります。 ショートコードで実装すれば、もしもの時も最低限の変更で済みますのでね。 記事内で外部サービスを呼び出すのはちょっとリスクが高いですハイ。

コード

こんな感じで実装しました。

function shortcode_custom_bookmark($opt, $content = null) {
	/* デフォルトの設定 */
	$width = 150; // サムネイルの横幅
	$class = 'bookmark cf'; // 全体を覆うclass
	$text = 'リンク'; // アンカーテキストがなかった時のテキスト
	/* デフォルトの設定ここまで */
	if(!empty($opt['url']) && preg_match('/^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)$/', $opt['url'])) {
		if(!empty($opt['width']) && preg_match('/^[0-9]+$/', $opt['width'])) $width = $opt['width'];
		$height = round($width * 0.75);
		if(!empty($content)) $text = esc_attr($content);
		if(!empty($opt['class']) && preg_match('/^[a-zA-Z0-9 -_]+$/', $opt['class'])) $class .= ' '.$opt['class'];
		
		$str = '<article class="'.$class.'"><figure><a href="'.$opt['url'].'" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/'.rawurlencode($opt['url']).'?w='.$width.'" alt="'.$text.'" width="'.$width.'" height="'.$height.'" /></a></figure><div class="bookmark_container"><header><h3><a href="'.$opt['url'].'" target="_blank">'.$text.'</a></h3> <a href="http://b.hatena.ne.jp/entry/'.$opt['url'].'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'.$opt['url'].'" alt="はてブ数" /></a></header>';
		if(!empty($opt['description'])) $str .= '<p>'.esc_attr($opt['description']).'</p>';
		$str .= '</div></article>';
		return $str;
	}
}
add_shortcode('bm', 'shortcode_custom_bookmark');

※2014/4/20 ソース修正 PHPの関数(htmlspecialchar)を使用していたところを、より便利なWordPressの関数(esc_attr)に修正しました。

↑のコードをfunctions.phpに追記すれば、記事内で [bm][/bm] のショートコードが使えるようになります。

# ショートコードを書くと


# こうなる
<article class="bookmark cf">
	<figure>
		<a href="{URL}" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/{URL}?w=150" alt="{アンカーテキスト}" width="150" height="113"></a>
	</figure>
	<div class="bookmark_container">
		<header>
			<h3><a href="{URL}" target="_blank">{アンカーテキスト}</a></h3>
			<a href="http://b.hatena.ne.jp/entry/{URL}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/{URL}" alt="はてブ数" style="width: auto; height: auto; opacity: 1;"></a>
		</header>
		<p>{TEXT}</p>
	</div>
</article>

サンプルコードでサムネイル画像生成に使っているサービスは画像の縦横比が3:4の固定で高さの指定ができなかったので、横幅の指定にあわせて自動で算出するようにしています。 articleやfigureなどHTML5のタグを使っているので、そのあたりは適切変更してくださいな。 他にもいくつかのオプションにも対応しています。

# オプションは
・url ・・・ サイトのURL
・width ・・・ サムネイルの横幅
・description ・・・ サイトの概要文（指定されていないとアンカーテキストと同じ）
・class ・・・ 全体を包むclassに追加

# オプションを指定すると


# こうなる
<article class="bookmark cf {CLASS}">
	<figure>
		<a href="{URL}" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/{URL}?w={300}" alt="{アンカーテキスト}" width="{300}" height="225"></a>
	</figure>
	<div class="bookmark_container">
		<header>
			<h3><a href="{URL}" target="_blank">{アンカーテキスト}</a></h3>
			<a href="http://b.hatena.ne.jp/entry/{URL}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/{URL}" alt="はてブ数" style="width: auto; height: auto; opacity: 1;"></a>
		</header>
		<p>{TEXT}</p>
	</div>
</article>

サムネイル画像生成APIはWordPressの非公式APIとやらを使っています。 非公式というのは、プラグインを実装するのに開始したサービスのようで、「まぁいつサービスを停止するかも知れんし、それでもいいなら使ってもいいよ」と回答を得られたとの記事があったので、使わせていただきます。

ブックマークレットができました！

@incrementlogさんがこのショートコードのブックマークレットをつくってくださいました！ このショートコードでリンクしたいページをブラウザで開いて、ブックマークレットをポチっとすると、サイトのタイトルや概要が記述されたショートコードが生成されます。上のリンクもブックマークレットで作りました。これは捗る！！めっちゃ便利！！

おまけ

CSSも置いときます。参考にどうぞ

.bookmark {
	margin: 1em;
	padding: 2.1em 1em 2.1em;
}
.bookmark img {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}
.bookmark figure {
	margin: 0;
	padding: 0;
	float: left;
	display: inline;
	border: none;
	background: none;
}
.bookmark figure img {
	float: left;
	display: inline;
	border: 2px solid #c72439;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}
.bookmark_container {
	padding-left: 170px;
}
.bookmark header {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
.bookmark h3 {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	display: inline;
	font-weight: normal;
}
.bookmark p {
	margin: 0 !important;
	padding: 5px 0 0 !important;
	width: auto;
	clear: none;
	font-size: 0.8em;
	color: #565656;
}