WordPressテーマ「Cocoon」でアイキャッチ画像に外部URLを当てる方法

2021年8月16日

WordPressで人気の無料テーマCocoonを使ってブログを作っているときに、アイキャッチ画像のために別のサーバに置いてある画像を当てられたらな～と思ってカスタマイズしてみました。

対象テーマの情報

親テーマのCocoonですが、古いバージョン1.8.6で直カスタマイズをしてしまいました。子テーマもちょっといじっているという方向性がグレーなやつです。どこかのタイミングでバージョンアップをしたいですね…

ノーカスタマイズの場合

アイキャッチを設定していると、設定した画像がブログの一番上に出たり、SNSで共有されたときに表示されます。特に設定していなくても、一番最初に出てきた画像をアイキャッチとして使う機能がCocoonにはあったりします。

ただ・・・

一番最初の画像が、外部サーバにあるものだと表示されません。

今回はこれをカスタマイズします。

カスタマイズの注意

テーマのfunction.phpだったり、その他のコアなphpファイルを直書きしているので最悪の場合、wordpressの管理画面に入れなくなってしまいます。その場合でも自力で復帰できる方はお試しください！

カスタマイズ方法

まずはアイキャッチ画像を表示するための関数を子テーマのfunction.phpに作ります。

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
  
    if(empty($first_img)){
        // 記事内で画像がなかったときのためのデフォルト画像を指定
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

function pid_catch_that_image($pid) {
    $pid_post;
    $first_img = '';
    ob_start();
    ob_end_clean();
	$pid_post = get_post($pid);
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $pid_post->post_content, $matches);
    $first_img = $matches [1] [0];
  
    if(empty($first_img)){
        // 記事内で画像がなかったときのためのデフォルト画像を指定
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

関数としては2パターン用意しました。catch_that_image()は投稿ページでの使用を想定しています。引数なしに呼び出すと、記事内で使われている一番最初の画像のURLを正規表現で抜き出して返します。

pid_catch_that_image($pid)は、人気記事のウィジェットでの使用を想定しており、対象の記事IDを与えると、その記事内で使われている一番最初の画像のURLを返します。

各ページのカスタマイズ

ページのアイキャッチは「tmp/eye-catch.php」で編集できますが、正規のアイキャッチが設定されていないときは一番最初の画像をアイキャッチにするため、2重表示されるので今回は割愛しています。

ブログカードだったり、SNSカードの表示はこちら↓

…
 // サムネイルを持っているとき
      if ( has_post_thumbnail() && $thumbnail_tag ): ?>
        <?php echo $thumbnail_tag;
        //the_post_thumbnail(get_entry_card_thumbnail_size() , array('class' => 'entry-card-thumb-image card-thumb-image', 'alt' => '') ); ?>
      <?php else: // サムネイルを持っていないとき ?>
        <?php //echo get_entry_card_no_image_tag($count); ?>
		<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />
      <?php endif; ?>
      <?php the_nolink_category(null, apply_filters('is_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
    </figure><!-- /.entry-card-thumb -->
…

人気記事のウィジェットはこちら↓

…
  //var_dump($records);
  $thumb_size = get_popular_entries_thumbnail_size($entry_type);
  ?>
  <div class="popular-entry-cards widget-entry-cards no-icon cf<?php echo get_additional_popular_entry_cards_classes($entry_type, $ranking_visible, $pv_visible, null); ?>">
  <?php if ( $records ) :
    $i = 1;
    foreach ($records as $post):
      $permalink = get_permalink( $post->ID );
      $title = $post->post_title;
      //$no_thumbnail_url = get_template_directory_uri().'/images/no-image-320.png';
      $no_thumbnail_url = ($entry_type == ET_DEFAULT) ? get_no_image_120x68_url() : get_no_image_320x180_url();
      $w   = ($entry_type == ET_DEFAULT) ? THUMB120WIDTH  : THUMB320WIDTH;
      $h   = ($entry_type == ET_DEFAULT) ? THUMB120HEIGHT : THUMB320HEIGHT;
      //$no_thumbnail_url = get_no_image_320x180_url();

      $post_thumbnail = get_the_post_thumbnail( $post->ID, $thumb_size, array('alt' => '') );
      $pv = $post->sum_count;

      if ($post_thumbnail) {
        $post_thumbnail_img = $post_thumbnail;
      } else {
        //$post_thumbnail_img = '<img src="'.esc_url($no_thumbnail_url).'" alt="" class="no-image popular-entry-card-thumb-no-image widget-entry-card-thumb-no-image" width="'.$w.'" height="'.$h.'" />';
        $post_thumbnail_img = '<img src="'.pid_catch_that_image($post->ID).'" alt="'.$title.'" />';
      }
…

すごく抜粋で申し訳ないのですが、「$post_thumbnail_img」を検索して、もともとの$post_thumbnail_img=をコメントアウトして次の行に追加しています。