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

こんな感じです
Feedlyがイマイチ見づらいと思って拡張を探してみたらええの見つけた、Feedly Reader

Feedlyがイマイチ見づらいと思って拡張を探してみたらええの見つけた、Feedly Reader

はてブ数

http://hayashikejinan.com/browser/173/

Feedly のRSS読む画面に慣れてなくって見づらかったので拡張を探してみたよ! Google Readerっぽい画面に戻る素敵な拡張があったからみんなこれを使えばいいと思うよ!

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

コード

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

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

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

サンプルコードでサムネイル画像生成に使っているサービスは画像の縦横比が3:4の固定で高さの指定ができなかったので、横幅の指定にあわせて自動で算出するようにしています。

articleやfigureなどHTML5のタグを使っているので、そのあたりは適切変更してくださいな。

他にもいくつかのオプションにも対応しています。

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

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

@incrementlogさんがこのショートコードのブックマークレットをつくってくださいました!

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

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

はてブ数

http://increment-log.com/link-thumbnail-bookmarklet/

外部リンクをサムネイル付きで表示する「ShareHtmlメーカー」がありますが、僕はコレを使っていません。 ShareHtmlメーカーを知る前にこちらのショートコードを発見して以来ずっと使ってます。(以下の外部リンクもこのショートコードで表示してます)

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

おまけ

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

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

11 件のコメント

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

  2. ピンバック: WordPressで引用付きのリンクを表示させたい | 何の変哲もない福岡生活(WP)…

  3. ピンバック: 容量無制限、画像を自動で保管整理「Google+ Auto Backup」 | てるず

  4. こんにちは。
    こちらのショートコードを使わさせていただいています。
    大変便利なショートコードです。ありがとうございます。

    できたら自身のサイトの場合はアイキャッチを表示させるような機能をプラスしてもらえたらうれしいです。

    改造しようと思ったのです、いまいちうまくいきませんでした。

    1. よっしー 投稿作成者

      マサキさま
      こんにちは!
      自身のサイトでのみアイキャッチ画像を表示させる場合、ショートコードで指定されたリンク先のURLを解析して判断する処理が必要です。

      ・そのURLが自身のサイトかどうか
      ・そのURLが自身のサイトであればIDの記事は何か
      ・そのURLがその記事にアイキャッチ画像が表示されているか

      記事のIDだけ指定するにしても、現状とはまったく別の動作で改修が必要となるため、ここでは対応が難しいです。

      もし、リンクしたサイトのアイキャッチ画像を表示させるだけであれば、はてなブックマークのブログカードの動作が近く、ユーザーによってブックマークレットもつくられています。ぜひ参考までに。

      【はてなブログ ブログカードをブックマークレット化してみたよ】
      http://hayashikejinan.com/blog/1166/

  5. ありがとうございました。
    このサムネ付リンクの使い勝手がかなりいいので、移行することは考えていないので、このまま使わさせていただきます。

    1. よっしー 投稿作成者

      「使い勝手がかなりいい」とはありがとうございます!機能改善の提案や不具合報告などございましたらお気軽にご連絡ください。

  6. ピンバック: 外部リンク用設定の参考 | Hastam Album

  7. はじめまして 最近はOGPを設定してあるサイトが増えているので、それを利用できたら良いな、と思いました。

    1. よっしー 投稿作成者

      はじめまして。
      コメントありがとうございます!

      サイトのサムネイル画像はWordPress公式のものをそのまま使っているので、それがOGPに対応しない限りはなんともできないですね…

  8. ピンバック: サムネいるつきリンクの作成 - Hastam Album