【今更聞こう WordPress! 第５回「変数」編】 個人投資家のFIREへの旅路 第159 夜
本日は、WordPressのブログページ（sigle.php)のアイキャッチ画像の設定方法を解説します。
【functions.php】
まず、WordPressには、テーマという概念があり既存のテーマを使用したり、テーマを自作したりできます。
テーマを自作している場合には、アイキャッチ画像をテーマがサポートするか設定できます。デフォルトでは、サポートしない設定となります。
つまり、管理画面から投稿をしても、アイキャッチ画像を設定する項目がない状態です。
これを設定できるようにする必要があります。
まずは、このファイルを作ります！
functions.php
その中に、
<?php
add_action('init', function(){
add_theme_support('post-thumbnails');
});こちら書きます。そうすると、投稿画面にアイキャッチ画像を設定する項目が追加されます。
<!POINT!> functions.phpとは、WordPressの設定のカスタマイズ等を書くためのファイル。必ずこの名前にする必要あり。
管理画面→「投稿」で記事を編集するページにいくと・・・
はい！ 右下に「アイキャッチ画像」という項目が追加されます。
こちらから、画像を選択して登録ができます。
この画像の登録は、管理画面→メディア→ライブラリ→新規追加
で、追加できます。
このライブラリの保存いている画像は、WordPressで必要な場所に読み込むことができます。
【アイキャッチ画像を表示する】
<?php the_post_thumbnail(); ?>このコードは、WordPress独自のテンプレートタグです。
さらに細かく編集する場合は、
<?php the_post_thumbnail(array(30,30)); ?> ( ) の中に、array(30,30) を追加しました。
arrayは配列を意味しますが、ここでは、気にしなくてOK！
30 , 30という数字は、画像の縦横サイズです、ここの数字は自由に入れて、サイズを調整しましょう！
【アイキャッチ画像を必要な場所に貼る】
<? php
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id);
?>
<header class ="header" style="background-image:url('<?php echo $img[0]; ?>') >
上のコードは、アイキャッチ画像を、ブログページのヘッダー部分にの、背景（background)に入れるコードです。
ライブラリの保存した画像には、自動でid番号が振られます。これを取り出して、wp_get_attachiment_image_src()；の()内に入れれば、画像を指定して表示できる！そのIDを持った画像のurlを取得するということ！
＜ テンプレートタグの解説 ＞
<!POINT!> get_post_thumbnail_id(); は投稿のアイキャッチ画像がセットされている場合は、そのIDを返す（取ってくる）
<!POINT!> wp_get_attachment_image_src(); はWordPressのテンプレートタグで、ライブラリに保存した画像のurlを返す（取得する）。() の画像のID番号を入れることで画像を指定できる。
この２つのテンプレートタグを組み合わせると、
get_post_thumbnail_id(); → ID取得
wp_get_attachment_image_src(); → 指定IDの画像のurlを返す
この組み合わせで、指定IDを持つ、画像のURLを取得できそうですね！
その前に、「$ 」マークが気になります。
＜ 変数 ＞
上のコードには、
「$id= 」「$img=」という文字があります。
この「$」マークは、「変数」を作る時に使います。プログラミング感ありますよね〜！
つまり、
「$id = 」 の意味は、「変数名id=」ということ！
$id = get_post_thumbnail_id(); の意味は
「変数名idは、get_post_thumbnail_id();です。」
考え方は、少し違って、
get_post_thumbnail_id();を、変数名id に、代入（入れる）する
という風に考えます。
プログラミングにおいて、「＝」は、数学の「イコール」と同じような意味ですが、「右辺を左辺に代入する」ことを意味します。
そう考えると、
$id = get_post_thumbnail_id(); の意味は get_post_thumbnail_id(); で IDを取得して、$idに代入（入れる）する
という意味になります。
結果的にどうなるかというと、（仮にID10とすると）
$id = 10
このような数字に置き換わって、ブラウザ上で認識されます。
<!POINT!> ＄マークは、変数名の宣言。$○○は○○という変数を作るということ。変数名は、自由に設定できる。
<!POINT!> 「=」は、プログラミングにおいては、「右辺を左辺に代入する」という意味。
同じように、
$img = wp_get_attachment_image_src( $id);
の意味は、
wp_get_attachment_image_src($id); → $idの画像のurlを返す
この動きを$imgに入れる（代入する）
ということになります。
わかりやすく考えると、
$img は、$idで指定したIDもつ、画像のurlが入るということ
$img = 'http://wp-content/uploads/2021/08/pexels-andrea-piacquadio-972995-1024x683.jpg '
こんな感じの画像のurlが入ってる状態ということ！
＜ 変数の組み合わせ ＞
$id = get_post_thumbnail_id(); ・・・①
$img = wp_get_attachment_image_src($id); ・・・②
さて、この２つの変数の意味を見ていきましたが、結局を何をしてるねんという話です。こういうこと↓
アイキャッチ画像があれば、そのID番号を $idの中に入れる（代入する）。
（※仮にアイキャッチ画像のIDを10とします！）
$id = 10
と書き変わる。
そうなると、こちらも書き変わる
$img = wp_get_attachment_image_src(10); ・・・②
そうなると、
wp_get_attachment_image_src(10); ・・・②
このコードが実行される
ライブラリの中の、ID10の画像のURLを取ってくる（返す）
すると、こう書き変わる
$img = 'http://wp-content/uploads/2021/08/pexels-andrea-piacquadio-972995-1024x683.jpg ' ・・・②
＜ 変数をコードに入れる ＞
こうして取得できた、画像のURLを背景に指定したいので、
CSSのbackground-imageを使って、書いていきます。
<header class ="header" style="background-image:url('<?php echo $img[0]; ?>') ">
ここでは、<?php echo $img[0];?> というphpがでてきました。
echoは、表示すると覚えておけば良いでしょう！
ここで謎の[0]の文字が！！
これは、配列の０番目を指定しているということです！
意味わかりませんよね〜！！
【 wp_get_attachment_image_src(); 】
こいつは、( )内で指定したIDを持つ画像のURLを返す
という役割がありましたが、
これにはある決まりがあります。
wp_get_attachment_image_src(● , ' ▲ ');
この●の箇所には、画像のIDを整数で入れなければなりません。
▲の箇所には、画像のサイズを、thumbnail, medium, large, full の中から選んで、指定できます。指定しない場合は、thumbnail というサイズが自動で設定されます。つまり指定しなくてもOK。空白でもOK。
今回は、●の箇所に必要なIDの整数を$id で取得しましたね。
▲の箇所の画像サイズは指定していませんでした。この画像サイズは
thumbnail, medium, large, full の４種がありますが、
これは、WordPressの管理画面→設定→メディア と進むと、
サムネイルのサイズ、中サイズ、大サイズという項目があり、
そこで入力した幅と高さの数値が反映されます。
この箇所の入力は、' large 'など、シングルクォーテーション（ ' )が必要です。
ということで！
先程の、[ 0 ] 問題ですが、
$img = wp_get_attachment_image_src(10);
は、10というIDを指定していて、サイズは指定していないので、
自動で、thumbnailが指定されているわけです。
わかりやすくするため、サイズを指定すると、
$img = wp_get_attachment_image_src(10, 'large' );
こうなります。
ライブラリの中の、ID番号10の画像のURLを取得する。
画像サイズは、largeで！
という意味になります。
この２つの情報は、
配列 として返ってくるということでしたので
０番目の情報：ID１０ のURL
１番目の情報：largeのwidth （大サイズの幅の数値）
２番目の情報：largeのheight（大サイズの高さの数値）
このような情報として返ってきます。
返ってくるという表現がわかりにくいんですよね！
このような情報の形に変換されるという感じですね！
つまり、
[ 0 ] 番目の情報 ＝ ID１０の画像URL
[ 1 ] 番目の情報 ＝ 画像のwidth
[ 2 ] 番目の情報 ＝ 画像のheight
これでもうわかりましたね！
style="background-image:url('<?php echo $img[0]; ?>') ">
ここで指定している[ 0 ] とは、
[ 0 ] 番目の情報 ＝ ID１０の画像URL
というわけです！
なので、ブラウザでは、このように書き換えられています。
style="background-image:url('http://wp-content/uploads/2021/08/pexels-andrea-piacquadio-972995-1024x683.jpg ') ">
これで、背景（background-image）に、画像のurlを指定できました！
【まとめ】
正直、めんどくせぇ！！でしょう。
それなら、変数とか使わずに、直接ID番号をコードに書けばいいやろという話です！
しかし、それでは、WordPressを使う意味がありません。
WordPressは、管理画面の情報と、ホームページの情報がリンクしていて、管理画面での編集が、ホームページにも反映させるわけです。
なので、コードを書けない人も、簡単に編集ができる。
コードにIDを直書きしてる状態では、画像を変更する際に、HTMLやCSSを編集する必要ができてきます。
そして、ブログを投稿するたびに、そのブログの数だけ、画像ファイルのID番号を書き換えていく必要があります。
PHPを使って、変数を使って、コードを書いておけば、ブログ投稿の編集ページで指定した、アイキャッチ画像のIDを取得して、URLとしてコード書き換えてくれました。
そのため、記事数が増えても、管理画面から投稿するだけで、その投稿に応じた、画像を表示してくれます！
これって、結局、最初に書く、面倒くささはありますが、その後の面倒ささはゼロです！
プログラミングとは、面倒くさいことなくして、楽するのが目的！
楽するために、努力するというマインドですね！！
めちゃいい考え方ですよね♪
引き続き、楽するためにがんばりましょう！！
この記事が気に入ったらサポートをしてみませんか？