ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

WordPress – プラグイン – サムネイル付きのリンクを表示 Browser Shots

      2016/12/08

外部サイトへのリンクを貼る場合、サムネイル付きのリンクを表示させたいと思ったので導入メモ。

ちなみに、サムネイル付きのリンクとは下記のような感じのリンクのことを言っています。

こちらが完成形です。
(*現在はまた変更してますので異なっております。記事は参考までにどうぞ。)

pierre-net

どうやら、
・「Wordpress」のプラグイン「Browser Shots」を導入する。
・「Google Chrome」の拡張機能「Create link」を導入する。
の、2つが必要らしいです。

Browser Shots

まずはこの「Browser Shots」というプラグインをWordpressにインストールさせます。

このプラグインは「表示する幅(px)」と「リンク先のURL」を指定することでスクリーンショットをリンク付きで生成するプラグインです。

WordPressの管理画面から「プラグイン」→「新規追加」で「Browser Shots」を「プラグインの検索」で検索させて、それをインストールします。

20141027001

インストール後に、「Browser Shots」は有効化させておきましょう。

Browser Shotsを使ってみる

まずは「投稿」→「新規追加」で投稿する画面にいってください。

「ビジュアル」のタグを選択すると、下図のようにカメラのマークが出てくるかと思います。

20141027002

このカメラのボタンを押すと、下図のようにポップアップ画面が現れてきます。

この600という数字は「表示したい幅(px)」になるので、自分のブログに合わせて幅がどれくらいになるのかを設定すればよいでしょう。

自分の場合は、とりあえず200くらいにしておきました。

20141027003

OKボタンを押すと、次は「リンク先のURL」を入れるポップアップ画面が現れてくるので、リンク先のURLを入力してOKボタンを押します。

20141027004

とりあえずはこれでオッケー。

投稿にはこんな感じで入ります。

20141027005

さっそくプレビューで見てみます。

。。。
。。。
。。。

20141027006

この画面が終わりませんwww

初回取込みは時間がかかるそうです。。。

しばしまちましょう。。。

自分の場合は、しばらくしても変化がなければページを更新しちゃいます。。

そして現れたのが下記です。

[browser-shot width="200" url="http://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」にアクセスします。

Create link

そうすると、下記の画面に飛ぶので、「+無料」という追加ボタンをおします。

20141027007

追加するかどうかポップアップ画面で聞かれるので「追加」ボタンを押して追加します。

20141027008

無事。追加されました。

ちなみにこれはブラウザを「chrome」にしていないとダメなのだろうか。。。

多分ダメなのでしょう。。

自分はもともと「chrome」を使っていたので気にしていませんでしたが。。

20141027009

そうすると、「chrome」の右上に「Create link」の@マークのボタンが現れます。

これをクリックして、その中にある、「Configure...」を選択します。

20141027010

そして、下図のように入力していくのですが、

①まず「+」ボタンを押します。

②の入力画面が現れるので、適当な名前を入力します。

自分の場合は「Capture」としました。

③には下記のソースコードをコピペします。

20141027012

③に入れるソースコード。下記を③にコピペします。


 <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キーなどで、貼り付けるだけでサムネイル画像付きリンクの完成です。

こんな感じになりました。
(*現在はまた変更してますので異なっております。記事は参考までにどうぞ。)

pierre-net

以上です。

せっかくなんで参考にしたサイトをサムネイル画像付きリンクで貼ってみました。

参考にしたサイト:

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法 | dmgadget(ディーエムガジェット)

WordPressでリンクと一緒にスクリーンショットを載せる方法 | としつーる

Various Program Blog » Post Topic » WordPressのBrowserShotsプラグイン導入と使い方解説とカスタマイズ
*2016/12/08リンク切れを削除

簡単!爆速!5秒!キャプチャ画像付きリンクをWordPressとChrome拡張のコンボで作る|ウェブシュフ

 - wordpress , ,