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