【WordPress】ショートコードを使ってページのスクリーンショットを表示させる方法（プラグインなし）|Personal WP Customization Notes (PWCN)

ショートコードを使ってページのスクリーンショットを表示させる方法（プラグインなし）

公開日：2022(令和4)年12月12日／最終更新日： 2022(令和4)年12月12日

WordPress Customization Idea and Validation

外部（内部）サイトのスクリーンショットを投稿や固定ページの本文内へ表示させる有名なプラグインに「Browser Screenshots」（公式ページはこちら）というのがあります。

今回はこれと同じような機能をプラグインなしで実装しようというのがテーマです。

ただ、最初にお断りしておきますが、前出のプラグインも、今回紹介するコードも、wordpress.comの非公式APIを使っていて、いろいろ調べても公開情報が見当たらないことから、以下のようにいろいろと謎が多いんです。

このAPIがいつまで機能するかが分からない
画像がどこに保存されているのか分からない（少なくともサイト内ではない）
画像がいつ更新されるのか（キャッシュ期間）が分からないものの、いつの間にか入れ替わっている

この辺りを了承の上で、貴サイトへ実装いただければと思います。

スクリーンショットの表示サンプル

以下は最近お願いされてTT2テーマで作った、猫に関する日記サイトです。

まあまあ結構ダイナミックなサイト．．というのは置いといて、今回紹介する方法でこんな感じのスクショが表示できるようになります。

上記スクショ取得時（2022年12月12日時点）では背景がクリスマスですが、次の時季の背景画像にしてたら、いつの間にか更新されているかもしれません（というのがこの機能のちょっとアレなところです．．）

どんなのが表示できるのかをご覧いただいて、この機能が欲しい！という方は先に進んでください。

スクリーンショットをショートコードで表示させるコード

本ページで紹介するコード自体は、テーマ（子テーマ）のfunctions.phpへ追加しても、独自プラグインに追加しても機能します。

ただし、テーマのfunctions.php編集などに慣れていない方は、いざというときに困ってしまいますから、素直に「Browser Screenshots」プラグインを使う方が無難でしょう。

追加するプログラムコード

追加するのは以下のコードです。

/***** 外部サイトのスクショ *****/
if ( !function_exists( 'sample_screenshots_shortcode' ) ){
function sample_screenshots_shortcode($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'https://s0.wordpress.com/mshots/v1/',
"url" => 'https://habone.biz',
"alt" => '',
"w" => '800', // width
"h" => '600', // height
"load" => 'lazy',
"title" => ''
), $atts));

if(is_ssl()){
	$snap = $snap;
}else{
	$snap = 'http://s0.wordpress.com/mshots/v1/';
}

if(empty($alt)){
	$alt = $url;
}else{
	$alt = $alt;
}

if(empty($alt)){
	$title = $url;
}else{
	$title = $alt;
}

if(empty($w)){
	$w = '800';
}else{
	$w = $w;
}

if(empty($h)){
	$h = '600';
}else{
	$h = $h;
}

if(empty($load)){
	$load = 'lazy';
}else{
	$load = $load;
}

$img = '
<div class="sample-bshot">
<a href="'.$url.'" target="_blank">
<img loading="'.$load.'" alt="'.$alt.'" src="'.$snap.urlencode(esc_url(rtrim( $url, '/' ))).'?w='.$w.'&h='.$h.'" style="min-height:'.$h.'px;display: block; margin: auto;max-width:100%;object-fit: scale-down;" title="'.$title.'"/>
</a>
</div>
';
 
return $img;
}
}
add_shortcode('sshot', 'sample_screenshots_shortcode');

スクショ表示させるためのショートコード

プログラムを追加して保存したら、以下のショートコードを投稿や固定ページ編集画面へ挿入します。

[sshot url="スクショを取り込むURL" alt='alt（代替）文字列' title = '画像のタイトル' w='画像の幅' h='画像の高さ' load='HTML上の読み込み方法']

url…などいろいろなパラメーターで調整できるようにしています。以下が各パラメーターの役割とデフォルト値（値がなかったり、パラメーターが存在しなかった場合の標準値）です。

パラメーター	設定方法	デフォルト値
url	スクリーンショットを取得するURLを指定します	このサイトのトップページ
alt	画像が表示できない場合の代替文字列を設定します	URLパラメーターの値
title	画像タグに付加するタイトル属性です	URLパラメーターの値
w	スクリーンショットの幅(px)を実数で指定します例：600pxなら600と入力します	800
h	スクリーンショットの高さ(px)を実数で指定します例：600pxなら600と入力します	600
load	「lazy（遅延）」「eager（直接）」のいずれかを指定します特殊な場合を除き、デフォルトのままで大丈夫です	lazy