BLOG

  • Facebook
  • Twitter

WordPressで記事内の最初の画像をアイキャッチ代わりに使う方法

WordPressで記事のアイキャッチ画像を指定していなくても、記事内の最初の画像を勝手に取得してアイキャッチ代わりに使ってくれたら便利ですよね。

今回はそんな便利なカスタマイズに役立つコードをご紹介します。

まず記事内の一番目にある画像を取得する

アイキャッチ代わりとなる記事内の最初の画像を取得するために、WordPressテーマにあるfunctions.phpに次のコードを書き加えてください。

preg_match_all()で正規表現検索を繰り返してimgタグを順番に取得しています。

そして、取得したimgタグの一番最初のものを$first_imgに入れています。

記事内に画像がなかった場合を想定してデフォルト画像を決めてパスを設定しておくと良いでしょう。

アイキャッチ画像の有無で条件分岐

取得した画像をアイキャッチ代わりにサイト表示に使用するときのコードは次のようになります。

このようにすれば、アイキャッチ画像が設定されている場合はそのままアイキャッチ画像を表示し、アイキャッチ画像がないときはcatch_that_image()にて作成した$first_imgの値を画像パスとしてimgタグを表示するように条件分岐できます。

参考記事

今回の記事はこちらのリンクを参考にさせていただきました。ありがとうございました!

以上、記事内の最初の画像をアイキャッチ代わりに使う方法でした。
WordPressを利用したホームページ制作にお役立てください。

それではまた!

中小企業のホームページ制作やサイトリニューアルならシンス株式会社まで。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!