【詳細解説】記事内最初の画像をアイキャッチ画像にする方法｜WordPress
日常を投稿するブログなどのときに、
アイキャッチ画像を作ったり設定したりするのはひと手間かと思います。
ということで、
記事内の1番目の画像をアイキャッチ画像に使用する方法です。
- アイキャッチ画像を設定した場合、それを表示。
- アイキャッチ画像を設定していなく記事内に画像がある場合は、記事内の1枚目の画像を表示。
- アイキャッチ画像を設定していなく記事内に画像がない場合は、任意のデフォルト画像を表示。
という3段構えで、なにかしらの画像がアイキャッチに入るようになっています。
1番目の画像をアイキャッチ画像に使用するための記述
アイキャッチ画像表示のための準備
▼ functions.php
function catch_first_image() {
global $post, $posts;
if(has_post_thumbnail()) { //アイキャッチ画像が設定されている場合
$img_id = get_post_thumbnail_id();
$img_url = wp_get_attachment_image_src($img_id, 'thumbnail', true);
$first_img = $img_url[0];
} else{ //アイキャッチ画像が設定されていない場合
$first_img = '';
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); //記事内に画像があるか調べる
$first_img = $matches [1] [0]; //1枚目の画像を指定
if(empty($first_img)) { //記事内に画像がなかった場合
$first_img = esc_url(get_template_directory_uri()) . "/img/no_picture.jpg"; //デフォルト画像を指定
}
}
return $first_img;
}これをfunctions.phpに記述します。
ここで、「アイキャッチ画像→記事内の1番目の画像→任意のデフォルト画像」の優先順位でURLを取得する設定をします。
実際にアイキャッチ画像を表示させる
画像としてそのまま表示させる場合
▼ front-page.phpなどアイキャッチ画像を表示させたいファイル
<img src="<?php echo catch_first_image(); ?>" alt="" />画像として表示させる場合はimgタグのsrc=””のなかで catch_first_imageを出力させてあげます。
背景画像としてアイキャッチを表示させる場合
<div style="background: url('<?php echo catch_first_image(); ?>') center center / cover no-repeat;" ></div>背景画像として表示させる場合はこんな感じです。
アイキャッチ画像は比率が異なるものや縦の画像が入ることも想定されます。
私は、サイズを揃えてキレイに表示させるために背景画像として表示させています。
CSSでwidth:100%に、高さはheightを数値で指定するか、padding-topで％指定しています。
これでアイキャッチ画像がない場合に記事内の1番目の画像をアイキャッチ画像として表示できます。
functions.phpの深堀り
functions.phpの記述について、他のブログでは深堀りしているものがほとんどなかったので流れをまとめてみました。
アイキャッチ画像が設定されている場合（4行目）といない場合（8行目）に分ける
if(has_post_thumbnail()) { //アイキャッチ画像が設定されている場合
・・・
} else{ //アイキャッチ画像が設定されていない場合
・・・
}if構文でアイキャッチがある場合とそれ以外の場合で場合分けします。
関数リファレンス/has post thumbnail – WordPress Codex 日本語版
アイキャッチ画像が設定されていれば、その画像のURLを$first_imgに格納（5～7行目）
if(has_post_thumbnail()) { //アイキャッチ画像が設定されている場合
$img_id = get_post_thumbnail_id();
$img_url = wp_get_attachment_image_src($img_id, 'thumbnail', true);
$first_img = $img_url[0];
}『 get_post_thumbnail_id 』で設定されたアイキャッチ画像のidを調べます。
それを使って『 wp_get_attachment_image_src 』でアイキャッチ画像のいろいろな情報を$img_urlに格納。
『 $img_url[0] 』で$first_imgに画像URLを格納します。（[0]がURLを示す。）
テンプレートタグ/get post thumbnail id – WordPress Codex 日本語版
関数リファレンス/wp get attachment image src – WordPress Codex 日本語版
アイキャッチ画像が設定されていない場合
ここからは、アイキャッチ画像が設定されていない場合のelse{}内の記述です。
記事内にimgタグがあるか調べ（10行目）、 記事内1枚目の画像のURLを$first_imgに格納（11行目）
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); //記事内に画像があるか調べる
$first_img = $matches [1] [0]; //1枚目の画像を指定『 preg_match_all(‘検索する文字列’, 検索対象となる場所, 検索結果を入れる場所) 』で投稿のコンテンツ内にimgタグがあるか検索し、$matchesに格納します。
検索する文字列『 /<img.+src=[\'”]([^\'”]+)[\'”].*>/i 』は正規表現です。
ざっくり説明すると、
『 <img 』
『 .+ 』＝1文字以上なにか書いてある
『 src= 』
『 [\'”] 』＝’または”
『 ([^\'”]+) 』＝’または”以外の文字が1文字以上書いてある
『 [\'”] 』＝’または”
『 .*』＝0文字以上なにか書いてある
『>』
つまり、<img ～ src=”～” ～ >という文字列があるか調べます。
続いて『 $matches[1][0] 』でサブパターン（＝正規表現中の()で囲まれた部分）のなかで1番目の文字列、
つまりimgタグのurl部分で1番目の文字列を$first_imgに格納します。
$first_imgが空だった場合（13行目）は、任意の画像のURLを $first_imgに格納（14行目）
if(empty($first_img)) { //記事内に画像がなかった場合
$first_img = esc_url(get_template_directory_uri()) . "/img/no_picture.jpg"; //デフォルト画像を指定
}記事内に画像がなければ$first_imgは空になります。
もし空の場合、$first_imgに画像がない場合にデフォルトで表示させたい画像を設定します。
『 /img/no_picture.jpg 』の部分は好きな画像をテーマフォルダにアップロードし、その画像のパスに変えてあげてください。
最後に$first_imgを返す。（17行目）
return $first_img;最後にreturnで$first_imgを返します。
WordPressの勉強するならこの一冊
私自身、この1冊から始めて今でもずっと見返す一冊です。
