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

2019年9月21日Wordpress, プログラミング

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

対象テーマの情報

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

ノーカスタマイズの場合

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

ただ・・・

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

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

カスタマイズの注意

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

カスタマイズ方法

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

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

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

各ページのカスタマイズ

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

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

 

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

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

カスタマイズのお約束

テーマのバージョンが変わるとソース構成が変わったり、表示の仕方が変わったりして使えなくなる可能性が十分あります。