ショートコードで指定したURLのスクリーンショットを表示するプラグイン

ブログ記事を書いていてサイトやサービスの紹介をするときにスクリーンショットを撮って、貼り付けてということをしていました。しかし先日ショートコードでURLを指定しただけでスクリーンショットを表示してくれるプラグインを見つけました。

ショートコードで指定したURLのスクリーンショットを表示する Browser Shots

(追記：2020/01/06）この記事のことを忘れて新しく書いた記事がありました。よろしければこちらをご覧ください。

ショートコードで指定したURLのスクリーンショットを表示するプラグインは Browser Shots です。

インストールしてみます

ダッシュボード プラグイン＞新規追加　をクリックして、Browser Shots を入力してリターン

インストールをクリック

プラグインを有効化 をクリックします

これでインストールは終了です。

スクリーンショットの表示方法

使い方がよくわからないので、

インストール済みのプラグインをクリックして、

詳細を表示 をクリックしてみます

するとこのように使い方が表示されます。

ショートコードの部分をコピーして使ってみます。

幅を指定して表示する

コピーしたコードの1番目の、

// basic shot 600px wide

この方法でスクリーンショットを表示してみます。

[browser-shot url="http://ryus.co.jp" width="600"]

会社のコーポレートサイトを指定して表示してみました。

この表示になって、しばらく変わりません(>_<)。どうしたんだろう…？と検索してみると「表示されなくてもしばらく待てば表示されます」と書いてあるものが多かったです。しかし数分しても変わらないので、クリックしてみました。クリックするとそのサイトに飛んでしまったんですが、戻ると

ちゃんと表示されていました(^^)/。しばらく待てば、表示、、されるんだと思います。一度表示されれば次からはすぐに表示されます。

試しにYAHOOのサイトをこのコードで

[browser-shot url="http://yahoo.co.jp" width="600"]

表示してみたところ、

すぐに表示されました。

考えてみると、RYUSのトップページではRSSでこのblogの情報を取得して表示しているのでそのせいで時間がかかってしまったようです。

リンクを付けて表示する、キャプションを入れて表示する

上記の方法でもクリックすればスクリーンショットを撮ったリンクにジャンプしていました。

// shot with link to other website
[browser-shot url="http://link-to-website" width="700" link="http://www.binarymoon.co.uk/"]

なので、2番目に書いてあるこの方法はなぜ必要なのかなと思ったのですが、

[browser-shot url="http://ryus.co.jp" width="700" link="http://ryus.co.jp/contact/index"]

このように表示するURLとリンクするURLを変えることが出来ます。
* あとで落ち着いて見たら、shot with link to other website(別サイトへのリンクを付けるショット)と書いてありました(^_^;

これを表示して

クリックすると

指定したお問い合わせページにリンクしました。

3番目めの書き方はキャプションを表示出来るようです。

// shot with caption (uses default WordPress caption styles)
[browser-shot url="http://link-to-website" width="700"]Add Caption

株式会社RYUS

40代からのロードバイク