「ナビカード」ウィジェットのカスタムリンクにアイキャッチ画像を表示する方法

外観→メニューからメニューを作成します（図1参照）。

1. 「カスタムリンク」を選択します。
2. URLを入力します。

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

wp-cocoon.com

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

// ショートコード属性を変更
add_filter('shortcode_atts_get_widget_entry_card_link_tag', function ($out, $pairs, $atts) {
  // カスタムリンク以外の場合
  if (($out['object'] ?? '') !== 'custom') {
    return $out;
  }

  require_once dirname(__FILE__) . '/../cocoon-master/lib/open-graph.php';

  $ogp_image = get_ogp_image($atts['url']);

  if (!empty($ogp_image)) {
    $out['image_attributes'][0] = $ogp_image;
    $out['image_attributes'][1] = THUMB320WIDTH_DEF;
    $out['image_attributes'][2] = THUMB320HEIGHT_DEF;
  }

  return $out;
}, 10, 3);


/**
 * 指定したURLからOGP画像のURLを取得
 *
 * 自サイトのURLの場合は、該当投稿のアイキャッチ画像を返す。
 * 外部サイトのURLの場合は、Open Graphに基づいてog:imageを取得し返す。
 *
 * @param string $url 対象ページのURL
 * @return string OGP画像のURL、または代替画像のURL
 */
if (!function_exists('get_ogp_image')):
function get_ogp_image($url) {
  if (empty($url) || !filter_var($url, FILTER_VALIDATE_URL)) {
    return esc_url(get_no_image_url());
  }

  // 自サイトのURLか確認
  if (strpos($url, home_url()) === 0) {
    $post_id = url_to_postid($url);
    if ($post_id && has_post_thumbnail($post_id)) {
      return esc_url(get_the_post_thumbnail_url($post_id, 'medium'));
    }
    return esc_url(get_no_image_url());
  }

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

  if ($cached !== false) {
    return esc_url($cached);
  }

  // OGP画像を取得
  $graph = OpenGraphGetter::fetch($url);
  $image_url = !empty($graph->image) ? $graph->image : get_no_image_url();

  // キャッシュデータを保存
  set_transient($cache_key, $image_url, 1 * HOUR_IN_SECONDS);

  return esc_url($image_url);
}
endif;