Webサイトのキャプチャ画像を動的に取得するする方法

Webサイトのキャプチャ画像を動的に取得するには、専用のサービスを利用する方法が簡単です。

世の中にはたくさんのサービスがあり、角取りや影を付けるなどの画像加工までやってくれるものや、シンプルに画像を取得するのみのものもあります。

この記事では、その中でも非公式ながら WordPress が提供しているサービス（API）をご紹介いたします。

キャプチャした画像の例

次の画像は、あなたがこのコラムを表示した時の弊社のWebサイトのキャプチャです。

弊社のWebサイトが更新されると、その際の最新の状態のキャプチャ画像が表示されます。

WordPress でキャプチャ画像の表示のさせ方

URL指定の方法

キャプチャ画像の取得はとても簡単で、次のようにURLを指定するだけです。

この例では、「https://www.dreamhive.co.jp/」を指定しています。

https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.dreamhive.co.jp%2F?w=480

URLを指定する際には、URLエンコードと呼ばれる処理を行う必要があるため、先のURLは「http%3A%2F%2Fwww.dreamhive.co.jp%2F」のように記号「:」が「%3A」、「/」が「%2F」に置き換わっています。

最後の「?w=480」は、幅を「480px」の画像にする指示です。
自分の好きなサイズを指定することができます。

このURLをアドレスバーに入れて移動すると、画像が表示されると思います。

画像として表示させる

WordPress で画像を表示させるには、ページの編集画面で次のように「img」タグの「src」属性として指定します。

編集画面が「テキスト」モードの場合

HTMLタグを入力する場合は、「テキスト」モードで入力してください。
ビジュアルモードで入力すると、タグが実体参照に置き換わって表示されなくなります。

編集画面が「ビジュアル」モードの場合

「ビジュアル」モードをお使いの場合は、次の手順で挿入できます。

編集画面で「メディアを追加」ボタンをクリックする
サイドバーの「URLから挿入」メニューを選択する
URLに上記のアドレスを入力する
「投稿に挿入」ボタンをクリックする

これだけの手順で、次のようなキャプチャ画像を利用することができます。

PHPプログラムで利用する方法

プラグインなどで利用する場合は、次の様にPHPで書いてあげればURLエンコードもurlencode()関数1つでできますね。

echo ‘<img src=”https://s.wordpress.com/mshots/v1/’.urlencode($url).’?w=480″ />’;

まとめ

ブログ記事やコラムを書いていると、新しい情報のキャッチアップが大変ですよね。

今回ご紹介したような動的なキャプチャ画像を取得する方法を利用すれば、手間を減らせる部分もあると思います。

難しくはないと思いますので、是非使ってみてください。

WordPress を安全に利用したい、何か困った時に相談したい、という場合は、
当社の WordPress 保守サービスを是非ご検討ください。

◎WordPress保守：WordPress セキュリティ＆バックアップサービス

WordPress 保守

人気のWordPressメール講座を無料公開中！

10年集客し続けられるサイトを、
WordPress で自作する9つのポイント

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい！と思ったことはありませんか？今回、期間限定で「10年集客し続けられるサイトを WordPress で自作する9つのポイント」について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。期間限定で無料公開していますので、是非ご登録ください。

Webサイトのキャプチャ画像を動的に取得する方法、 WordPress でページに挿入する方法

Webサイトのキャプチャ画像を動的に取得する方法、 WordPress でページに挿入する方法

Webサイトのキャプチャ画像を動的に取得するする方法

キャプチャした画像の例