新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

WordPress

投稿内の最初の画像をアイキャッチにする方法【WordPress】

2019.2.28

投稿内の最初の画像をアイキャッチにする方法【WordPress】
WordPress 0 0

こちらの記事は、このような方におすすめです。

・WordPressによるホームページで「投稿一覧」の各々の投稿のイメージ画像を設定したい方

WordPressでホームページを制作する場合に、投稿の新着一覧で「タイトル」「公開日付」「本文(抜粋)」以外にも、

「投稿のイメージ写真」

のようなものがあれば記事を判別しやすそうですよね?

でも、記事本文を入力して、さらにイメージ画像までアップロードしてとなると、作業は少しでも、記事をたくさん更新するホームページでは特に気になってしまうかもしれません。

もしも「イメージ画像は何でもいいんだけど…」という場合は、投稿記事内で最初に表示させる画像をイメージ画像にするという方法はいかがでしょうか?

この記事では、その設定方法をご紹介します。

この記事の目次

【結論】記事内の最初の画像を取得する方法

結論から行きます。

お使いのWordPressのテーマファイルの[functions.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/noImg.jpg"; // 画像のフォルダ名・ファイル名に応じて自由に変更
}
return $first_img;
}

上記を追加したうえで、投稿内の最初の画像を表示させたい場所のimgタグを下記のように記述してみてください。

(もちろんですが、altやwidth、heightなどの属性はご自由に追加していただいてOKです。)


これで、投稿一覧のページなどで、その投稿で最初に使われている画像のURLが取得できるか、投稿のない記事であればデフォルト画像(上記コードにおける[noImg.jpg]に該当)が表示されるでしょう。

デフォルト画像は事前にご用意されることをお勧めします(特にご希望などない場合、ホームページのロゴ画像などで問題ないかと思います)。

ページの先頭へ戻る

【詳細】記事内の最初の画像を取得する処理について

上記の関数[catch_that_image()]では、投稿内のimgタグのsrc属性の値を取得して、投稿内で最初のものを変数[$first_img]にセットしています。

また、[$first_img]の値が空、つまり画像を使っていない投稿ではデフォルト画像をセットするというのが処理の概要です。

この関数のメリットとしては、本文を入力した後に「イメージ画像」のようなカスタムフィールドを入力する手間が省けることが挙げられます。

また、制作者側としても「カスタムフィールドを設ける工数」が省略できる点ではメリットといえるでしょう。

一方のデメリットについてです。

関数の処理としては、投稿内のimgタグのsrc属性にセットしている値があれば、その最初の値を無条件に取得しています。

つまり、取得した値がそもそもURLの形式でない場合や、URLの参照先に画像が存在しない場合は、[catch_that_image()]で何も表示されない可能性があるのです。

WordPressの「メディア」から表示画像を設定している場合や画像URLをコピー&ペーストしている場合は問題ないかもしれませんが、ホームページをリニューアルした場合など、旧サイトからの画像の移行に「漏れ」が考えられる場合は注意が必要です。

ページの先頭へ戻る

参考サイト

こちらの記事を投稿するにあたり、下記のページを参考にさせていただきました。

ありがとうございました。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ