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

photo credit: Dmitry Baranovskiy via photopin cc
photo credit: Dmitry Baranovskiy via photopin cc

外部リンクサムネイル付きで表示するには「ShareHtmlメーカー」を使う方法がありますが、僕はコレを使っていません

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

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

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

ShareHtmlを使ってHTML生成でも問題無いのですが、ショートコードの利点はソースコードを修正するだけで全ての記事に反映される所です。

ブックマークレットとは – はてなキーワード

ショートコードを実装するソース

ブックマークレットの前に、このショートコードを実装するソースコードをちょこっと拝借。

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

また、外部リンク先の概要表示はpタグではなく引用のblockquoteタグに変更しています。(なんとなく^^;)

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

ショートコードの使い方

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

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

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

(ようやく本題に入れました)

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

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

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

登録したら、リンク表示したいページでお気に入り内の「GetLinkCode」をクリック。そうするとダイアログに[bm]から始まるショートコードが生成されるのでコピーして使います。

注意点は、最低限ページに<title>タグの記述が無いと動作しなくなります。(タイトルタグを設定してないページは無いと思いますが)

概要・説明に関しては<meta name=”content”>から拾ってきて、無い場合はOGP設定の<meta name=”ogp:content”>から、それでも無い場合はTwitterカードで設定する<meta name=”twitter:content”>から拾ってきます。

ブックマークレットの解説

ブックマークレットのソースコードについて。そんな複雑じゃないです。

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

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

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

見辛いので直視してはイケマセン。

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

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

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

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


ショートコードの利点を考えなければShareHtmlのブックマークレットを使っちゃっても良いのですが、人間それまでの習慣が染み付いてると慣れた方法で作業し続ける生き物らしく。どっちみちショートコードだと便利ですし、まぁ良いじゃないですか。(曖昧な終わらせ方)

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

  • Pingback: 【HTML5対応】WordPressの記事でサムネイル画像つきリンクを表示させるショートコードを実装してみたり | アンギス()

  • こんばんは、はじめまして。

    こちらのブックマークレットがタイトルと本文を手軽に持ってこられて非常に便利だと思っています。

    拙作のプラグインと組み合わせて使わせていただきたいと思っているのですが、こちらのページへのリンクをした上で、「ショートコード部分を書き換えたもの」を当サイトで公開しても問題ありませんでしょうか。

    もしくは、当プラグインはショートコードを変更できるので、こちらのブックマークレットを使うのをオススメするような紹介のしかたをしてもよろしいでしょうか。

    参考までに、http://poporon.poponet.jp/pz-hatenablogcard で公開しているものとなります。
    ぶしつけなお願いですが、よろしく検討お願いします。

    • 初めまして、ぽぽろんさん。

      アンギスさんのコードを元にしたブックマークレットですが、ありがとうございます!

      サイトで公開していただいても大丈夫ですよ。どちらの方法でも問題ないです、使っていただけるで嬉しいです~。

      お作りになったプラグインとても便利そうですね、是非利用を試してみたいです!
      それでは、よろしくお願いしますm(__)m

      • ありがとうございます!
        両方の方向で行きたいと思います!

        サイトの雰囲気やそのときの気分に合わせて、設定画面で外見を変えられるように工夫をしているつもりですので、ぜひ一度お試しくださいませ(^-^)o

  • Yuetsu Nitta

    はじめまして!ブログ拝見させていただき早速試させていただいております!
    とても便利です!  

    ちなみに、サムネイルで表示される画像をOGPやアイキャッチ画像になるような事って可能なんでしょうか???

    今だとページのスクリーンショット的な感じなのですがもしOGPなど表示できればと、、、

    • はじめまして!
      使用していただきありがとうございますm(__)m

      >ちなみに、サムネイルで表示される画像をOGPやアイキャッチ画像になるような事って可能なんでしょうか???

      なるほど〜。OGPでアイキャッチが設定されている場合は、スクリーンショットのサービスよりも優先してサムネイル画像に使用するアイディアは良いですね。

      ショートコードとブックマークレットのソースコードを変更する必要が出てきますが可能だと思います。

      余裕のあるときに作成することができたら記事に追記してみようかと思いますm(__)m

    • すみません。
      今更気づいたのですが、例えば外部のWebサイトのOGPを拾ってくるなどをした場合、(CDN等を通してないなら特に)画像の読み込みが引用サイトからになるので、相手のサーバーに負担をかけてしまいます><
      自分のブログ記事の場合のみOGP設定されていたらそちらを使う、というのであれば大丈夫だと思いました。

      • Yuetsu Nitta

        わざわざ再度ご回答頂きありがとうございます! なるほどですね〜、相手サーバーに負担がかかってしまうんですか、、 そこは注意が必要ですね、、汗 自分はまだそこらへんが無知なもので、、ありがとうございます!汗

  • Pingback: サムネいるつきリンクの作成 - Hastam Album()

トラックバック

Trackback: https://increment-log.com/link-thumbnail-bookmarklet/trackback/