ブログ記事を作成する時に頻繁に多用するスクリーンショットですが本日はその作業をちょっとだけ簡略化できるかもしれないtipsについてご紹介します。
WEBサイトのスクリーンショットを取得するプラグイン「Browser Shots」
ウェブサイトの動的なスクリーンショットを WordPressサイトへ取り込むことのできるプラグインです。
これを使えばわざわざブラウザのスクリーンショット機能を使わなくてもWEBサイトのスクリーンショットを記事内に埋め込むことが出来ます。
もちろん画像のアップロードも必要なく、サイトの外観が変われば自動的に変換してくれます。
個人的に使いどころによっては便利だと思いましたので紹介します♪
「Browser Shots」の使い方
プラグインをインストールし有効化すると投稿編集のヴィジュアルモードに新しいアイコンが加わります。
選択するとポップアップでサイトのURLなどを入力する画面が出てきますのでこちらに表示したいページの情報を入力していきます。
完了し「OK」をクリックするとショートコードで記事に埋め込まれます。
あとはプレビューで確認すればこれだけでサイトの動的スクリーンショットが記事内に表示されたことが確認できます。
キャプチャ画像を自動生成するので、サーバーにも負荷をかけずに外観のみを表示してくれています。
プラグインを使わずにPHPで動的スクリーンショットを取得する方法
こちらはテーマファイルをカスタマイズするため、最初にバックアップを取っておくことをお勧めします。
Function.php に下記のコードを記述します。the WordPress.com の APIを使ってスクリーンショットを取得しています。
//スクリーンショット取得
function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://design-plus1.com/',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wpb_screenshots");
次にショートコードを投稿または固定ページに挿入します。
[screen url=”http://●●●.com” alt=”ALTタグ”]
URLとALTタグを任意のものに変更するだけで先ほどと同じような動的なスクリーンショットをサイトに埋め込むことができます。
widthとheightでキャプチャサイズの指定をすることも可能です。
[screen url=”http://www.yahoo.co.jp/” alt=”日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、 ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決 エンジン」を目指していきます。” width=”600″ height=”400″]
まとめ
意外とブログの記事を書く時にとることの多いスクリーンショットですがこれでなかなか記事執筆の作業がはかどっていいのではないでしょうか。
ただしこの動的スクリーンショットはjQueryなどにより構築された動くサイトにはあまり向いていない面があり、サイトによっては理想的なキャプチャを取得してくれない場合がございますので適材適所でうまく利用できるといいかもです。
それではまた。
