画面キャプチャを表示するWordPressプラグイン｜Browser Shots

ブログやポートフォリオサイトなどでブラウザに映しだされている画面のスクリーンショットを表示したい時があります。

そのような時、キャプチャ画像を作る訳ですが、スクリーンショットをとって画像編集ソフトで切り抜いてサイズを調整してというような工程があるのですが、かなり手間がかかります。複数枚だったら尚更。
しかし、その手間を省いてくれるWordpressのプラグインがあります。

今回紹介するのは、画面キャプチャを自動生成してくれて、自分のブログやサイトに簡単に表示できるWordpressのプラグイン「Browser Shots」です。
Browser Shots は、画面キャプチャを表示して更にリンクも付けてくれます。

投稿画面の本文に、URLと横幅をショートコードで指定するだけ！

表示された画像はサーバー側で一括管理されているようなので、レンタルサーバーの容量も節約できます。
キャプチャ画像は、リアルタイム生成ではなく定期的に更新されているとのこと。
表示が遅いサイトはまだ読み込まれたことの無いサイトということで、まずは自分で表示しておきましょう。

Browser Shots プラグインは、同じく画面キャプチャを自動生成する”BM Shots”というプラグインの後継機のようです。BM ShotsはWordpress公式プラグインではありませんでしたね。

Browser Shotsの使い方

インストールは、「WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞ 「Browser Shots」で検索」。
もしくは、Browser Shots プラグイン公式サイトからダウンロード。下の画像をクリック。

[browser-shot url=”http://wordpress.org/extend/plugins/browser-shots/” width=”300″]
※上記はBrowser Shotsプラグインにて自動生成しております。

設置方法は、ショートコードでURLと画像サイズを指定するだけです。
［browser-shot url="http://helmetz.net" width="300"］
下記のように表示されます。

[browser-shot url=”http://helmetz.net” width=”300″]
ショートコードを書く方法もありますが、投稿画面のエディタに設置ボタンが追加されてるので使いやすい方法で入力を。
また、ショートコードをカスタムフィールドに入力可能にする方法もあるので記しておきます。

カスタムフィールドでショートコードを利用

カスタムフィールドでショートコードを使うには下記コードをテンプレートファイルに挿入します。
”apply filters”を利用することにより、カスタムフィールド内でショートコードを実行させる事ができます。

<?php echo apply_filters('the_content', get_post_meta($post->ID, 'フィールド名', true)); ?>

Browser Shots、是非、お試し下さい。