外部サイトの画面キャプチャを表示する方法

はじめに

WordPress APIで、以下のURL形式で画面キャプチャを取得できます。

https://s.wordpress.com/mshots/v1/画面キャプチャするURL?w=幅&h=高さ

これを利用し、独自のショートコードを使用して、外部サイトのキャプチャ画像を表示します。

この記事では、この方法について説明します。

完成イメージ

使用方法

以下にショートコードを示します。

[my_capture]

実装手順

以下のコードをfunctions.phpに追加します。

add_shortcode('my_capture', function ($atts) {
  require_once get_template_directory() . '/lib/open-graph.php';

  // URLを取得
  $url = isset($atts['url']) ? $atts['url'] : '';

  // URLが指定されていない場合
  if (empty($url)) {
    return '<p>URLが指定されていません。</p>';
  }

  // キャッシュデータを取得
  $cache_key = 'my_capture_' . md5($url);
  $cached_output = get_transient($cache_key);

  if ($cached_output !== false) {
    return $cached_output;
  }

  $graph = OpenGraphGetter::fetch($url);
  $title = !empty($graph->title) ? $graph->title : $url;

  // キャプチャ画像の取得
  $image_url = 'https://s.wordpress.com/mshots/v1/' . urlencode($url) . '?w=1200&h=800';

  ob_start();
  ?>
  <figure class="wp-block-image">
    <a href="<?= esc_url($url); ?>" target="_blank">
      <img src="<?= esc_url($image_url); ?>" alt="Capture Image">
    </a>
    <figcaption><?= esc_html($title); ?></figcaption>
  </figure>
  <?php
  $output = ob_get_clean();

  // キャッシュに保存
  set_transient($cache_key, $output, DAY_IN_SECONDS);

  return $output;
});

さいごに

今回紹介した方法を使えば、サイトの画面キャプチャを簡単に取得し、表示することができます。
外部サイトを紹介する際に、常に最新の状態を表示できるので、便利です。