ワードプレスにはスクリーンショットをキャプチャして画像にするプラグインは出ていますが・・・。
はじめに
ワードプレスではBrowser Shotsと言うプラグインを使えばリンク先のサイトのスクリーンショットを画像にして表示させる事が出来ますが、ショートコードでしか掲載出来ないので、知識のない人に触ってもらう場合はかなり使いにくいプラグインだなと感じました。
そこで私がスクリーンショットのキャプチャ画像を掲載させた方法をご紹介させて頂きます。
注意事項
- heartrails.com自体が古いサイトなので、将来的に使えなくなる可能性がございます。
- 一度画像を取得してしまうとリニューアルしても前のデザインが残ってしまいます。
今回やりたい事
今回私がやりたかったのは
- クライアントがURLを入力する
- そのURLのリンク先のスクリーンショット画像が表示される
たったこの2つの内容です。ただ、知識のない人でも簡単に出来ると言う点を考えるとショートコードを入力させるのは、ハードルが上がったり、上手く表示されない恐れがあったので、URLのみを入力する形になりました。
スクリーンショットを表示させる方法
私はワードプレスのAPIやプラグインなどは使わずに「HeartRails Capture」と言うサイトを利用させて頂きました。
http://capture.heartrails.com/
使い方は簡単です。
http://capture.heartrails.com/free?任意のURL
この形で画像を取得するだけで簡単にスクリーンショットを表示させる事が出来ます。試しに「yahoo」で試してみましょう。
http://capture.heartrails.com/free?http://www.yahoo.co.jp/
上記URLはyahooのキャプチャを取得している状態です。クリックするとどういった物が表示されるか一度確認してみましょう。
このようにyahooが取得できました。
ただ、よく見てみると現在のyahooと少しデザインが違っていませんか？
そうなんです。欠点としては一度キャプチャを取得してしまうとそのURL＝この画像と言う形になってしまうのでデザイン変更やリニューアルには対応していないのです。
もし画像として表示させたい場合は
<img src="http://capture.heartrails.com/free?http://www.yahoo.co.jp/" />
このように入力すると表示させる事が出来ます。
サイズを指定しよう
「HeartRails Capture」で画像を取得する場合、取得する画像サイズを指定する事が出来ます。
<img src=" http://capture.heartrails.com/123x123?http://www.yahoo.co.jp/">
先程freeと表示されていた部分に画像サイズを入力しています。
- 123×123
- 200×300
こんな感じで最大400×300の画像サイズまで取得が出来ます。
カスタムフィールドに組み込もう
ここまで説明すると、もうわかるかと思いますがカスタムフィールドに組み込む場合は
<img src="http://capture.heartrails.com/300x300?<?php echo $cfs->get('url'); ?>" >
こんな感じです。
私が使っているカスタムフィールドは「Custom Field Suite」でurlの値を取得しています。
どうでしょうか？これなら簡単にキャプチャしたスクリーンショット画像をホームページ上に組み込む事が出来ましたよね。
以上でワードプレスでカスタムフィールドを使ってリンク先のスクリーンショット画像を掲載させる方法の説明を終了いたします。
さいごに
印象が違ってきます
今まではURLだけを掲載していたのですが、最近facebookなどで画像+タイトル+リンク先などセットで掲載している事が多く、当たり前になってきましたよね。
今回の方法は新しく稼げる副業用で考えているホームページで利用している内容なので、実際の動作なども確認済みです。
やっぱりキャプチャしている画像があるのと、ないのとではパッと見た時の印象に差がつきますね。リンク先だけだと味気ないですし。
最近は直感的に触れるサイトと言うのが非常に多くなってきているので、やっぱり画像関係は必須条件でしょう。
