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

シェアする

 リンクと一緒にスクリーンショット(とはてブ数)を載せているブログを最近よく見かけ、見やすくていいなと思ったので僕もやってみました。

動作イメージ

イメージとしては、こんな感じです。

やる前

【レビュー】クリップボード内のURLをキー一発でページタイトルへ置換「F9サイトタイトル取得」 – 窓の杜

やった後

[browser-shot url=”http://www.forest.impress.co.jp/docs/review/20140911_666213.html” width=”150″]

【レビュー】クリップボード内のURLをキー一発でページタイトルへ置換「F9サイトタイトル取得」 – 窓の杜

必要なもの

必要なものは以下の2つです。

  • Create Link (閲覧しているサイトのURLをHTMLタグとして出力)
  • Browser Shots (指定したURL先のサイトのスクショを取得)

Create LinkはGoogleChromeの、Browser ShotsはWordPressのプラグインです。

参考にしたサイト

 手順としては、まずBrowser Shotsのダウンロードと有効化をしてからCreate Linkのインストールと設定 です。
下記のサイトを参考にしました。

[browser-shot url=”http://dmgadget.info/wordpress-createlink-browsershots/” width=”150″]

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

 ※このサイトに載ってるコードをCreateLinkにまるまるコピペしても、browser-shotの部分がリンクに変更されてしまってうまく動きませんので注意。

スクリーンショットをクリックした時に新しいタブで開く

 スクリーンショットをクリックしたときに、新しいタブで開くようにしたいので、browser-shots.phpを編集します。
 「外観」→「プラグイン編集」を開き、「編集するプラグインを選択」のプルダウンメニューから、「Browser Shots」を選び、「選択」ボタンをクリックします。
 右側で「browser-shots/browser-shots.php」が青く選択されていることを確認し、真ん中あたりにある
[code]return ‘<div class="browser-shot"><a href="’ . $url . ‘">’ . $image . ‘</a></div>’;[/code]
に、下にようにtarget=”_blank”を追記します。
[code]return ‘<div class="browser-shot"><a href="’ . $url . ‘" target="_blank">’ . $image . ‘</a></div>’;[/code]
 最後に、下の「ファイルを更新」を押して完了です。
これでスクリーンショットの画像をクリックしたら新しいタブで開けるようになりました。
Browser-shotsの詳しい解説は下記のサイトに載っています。




シェアする




コメント

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