[WordPress]外部リンクをサムネイル付きで表示するショートコード用のブックマークレットを作成したよ

  • 更新日:
  • 公開日:

外部リンクサムネイル付きで表示するには「ShareHtmlメーカー」を使う方法があります。

私の場合は、ShareHtmlメーカーを知る前にこちらのショートコードを発見して以来ずっと使ってます。(以下の外部リンクもこのショートコードで表示してます)

 functions.phpファイルにソースコードを記述し、記事編集画面にショートコードを入力するとサムネイル付きの外部リンクHTMLが生成される、といったモノです。めっちゃ使いやすくて感謝してます。

そして、このショートコード用に専用のブックマークレットを用意したワケなんです。

ShareHtmlを使って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 .= '<blockquote>'.mb_strimwidth(esc_attr($opt['description']), 0, 140, "...","UTF-8").'</blockquote>';
        $str .= '</div></article>';
        return $str;
    }
}
add_shortcode('bm', 'shortcode_custom_bookmark');

10,14行目のエスケープ処理は元のソースでhtmlspecialcharsが使われていたのですが、WordPress用のエスケープ処理関数「esc_attr」に変更しています。(こちらにしないとエスケープしきれない文字があったので。WordPressのせい?)

外部リンク先の概要表示はpタグではなく引用のblockquoteタグに変更しています。

CSSのスタイリングに関してはこのショートコードを公開してるページにサンプルがあります。

ショートコードの使い方

ソースコードをfunctions.phpに記述した後、以下のようにショートコードを記事本文に入力すると使えます。

[bm url="http://example.com" description="ページの概要・説明(任意)"]ページのタイトル[/bm]

でも、一々URLやタイトル、概要をコピーして貼り付けしてると(少しだけど)時間が掛かるんですよね。

そして本題ですが、リンク表示したいページの「URL」「タイトル」「概要」を一発で自動的に取得し、ショートコード用のソースを吐き出すブックマークレットを用意したんです。

ショートコード用のブックマークレット

そのページ情報を取得するブックマークレットはこちらのリンクです

こちらのリンクをChromeやFirefoxならブックマークバーにドラッグ&ドロップでお気に入り登録、IEなら「右クリック > お気に入りに追加」で登録出来ます。

登録したら、リンク表示したいページでお気に入り内の「GetLinkCode」をクリック。そうするとダイアログに);void(0);

最初にdescriptionの値を変数に格納し、if文で無い場合の処理をしています。

最後に文字をダイアログで表示するprompt関数で、ショートコード用の文字列を結合して出力しています。

このjavascriptをブックマークレット用に1行にまとめて<a>タグのhref属性に放り込んでブックマークレット完成。

<a href="javascript:var%20description%20=%20document.getElementsByName('description').item(0);var%20twDescription%20=%20document.getElementsByName('twitter:description').item(0);var%20pd%20=%20document.getElementsByTagName('meta');var%20gpDescription%20=%20null;for(i=0;i<pd.length;i++){if(pd[i].getAttribute('property')=='og:description'){gpDescription = pd[i].getAttribute('content');}}if(!(description%20==%20null))%20{description%20=%20description.content;}%20else%20if(!(gpDescription%20==%20null))%20{description%20=%20gpDescription}%20else%20if(!(twDescription%20==%20null))%20{description%20=%20twDescription.content;}%20else%20{description%20=%20'';}window.prompt('外部リンク用ショートコード','[bm%20url=%22'%20+%20location.href%20+%20'%22%20description=%22'%20+%20description%20+%20'%22]'%20+%20document.title%20+%20'[/bm]');void(0);">GetLinkCode</a>

ブックマークレット作成で参考になったページ

まず、タイトルやURL取得に関してこちらの記事が参考になりました。(もろパクリ)

metaタグのproperty属性を取得する方法はこちらのソースコードを参考にしました。

次いで、ブックマークレットの作成はこちらのページを参考にしています。


ショートコードの利点を考えなければShareHtmlのブックマークレットでも全く問題ないのですが、私の場合はショートコードをすでに利用していたので、こちらに対応したブックマークレットを用意することにしました。

photo credit: Dmitry Baranovskiy via photopincc

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone