WordPress – プラグイン – サムネイル付きのリンクを表示 Browser Shots
2017/12/25
外部サイトへのリンクを貼る場合、サムネイル付きのリンクを表示させたいと思ったので導入メモ。
ちなみに、サムネイル付きのリンクとは下記のような感じのリンクのことを言っています。
こちらが完成形です。
(*現在はまた変更してますので異なっております。記事は参考までにどうぞ。)
どうやら、
・「Wordpress」のプラグイン「Browser Shots」を導入する。
・「Google Chrome」の拡張機能「Create link」を導入する。
の、2つが必要らしいです。
目次
Browser Shots
まずはこの「Browser Shots」というプラグインをWordpressにインストールさせます。
このプラグインは「表示する幅(px)」と「リンク先のURL」を指定することでスクリーンショットをリンク付きで生成するプラグインです。
WordPressの管理画面から「プラグイン」→「新規追加」で「Browser Shots」を「プラグインの検索」で検索させて、それをインストールします。
インストール後に、「Browser Shots」は有効化させておきましょう。
Browser Shotsを使ってみる
まずは「投稿」→「新規追加」で投稿する画面にいってください。
「ビジュアル」のタグを選択すると、下図のようにカメラのマークが出てくるかと思います。
このカメラのボタンを押すと、下図のようにポップアップ画面が現れてきます。
この600という数字は「表示したい幅(px)」になるので、自分のブログに合わせて幅がどれくらいになるのかを設定すればよいでしょう。
自分の場合は、とりあえず200くらいにしておきました。
OKボタンを押すと、次は「リンク先のURL」を入れるポップアップ画面が現れてくるので、リンク先のURLを入力してOKボタンを押します。
とりあえずはこれでオッケー。
投稿にはこんな感じで入ります。
さっそくプレビューで見てみます。
。。。
。。。
。。。
この画面が終わりませんwww
初回取込みは時間がかかるそうです。。。
しばしまちましょう。。。
自分の場合は、しばらくしても変化がなければページを更新しちゃいます。。
そして現れたのが下記です。
[browser-shot width="200" url="https://pierre-net.com/"]
おおお。画像にリンクが貼られているみたいです。
画像のリンクを別ウィンドウで開く
さて、このままでも良いのですが、現状だと、画像のリンクをクリックすると、同ウィンドウでリンク先にジャンプします。
これを画像のリンクをクリックしたときに、別ウィンドウで開くようにしました。
WordPressの管理画面から「プラグイン」→「プラグインの編集」を選択して、編集するプラグインから「Browser Shots」を選択して、browser-shots/browser-shots.phpを編集します。
編集するのは57行目。「 target="_blank"」というキーワードのみ追記します。
編集前
if ( !empty( $image_uri ) ) {
$image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />';
return '<div class="browser-shot"><a href="' . $url . '">' . $image . '</a></div>';
}
編集後
if ( !empty( $image_uri ) ) {
$image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />';
return '<div class="browser-shot"><a href="' . $url . '" target="_blank">' . $image . '</a></div>';
}
これで、画像のリンクをクリックしたときに、別ウィンドウで開くようになりました。
次は、このサムネイルの横に、リンク先の情報の文字を追加させていきたいですね。
Create link
「Create link」は「Google Chromeの拡張機能」だそうです。
まずは、下記のGoogleウェブストアの「Create link」にアクセスします。
そうすると、下記の画面に飛ぶので、「＋無料」という追加ボタンをおします。
追加するかどうかポップアップ画面で聞かれるので「追加」ボタンを押して追加します。
無事。追加されました。
ちなみにこれはブラウザを「chrome」にしていないとダメなのだろうか。。。
多分ダメなのでしょう。。
自分はもともと「chrome」を使っていたので気にしていませんでしたが。。
そうすると、「chrome」の右上に「Create link」の＠マークのボタンが現れます。
これをクリックして、その中にある、「Configure...」を選択します。
そして、下図のように入力していくのですが、
①まず「＋」ボタンを押します。
②の入力画面が現れるので、適当な名前を入力します。
自分の場合は「Capture」としました。
③には下記のソースコードをコピペします。
③に入れるソースコード。下記を③にコピペします。
<a href="%url%" target="_blank"> <img style="display:block;float:left;" border="0" src="http://capture.heartrails.com/150x130/shadow?%url%" alt="" width="150" height="130" /> </a> <a href="%url%" target="_blank">%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" alt="" /> </a> <div style="clear:both;"></div>
以上で設定はすべて終了です。
サムネイル画像付きのリンクを表示させる
では試しにやってみましょう。
まず、リンクさせたいページに飛びます。
そのページで、右上の「Create link」の＠マークのボタンをクリックして出てくるプルダウンで、先ほど入力した「Capture」を選択する。
この時点で、サムネイル画像付きのリンクを表示するための、HTMLコードがブラウザのクリップボードにコピーされています。
あとはこのままこれをCTrl + vキーなどで、貼り付けるだけでサムネイル画像付きリンクの完成です。
こんな感じになりました。
(*現在はまた変更してますので異なっております。記事は参考までにどうぞ。)
以上です。
せっかくなんで参考にしたサイトをサムネイル画像付きリンクで貼ってみました。
参考にしたサイト：
WordPressでリンクと一緒にスクリーンショットを載せる方法 | としつーる
Various Program Blog » Post Topic » WordPressのBrowserShotsプラグイン導入と使い方解説とカスタマイズ
*2016/12/08リンク切れを削除
WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法 | dmgadget(ディーエムガジェット)
*2017/12/25リンク切れを削除
