WordPressで引用付きのリンクを表示させたい

Pocket

WordPressを使っているblogを見ると,「あぁ,このデザインいいなぁ」とか「この機能を使ってみたいなぁ」と思うことがあります.実はずっと前からやりたくて出来なかったことがあるんです.

それは「他のサイトを引用する際に画像のサムネイルとリンク先アドレスやタイトルなどを表示させる」というものです.

ということで,今回は「他のサイトからの引用をより見やすくする」というテーマでお送りします.

Ads

kwoutを使った引用

今まではkwoutで保存していたのですが,WordPressの中で完結すると速度の上でも向上するのと,デザイン的に自分のサイトの作りにあったものにしたいという点で他のサービスを探していました.

上の画像はkwoutを実際に使用した例です.kwoutはFirefoxやChromeのアプリがあるのでブラウザから簡単に作成できるので重宝しているのですが,表示する際にkwoutにある画像を取ってくる必要があるのと,作成したjpgを圧縮出来ないので速度の上でも不利ということがありました.

kwoutは便利なのですが,kwoutでは画像と指定アドレスへのリンクのみで表示されており,ここにタイトルなんかを入れたいなと思っていました.

Browser Shotsプラグインによるショートコード挿入

WordPressを使うようになり,「ショートコード」というものをおぼえました.そこで,WordPressのプラグインである「Browser Shots」をインストールして使ってみました.

プラグインをインストールすれば後は簡単.

browsershots

のように書くだけでサムネイル画像が表示されます.

最初はこれで満足してたんですが,次第に思った画像が表示されなかったりやタイトルを一緒に表示したいと思うようになってきました.

functions.phpを変更して利用するショートコード

もっと見やすくリンクを表示させたいなぁと思っていたところ,【HTML5対応】WordPressの記事でサムネイル画像つきリンクを表示させるショートコードを実装してみたりさんの記事を読みました.functions.phpにコードを追加するだけで使えるというすぐれものです.本当にありがとうございますm(__)m

詳しくはリンクをたどってもらうとして,まずはfunctions.phpに加えるコードを拝借しました.

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');

functions.phpに書いたらコードを次のように書きます.

quote_bm

アドレスとアンカーテキストを入力すれば完成です.更に,【WordPress】外部リンクをサムネイル付きで表示するショートコード用のブックマークレットを作成したよではこのショートコードを使うことができるブックマークレットを作成してくれました.

こうすると見たいページ→ブックマークレットからアドレスをコピー→はりつけるという作業で作ることができるようになります.便利!

ただし,functions.phpはテーマのアップデートに気をつけておきましょう.

コメントを残す

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