BrowserShotsで内部リンクにサムネイル画像 (WordPressプラグイン)

2016-10-17

こんにちは、こんばんは、おはようございます。
どうも、ロクロクです。

 

今日は、Browser ShotsというWordPressのプラグインを紹介します。

Browser Shotsとは

画面キャプチャを自動生成し、サイトに反映することができるプラグインです。

ハウツー系の記事を作成したり、ポートフォリオサイトを作成したりするときにWebサイトの画面をキャプチャとして使うことが多いと思います。ただし、キャプチャして、サイズを変更してと手間がかかりますよね。

このプラグインを使えば、WebサイトのURLと画像の横幅をショートコードを使って指定するだけでもキャプチャ画像を挿入できるので便利です。

また、このプラグインはキャプチャ画像が自動生成されるため、WordPressのために使っているサーバーに負荷をかけることもありません。

Browser_Shots9

(すばらしーーーい)

 

 

プラグインをインストールする

このプラグインは、WordPress管理画面から「プラグインを検索」してインストールできます。

インストールができたら早速使ってみましょう。

キャプチャ画像の挿入方法は、「ショートコードを使う方法」と「ビジュアルエディタを使う方法」があるので、自分の好きな方法で使ってみてください。

 

 

キャプチャ画像をショートコードで挿入する

まずは1つ目の方法を紹介します。

記事投稿画面を開き、キャプチャ画像を挿入したい箇所に以下のショートコードを入力するだけです。

Browser_Shots
赤字部分のURLとサイズを変更することで、簡単にキャプチャを作ることができます。

url=”●”にURLを、width=”●”にサイズを入力します。

 

実際に記事の投稿で入力してみてください。

必ず、テキストモードになっていることを確認してから入力してください。

Browser_Shots3

 

このようにショートコードを入力するだけです。

Browser_Shots2

 

入力が完了したら、サイト上で確認してみましょう。

 

これで1つ目の方法は完了です。

つづいて2つ目の方法を紹介します。

 

 

キャプチャ画像をビジュアルエディタから挿入する

プラグインのインストールが完了すると、ビジュアルエディタにカメラのアイコンが追加されています。

Browser_Shots5

 

このボタンをクリックすると、画像の横幅を設定するポップアップが表示されます。今回は600pxとしました。

Browser_Shots7

 

「OK」をクリックすると、キャプチャするWebサイトのURLの入力が求められますので入力します。

Browser_Shots6

 

さらにOKをクリックすると、自動でショートコードが入力されます。

Browser_Shots8

やっていることはどちらも同じですが、ショートコードの扱いに慣れていない方は、2つ目の方法の方が簡単かもしれません。

 

 

まとめ

時短に必須のプラグインです。

WordPressでブログをしているなら、インストールしておいたほうがいいです。

 

WordPressの基礎を学びたい人はこの本がおすすめです。(経験談)

 

それではこのへんで、ばいちゃ