WordPress

【WordPress】指定したURLのキャプチャ画像を表示できるBrowser Shots

February 12, 2017
Browser Shots


Browser Shotsはウェブサイトのスクリーンショットを撮るプロセスを自動化するために[browser-shot]ショートコードを使用して記事内に埋め込むことができるプラグイン。

Browser Shotsプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Browser Shotsを検索
有効化にするとエディタにBrowser Shotsが追加されます。

エディタ


エディタのビジュアルにBrowser Shotsが追加されます。


クリックすると上記画像のようにポップアップが表示されます。

Image Url キャプチャ画像を生成するウェブサイトのURL
Image Link Url(optional) リンク先URL
Image Width 画像の幅
Image Height 画像の高さ
Image Caption 画像キャプション
Image Alt Text 画像のalt
Open Link in new Window? 新しいタブで開きますか

全て埋める必要はありません。最後にOKをクリックするとショートコードが挿入されます。

ショートコードのプレビュー
// basic shot 600px wide
[browser-shot url=”http://link-to-website” width=”600″]

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

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

使用できるパラメーター

  1. url
  2. width
  3. height
  4. alt
  5. link
  6. target
  7. class
  8. image_class


上記画像で使用したショートコードは以下のようになります。
[browser-shot url="https://wordpress.org/plugins/browser-shots/" width="600" height="450"]
[browser-shot url="https://ja.wordpress.org/plugins/browser-shots/" width="600" height="450"]

画像を見て頂いたらわかるように、マルチバイト文字に対応していないため日本語などの2バイト文字は表示に不具合が生じるようです。