webmobile
Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

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

19,783 view 更新日:2014年12月30日
  • はてなブックマーク 15
  • facebook 15
  • Google+ 4
  • Pocket 30
  • twitter

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

そのような時、キャプチャ画像を作る訳ですが、スクリーンショットをとって画像編集ソフトで切り抜いてサイズを調整してというような工程があるのですが、かなり手間がかかります。複数枚だったら尚更。
しかし、その手間を省いてくれる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、是非、お試し下さい。

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク 15
  • facebook 15
  • Google+ 4
  • Pocket 30
  • twitter
19,783 view 2013年04月15日

後回しにしている買物はありませんか?

webmobile 著者

フリーランスWebデザイナーとして活動をはじめて13年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench、WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。当ブログは230記事時点で月間120万PV超えを達成しています。コペン乗り。


書き手(webmobile)の紹介 ⇒ 仕事旅

facebookページでも更新情報を発信中♪

スマホ充電器大容量バッテリー
スマートフォンの充電切れ対策に携帯用バッテリーは持っておこう♪

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

© 2004-16 webmobile ALL COPYRIGHTS RESERVED.