WordPressでURLからスクリーンショットを自動取得する方法【引用スクショに最適】

2026-03-11

WordPress

ブログ記事を書いていると、他サイトを紹介したり、ニュースやサービス画面を引用したりすることがあります。

そのときに便利なのが、URLからスクリーンショットを自動取得する仕組みです。

この記事では、WordPressでURLを貼るだけでWebサイトのスクリーンショットを表示できるショートコードを作る方法を解説します。

URLを貼るだけでスクショ表示
16:9に自動トリミング
サイトタイトル自動取得
出典リンク付き
キャッシュ付きで高速

さらに、引用として使用することで著作権トラブルを避けるための考え方についても解説します。

目次 [ close ]

この記事で作れる表示

今回紹介する方法を使うと、次のようにURLからスクリーンショットを取得して表示できます。

[webshot url="https://example.com"]

このショートコードを記事に書くだけで、

サイトのスクリーンショット
favicon
サイトタイトル
出典リンク

が自動表示されます。

当サイトをスクリーンショットするとこうなります。

URLスクリーンショットの仕組み

今回の仕組みでは、Automatticが提供している mShots APIを利用します。

mShotsは、URLを渡すだけでそのページのスクリーンショット画像を生成してくれるサービスです。

https://s.wordpress.com/mshots/v1/URL

例えば

https://s.wordpress.com/mshots/v1/https://example.com

とすると、そのサイトのスクリーンショット画像が取得できます。

このAPIをWordPressのショートコードに組み込むことで、 URLを貼るだけでスクリーンショットを表示できる仕組みを作ります。

WordPressにショートコードを追加する

まずはfunctions.phpに次のコードを追加します。

/**
 * URLスクリーンショットショートコード
 * 
 Screenshot: 
 */
function webshot_card_shortcode($atts) {

$atts = shortcode_atts(
array(
'url' => '',
'width' => '1280'
), $atts );

if(empty($atts['url'])){
return '';
}

$url = esc_url($atts['url']);
$encoded_url = urlencode($url);

/* スクリーンショット */
$img = 'https://s.wordpress.com/mshots/v1/'.$encoded_url.'?w='.$atts['width'];

$title = '';

/* ドメイン取得 */
$host = parse_url($url, PHP_URL_HOST);
$host = preg_replace('/^www\./','',$host);

/* favicon取得 */
$favicon = 'https://www.google.com/s2/favicons?sz=64&domain='.$host;

/* キャッシュキー */
$cache_key = 'webshot_title_' . md5($url);

/* キャッシュ取得 */
$title = get_transient($cache_key);

if($title === false){

$response = wp_remote_get($url,array(
'timeout' => 5,
'redirection' => 3
));

if(!is_wp_error($response)){

$body = wp_remote_retrieve_body($response);

/* og:title */
if(preg_match('/property=["\']og:title["\']\s*content=["\'](.*?)["\']/i',$body,$matches)){
$title = esc_html(trim($matches[1]));
}

/* title */
elseif(preg_match('/<title[^>]*>(.*?)<\/title>/i',$body,$matches)){
$title = esc_html(trim($matches[1]));
}

if(!empty($title)){
$title = trim(preg_replace('/\s*(?:\||｜|│|┃|¦|:)\s*.*/u','',$title));
$title = trim(preg_replace('/\s+-\s+.*/u','',$title));
$title = trim(preg_replace('/\s+.*/u','',$title));
}

}

if(empty($title)){
$title = $host;
}

set_transient($cache_key,$title,24 * HOUR_IN_SECONDS);

}

$html = '<figure class="webshot-card">';
$html .= '<div class="webshot-thumb">';
$html .= '<img src="'.$img.'" loading="lazy" alt="'.$title.'">';
$html .= '</div>';

$html .= '<figcaption>';
$html .= '<img class="webshot-favicon" src="'.$favicon.'" alt=""> ';
$html .= 'Screenshot: <a href="'.$url.'" target="_blank" rel="nofollow noopener">'.$title.'</a>';
$html .= '</figcaption>';

$html .= '</figure>';

return $html;

}

add_shortcode('webshot','webshot_card_shortcode');

CSSを追加する

次にCSSを追加します。

.webshot-card{
  margin:2em 0;
}

@media (max-width:768px){
  .webshot-card{
    margin:1em 0;
  }
}

.webshot-thumb{
position:relative;
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:5px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.webshot-thumb img{
width:100%;
height:100%;
object-fit:cover;
object-position:top;
display:block;
}

.webshot-card figcaption{
font-size:11px;
opacity:0.8;
color:#666;
text-align:right;
margin-top:6px;
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
}

.webshot-favicon{
width:16px;
height:16px;
border-radius:3px;
}

ショートコードの使い方

記事中で次のように書くだけです。

[webshot url="https://example.com"]

これだけでスクリーンショットが表示されます。

ショートコードをパターンとして保存して簡単に呼び出す方法

ここまでで紹介したショートコードは、そのまま入力しても使えますが、WordPressの「パターン」機能を使うとさらに便利になります。

パターンとは、WordPressに標準で用意されている再利用できるブロックテンプレートです。

ショートコードをパターンとして保存しておけば、記事を書くたびに入力する必要がなく、ワンクリックで呼び出すことができます。

① ショートコードを入力する

まず記事編集画面で、次のショートコードを入力します。

[webshot url="https://example.com"]

このURLの部分を変更することで、任意のサイトのスクリーンショットを表示できます。

② パターンとして保存する

次に、このショートコードブロックをパターンとして保存します。

ブロックの「︙」メニューをクリック
「パターンを作成」を選択
名前を付けて保存

例えば次のような名前にするとわかりやすいです。

URLスクショ
サイト引用スクショ
Webスクリーンショット

③ 記事で呼び出す

保存したパターンは、記事作成画面から簡単に呼び出せます。

「＋」ボタンをクリック
「パターン」を選択
保存したパターンをクリック

呼び出したあとにURL部分だけ変更すれば、すぐにスクリーンショットを表示できます。

この方法のメリット

ショートコードを毎回入力する必要がない
記事作成のスピードが上がる
複数記事で同じフォーマットを使える
引用スクリーンショットを簡単に挿入できる

サイト紹介記事やツールレビュー記事など、スクリーンショットを多く使う記事では特に便利なので、ぜひパターンとして保存しておくことをおすすめします。

URLスクリーンショットを使う具体的なシーン

① サービス紹介記事

新しいサービスを紹介するときに、トップページのスクリーンショットを表示できます。

SaaS紹介
アプリ紹介
Webツール紹介

ユーザーがサイトの雰囲気をすぐ理解できます。

② ニュース引用

ニュース記事を引用する際に、見出しだけでなく画面のスクリーンショットを表示できます。

③ UI解説記事

サービスのUIを解説する記事では、実際の画面を見せることで理解度が大きく上がります。

④ SEO記事

「〇〇の使い方」「〇〇とは？」のような記事で、公式サイトを紹介する際にも便利です。

スクリーンショット引用と著作権

Webサイトのスクリーンショットを掲載する場合、著作権の問題が気になる人も多いでしょう。

基本的に、日本の著作権法では引用として適切な条件を満たしていれば掲載可能とされています。

引用として成立する条件

出典を明記する
引用部分が主ではない
引用の必要性がある
引用部分が明確

今回の方法では

Sourceリンク
サイトタイトル表示
出典明記

があるため、引用形式として利用しやすくなります。

スクリーンショットが表示されないサイトがある理由

URLを入力しても、まれにスクリーンショットが表示されないサイトがあります。

これはショートコードの問題ではなく、スクリーンショット取得の仕組みやサイト側の設定が原因であることがほとんどです。

ここでは、スクリーンショットが取得できない主な理由を解説します。

① サイト側でアクセス制限がかかっている

一部のサイトでは、セキュリティ対策として自動アクセス（ボット）をブロックしています。

スクリーンショットサービスは自動アクセスでページを取得するため、この制限に引っかかると画面が取得できません。

特に次のようなサイトでは表示されないことがあります。

銀行サイト
会員制サイト
管理画面
ログインが必要なページ

② JavaScriptでページが生成されている

最近のWebサイトはJavaScriptでページ内容を生成していることがあります。

スクリーンショットサービスは完全なブラウザではないため、JavaScriptで生成される内容が取得できない場合があります。

この場合、ページの一部しか表示されないことがあります。

③ robots.txtでブロックされている

サイトによってはrobots.txtで自動アクセスを制限していることがあります。

この場合もスクリーンショットの取得ができないことがあります。

④ スクリーンショットの生成に時間がかかる

mShotsはリアルタイムでスクリーンショットを生成するため、初回アクセス時は画像生成に時間がかかる場合があります。

その場合、しばらくすると表示されるようになります。

スクリーンショットが表示されない場合の対処方法

もしスクリーンショットが表示されない場合は、次の方法を試してみてください。

URLが正しいか確認する
トップページURLに変更する
数分後に再読み込みする

また、どうしても取得できない場合は、通常のスクリーンショットを撮影して画像として掲載する方法もあります。

ほとんどの一般的なサイトは問題なく表示できるため、レビュー記事やツール紹介記事では非常に便利に使えます。

まとめ

WordPressでは少しコードを書くだけで、URLからスクリーンショットを取得する便利な仕組みを作れます。

今回紹介した方法を使えば、

URLだけでスクショ表示
16:9トリミング
出典リンク付き
タイトル自動取得

といったブログ運営に便利な引用機能を実装できます。

レビュー記事、ツール紹介記事、ニュース記事など、さまざまなブログで活用できるのでぜひ導入してみてください。

Pochipp（ポチップ）とは？無料で使える最強アフィリエイトリンク作成プラグイン