【今更聞こう 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としてコード書き換えてくれました。

そのため、記事数が増えても、管理画面から投稿するだけで、その投稿に応じた、画像を表示してくれます！

これって、結局、最初に書く、面倒くささはありますが、その後の面倒ささはゼロです！

プログラミングとは、面倒くさいことなくして、楽するのが目的！

楽するために、努力するというマインドですね！！

めちゃいい考え方ですよね♪

引き続き、楽するためにがんばりましょう！！