【今更聞こう WordPress !第6回「関数function」編 】個人投資家のFIREへの旅路 第166夜

日本語の弊害を感じる言葉「関数」。数字じゃないのよね。処理の詰め込みパックと考えましょう！

さて、WordPressでの「関数」の勉強です！functions.phpというファイルを使って、オリジナルの関数の書き方を解説します。

【関数】 function

＜復習＞

こちらの記事でやったアイキャッチ画像を設定するコードを元に進めます。

前回は、

   <? php 
   $id = get_post_thumbnail_id();
   $img = wp_get_attachment_image_src($id);
   ?>
   
   <header class ="header" style="background-image:url('<?php echo $img[0]; ?>') >
   
   

$○○ という表記をする、「変数」について学びました。

上記のコードは、

$id　と　$img　という変数を定義して、$img をbackground-imageのurlの部分に入るようにしました。

これは、single.phpという「投稿ページ」のレイアウト用に書いたのですが、

同じような処理を別のページのレイアウトでも使いたいという時に、ひとまとまりの処理を「関数(function)」にまとめる事で、使いまわせるようにします！

＜関数＞

/* functions.phpに書いています */          ・・・・・・・・・・①


function get_eyecatch()　　　　　　　　・・・・・・・・・・②
{
   if (has_post_thumbnail()) :　　　　　　　　　　・・・・・・・・・・・・③
   
       $id = get_post_thumbnail_id();　　　　　・・・・・・・・・・・・④
       $img = wp_get_attachment_image_src($id, 'large');　　　　　・・・・・・・・・・・・⑤
  
   endif;   
   
   return $img;　　　　　　・・・・・・・・・・・・⑥
}

今回のコードの完成形はこちらです。順番に見ていきましょう！

①＜　functions.phpに書く　＞

functions.phpという名前のファイルを作ります。名前はこの名前でないけレバ、WordPressで正常に機能しませんの注意です！

②＜　function get_eyecatch() {   }　＞　

これが、関数の宣言の部分です。

function abc() と書けば、abcという名前の関数を作ることができます。

上記に書いてある「get_eyecatch()」 の部分の名前の付け方は自由です。

今回は、アイキャッチ画像を取得するための関数のため、このような名前をつけています。

関数に持たせる機能に応じたわかりやすい名前をつければOKです！

{    }   の中身が、関数の処理の内容となります。

③＜　if (has_post_thumbnail()) :　〜 endif;＞

「has_post_thumbnail」は、WordPress独自のタグ、テンプレートタグです。アイキャッチ画像が設定されているかどうかを判定する役割です。

全体の意味としては、「もし（if）アイキャッチ画像があったら」の意味です。その、もし（if ）の有効範囲は、endif;　までとなります。

④＜　$id = get_post_thumbnail_id();　＞

こちらは、前回の出てきた「変数」ですね。$id という変数は、get_post_thumbnail_id();　です。という意味です。

get_post_thumbnail_id();は、WordPressのテンプレートタグで、投稿にサムネイルがある場合は、そのid番号を取得します。

⑤＜$img = wp_get_attachment_image_src($id, 'large'); ＞

こちらも、変数です。$img という変数は、

wp_get_attachment_image_src($id, 'large');　です。と宣言していて

wp_get_attachment_image_src($id, 'large');　は、WordPressのテンプレートタグです。　指定した画像ファイルのurl、width、heightを　配列で返します。

つまり、$id でとってきたid番号を持つ、画像ファイルのurlの情報を取ってきます。

⑥＜　return $img;　＞

今回の関数は、アイキャッチ画像を表示させるという処理をまとめとものでした。なので、結局のところ、なんの情報が欲しいかというと、アイキャッチ画像のurlの情報となります。

なので、get_eyecatch()　という関数を使ったら、urlの情報を出して欲しいわけです。このことをプログラミング界隈では、「返り値」「戻り値」と呼びます。

今回の関数の「返り値」「戻り値」として欲しいのは、

$imgの中身の、wp_get_attachment_image_src($id, 'large');　

これ！

つまり、画像のurlですね！

なので、

return $img　と書くことで、関数の「返り値」「戻り値」　に$imgを設定しているということです。

【関数の呼び出し】

functions.phpの中で、定義した関数は他のファイルで呼び出して使う事ができます。

今回は、アイキャッチ画像を表示したい時に使うので、例えば、ページのヘッダーの背景に設定したい時はこのように呼び出します。

<!-- Page Header -->

 <?php
   $eyecatch = get_eyecatch();   ・・・・・・・・①
 ?>
 
 <header class="header" style="background-image: url('<?php echo $eyecatch[0]; ?> ')">　　　　　・・・・・・・・・②

この書き方は、前回の変数の時と同じですね！

①＜　$eyecatch = get_eyecatch(); 　＞

この部分は、$がついているので、変数ですね。eyecatchという名前の変数を宣言しています。この命名は自由です。

$eyecatch　は、get_eyecatch()　だと宣言しています。

このget_eyecath()こそ、先程、作った関数の名前です！

「イコール」は、代入の意味でしたので、

$eyecatchに、関数get_eyecatchで設定した「返り値」「戻り値」の$imgの内容が入るということ！！

$img　は　wp_get_attachment_image_src($id, 'large');　でしたので、

画像のurlの情報が、$eyecatchに入ることになります。

②<header class="header" style="background-image: url('<?php echo $eyecatch[0]; ?> ')">　

そして、

こちらのコードは、header　の背景（background）の画像（image）を指定するコードですね。

指定するための、url は、先程取得してきた、$eyecatchの中に入っていますので、url('<?php echo $eyecatch[0]; ?> ')　このように書きます。

＄eyecatchの０番目[0]の情報を、表示（echo）する　という意味です。

なぜ０番目かというと、上の⑤で書いたように、

wp_get_attachment_image_src($id, 'large');　は、WordPressのテンプレートタグです。　指定した画像ファイルのurl、width、heightを　配列で返します。

url、width、height の情報を　配列で返す　

つまり、

[0]番目の情報は、url

[1]番目の情報は、wifth

[2]番目の情報は、height

なので、urlの情報だけを持ってくるために、

[0]　と書くことで、０番目の情報を配列から指定して取ってきています。

この辺が、プログミング感万歳でややこしいところですね〜！！

挫折ポイントです。

意味がわからなくて当然！そのうちわかる！と

今は楽観視でOKです！

立ち止まることが一番ダメですよー！

【まとめ】

今回は関数を学びました！　関数というとなんだかややこしくてめんどくさそうですが、

簡単に言えば、何回も使う処理をまとめて、名前をつけて保管しているだけのこと！

一度書いてしまえば、呼び出すだけで、その処理ができるので、めちゃめちゃ楽ですね。

このように、WordPressの学習は、HTML、CSSのみのサイトでは、扱わない、バックエンド的なコードも出てきます。

まさに、プログラミング！　って感じでかっこいいすね。

そして、挫折ポイントでもあります。

実際に、僕は、以前挫折して、WordPressなんていらんやろ！っと思ってました。

しかし、様々な案件を見ていくと、WordPressの必要性が見えてきます。

挫折しながらも、再度取り組みました。

そんな感じで、とにかく、止まらないことが大切ですね！