当サイトには広告が含まれております

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

この記事は最終更新日から4年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

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

あわせて読みたい
URLを入力するだけ!簡単にスクリーンショットを表示してくれるプラグインBrowser Shots あるお客さんが、URLからスクリーンショットを作ってくれるサービスを利用していました。できればWordPressのプラグインでその機能を実装した方がいいなと思ったので、...

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

インストールしてみます

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

インストールをクリック

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

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

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

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

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

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

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

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

幅を指定して表示する

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

// basic shot 600px wide
Screenshot of link-to-website

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

[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

囲み型ショートコードでキャプションを記述します。

Screenshot of ryus.co.jp

株式会社RYUS

このように指定すると、

キャプションつきでスクリーンショットが表示されます。

ターゲット指定もできるようでした

検索したところターゲット指定もできるようだったので、

Screenshot of over40.jitelog.jp

40代からのロードバイク

このように記述して、実際にこのプラグインで表示してみることができます。

まとめ:なぜか漢字が表示されませんでした(^_^;

最初は気づいていなかったんですが、上記のスクリーンショットとか実際に埋め込んだスクリーンショットを見ると画像ではなく、文字で指定してある漢字部分が表示されません(>_<)。フォントの問題かなにか分からないのですが、ちょっと対策はわかりませんでした。

あまりに大きなスクリーンショットを自動的に撮ってくるとなにかまずいような気もしたので、このプラグインではサムネイルを取って紹介するという使い方がいいのかもしれません。

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!

コメント

コメント一覧 (1件)

コメントを残す