WordPressでWebサイトのキャプチャ画像を動的に取得する方法（プラグインなし）
Webサイトのキャプチャ画像を記事に挿入したいけどその都度スクショを貼り付けたり更新のたびに画像を作り直すのが面倒だと思っている方へ。
今回の記事ではWordPressでWebサイトのキャプチャ画像をプラグインなしで動的に取得する方法についてご紹介いたします。
記事の更新作業を効率化できます。
TOC
WEBサイトのURL欄にパラメータを入力するだけでスクリーンショットが自動生成してくれるAPI「WP REST API」の応用
「WP REST API」はWordPress提供のAPIでWordPressサイトコンテンツを取得することができる仕組みです。
こちらはブラウザにアドレスを入力するとキャプチャを自動生成し、表示してくれるサービスです。
これを応用してWebサイトのキャプチャ画像をプラグインなしで動的に取得し、記事内で表示できるようにします。
実際の取得したキャプチャ画像
当サイトのキャプチャ画像です。
こんな感じで動的に取得可能です。
コピペ用html
キャプチャ取得のみhtml
リンクとキャプチャ取得html
※下記のURLエンコードと記載箇所説明を参照し、書き換えてご使用ください。
URLエンコード
URLを指定する際には、URLエンコードを使用します。
| 「 _ 」アンダーバー | %5F |
|---|---|
| 「 : 」コロン | %3A |
| 「 / 」スラッシュ | %2F |
| 「 – 」ハイフン | -（そのまま） |
記載箇所説明
| 「キャプチャのみ」記載するhtml（こちらは一部全角で記載しています） | ＜img src=”https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.wwarehouse.jp%2F?w=1024“＞ |
|---|---|
| 「リンクとキャプチャ」記載するhtml（こちらは一部全角で記載しています） | ＜a href=”https://www.wwarehouse.jp/” target=”_blank” rel=”noopener”＞＜img src=”https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.wwarehouse.jp%2F?w=1024″＞＜/a＞ |
| キャプチャしたいページのアドレス | https%3A%2F%2Fwww.wwarehouse.jp%2F |
| w＝幅指定 | ?w=1024 |
まとめ
ウェブサイトのキャプチャ画像を簡単に挿入することができるWordPressプラグインでは「Browser Shots」が有名です。使い方はとてもシンプルで、表示したいウェブサイトのURLと画像の大きさを指定するだけとなっています。
この「Browser Shots」を利用せずになるべくプラグインを使わずにサイト運営したい方におすすめの方法です。
活用してみてください。
＼ ＦＯＬＬＯＷ ／
