<span class="new-txt">New!</span>他サイトのお勧め記事をナビカード(navi_list)のカスタムリンクで表示(Cocoon) | OFFのパソコン日記

New!他サイトのお勧め記事をナビカード(navi_list)のカスタムリンクで表示(Cocoon)

ある団体のホームページ(cocoon wordpress)を運営しています。

まとめサイトで「ナビカード(navi_list)」を使い、他サイトのお勧め記事を表示しようと思いました。

しかし、カスタムリンクで他サイトの投稿を設定すると、アイキャッチ画像は「NO IMAGE」画像となり、指定した画像が表示されません。

ネットをググって、functions.php にコードを追加することで、カスタムリンクでも他サイトのアイキャッチ画像を取得できるようにしました。

しかし、この方法では他サイトからOGP画像を取得する際にページの表示速度が遅くなる問題が発生しました。

そこで、ChatGPTのサポートを受け、以下の対策を行いました。
WordPressのキャッシュ機能を活用して、取得した画像URLを一時的に保存する仕組みを導入しました。これにより、再アクセス時にはキャッシュに保存された画像URLを使用し、ページ表示の高速化を図ることができました。

//ナビカードでメニューのカスタムリンク設定を可能として、外部サイトのアイキャッチを取得
//OGP画像の取得に時間がかかかりページ表示が遅くなるため、OGP画像をキャッシュするコードに変更
// ナビカードイメージ属性の取得
if ( !function_exists( 'get_navi_card_image_attributes' ) ):
function get_navi_card_image_attributes($menu, $type = ET_DEFAULT){
$url = $menu->url;
$object_id = $menu->object_id;
$object = $menu->object;

$is_large_image_use = is_widget_entry_card_large_image_use($type);
$thumb_size = $is_large_image_use ? THUMB320 : THUMB120;

// キャッシュキーを生成
$cache_key = 'og_image_' . md5($url);
// キャッシュされた画像属性を取得
$image_attributes = get_transient($cache_key);

// キャッシュが存在しない場合のみ処理を行う
if ($image_attributes === false) {
// 大きなサムネイル画像を使用する場合
$image_attributes = array();
$post_types = get_custum_post_types(); 

// 投稿ページ・固定ページ・カスタム投稿ページ
  if ($object == 'post' || $object == 'page' || in_array($object, $post_types)) {
      $thumbnail_id = get_post_thumbnail_id($object_id);
      $image_attributes = wp_get_attachment_image_src($thumbnail_id, $thumb_size);
  } elseif ($object == 'category') { // カテゴリーアイキャッチの取得
      $image_url = get_the_category_eye_catch_url($object_id);
      $thumb_id = attachment_url_to_postid($image_url);
      $thumb_img = wp_get_attachment_image_src($thumb_id, $thumb_size);
      if (isset($thumb_img[0]) && $thumb_img[0]) {
          $image_url = $thumb_img[0];
      }
      $image_attributes = get_navi_card_image_url_attributes($image_url, $type);
  } elseif ($object == 'post_tag') { // タグアイキャッチの取得
      $image_url = get_the_tag_eye_catch_url($object_id);
      $thumb_id = attachment_url_to_postid($image_url);
      $thumb_img = wp_get_attachment_image_src($thumb_id, $thumb_size);
      if (isset($thumb_img[0]) && $thumb_img[0]) {
          $image_url = $thumb_img[0];
      }
      $image_attributes = get_navi_card_image_url_attributes($image_url, $type);
  } elseif ($object == 'custom') { // カスタムメニュー
      // カテゴリーページのアイキャッチを取得
      $category_obj = url_to_category_object($url);
      if ($category_obj && isset($category_obj->term_id)) {
          $image_url = get_the_category_eye_catch_url($category_obj->term_id);
          $image_attributes = get_navi_card_image_url_attributes($image_url, $type);
      } else {
          // タグページのアイキャッチを取得
          $tag_obj = url_to_tag_object($url);
          if ($tag_obj && isset($tag_obj->term_id)) {
              $image_url = get_the_tag_eye_catch_url($tag_obj->term_id);
              $image_attributes = get_navi_card_image_url_attributes($image_url, $type);
          } else {
              // 外部リンクとして処理
              // カスタムリンクURLのog:imageを取得
              $graph = OpenGraphGetter::fetch($url);
              if (isset($graph->image)) {
                  $feed_img = $graph->image;
                  // [C]ナビカードのサムネイルとして設定
                  $image_attributes[0] = $feed_img;
                  $image_size = getimagesize($feed_img);
                  $image_attributes[1] = $image_size[0]; // 幅
                  $image_attributes[2] = $image_size[1]; // 高さ
              }
          }
      }
  }

  // OGP画像が取得できた場合、キャッシュを設定
  if ($image_attributes) {
      // キャッシュを12時間保持
      set_transient($cache_key, $image_attributes, 12 * HOUR_IN_SECONDS);
  }
}

return $image_attributes;
}
endif;