ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : WordPress

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

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

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

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

preg_match_all()で正規表現検索を繰り返してimgタグを順番に取得しています。
そして、取得したimgタグの一番最初のものを$first_imgに入れています。

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

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

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

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

参考記事

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

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。