MENU

【WordPress×PHP】functions.phpの書き方

【WordPress×PHP】functions.phpの書き方
目次

はじめに

【WordPress×PHP】Localでローカル環境を作る手順では、自分のパソコンの中にWordPressのサイトを作り、SWELLと子テーマを入れました。

今回は、いよいよ子テーマのfunctions.phpにPHPを書いていきます。functions.phpは、WordPressのカスタマイズでいちばんよく使うファイルですが、書き方を間違えるとサイト全体が表示されなくなることもあります。この記事では、書くときのルールと、やってはいけない書き方を、ローカル環境で実際に試した結果とあわせて解説します。

このシリーズの全15回の構成は、第1回の記事の冒頭にまとめています。

functions.phpとは?

functions.phpは、テーマに機能を追加するためのファイルです。WordPressは、ページを表示するたびに、テンプレート(single.phpなど)より先にfunctions.phpを読み込みます。

functions.phpには、次の特徴があります。

  • サイトのすべてのページで読み込まれる(トップページ・記事・管理画面・ログイン画面も含む)
  • 子テーマと親テーマの両方が読み込まれる
  • 読み込まれる順番は、子テーマ → 親テーマ
WordPressがページを表示するときの読み込みの順番。WordPress本体、子テーマのfunctions.php、親テーマのfunctions.php、テンプレートの順に読み込まれる

すべてのページで読み込まれるということは、functions.phpに書いたコードは、サイト全体に影響するということです。書き間違えたときに、管理画面まで含めてサイト全体が「重大なエラー」になるのはこのためです(【WordPress×PHP】子テーマの導入とバックアップを解説を参照)。

SWELLの子テーマのfunctions.phpの中身

SWELLの子テーマのfunctions.phpには、最初から次のコードが書かれています(コメントの一部を省略)。

<?php

/* 子テーマのfunctions.phpは、親テーマのfunctions.phpより先に読み込まれることに注意してください。 */

/**
 * 親テーマのfunctions.phpのあとで読み込みたいコードはこの中に。
 */
// add_filter('after_setup_theme', function(){
// }, 11);

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {

	$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
	wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

	/* その他の読み込みファイルはこの下に記述 */

}, 11);

最後のadd_action()の部分は、子テーマのstyle.cssをページに読み込むためのコードです。消してしまうと、子テーマに書いたCSSが効かなくなるので、そのまま残しておきます。自分で追加するコードは、このコードの下に書いていきます。

functions.phpを開く

ローカル環境のfunctions.phpは、Localの「Site folder」から開いたフォルダの、次の場所にあります。

app/public/wp-content/themes/swell_child/functions.php

開くときは、Visual Studio Code(VS Code)などのテキストエディターを使います。Localのサイト詳細画面にある「VS Code」をクリックすると、VS Codeがインストールされていれば、サイトのフォルダをまとめて開けます。

functions.phpを書き換えて保存したら、ブラウザでサイトを再読み込みすれば、すぐに結果を確認できます。

functions.phpを書くときの4つのルール

ルール1:先頭の<?phpは消さない

functions.phpの1行目にある<?phpは、「ここからPHPのコードです」という目印です。消してしまうと、その下のコードがPHPとして実行されず、文字のままページに表示されてしまいます。

ルール2:最後に?>を書かない

【PHP】基本的な書き方を解説で解説したとおり、PHPだけのファイルでは、最後の?>を省略するのが基本です。functions.phpでは特に重要です。

?>を書いて、その後ろに空行が残っていると、空行がそのままページに出力されてしまいます。ローカル環境で試したところ、?>の後ろに空行を3行入れた状態では、ページの先頭(<!DOCTYPE html>より前)に改行が2つ出力されていました。

// …ここまでのコード

?>


見た目には分かりにくいですが、このような余計な出力があると、ログインや画面の移動がうまくいかなくなる原因になります。最後の?>は書かないようにしましょう。

ルール3:文字コードは「UTF-8(BOMなし)」で保存する

BOMは、ファイルの先頭に付く、目に見えない3バイトの印です。functions.phpをBOM付きで保存すると、そのBOMがページの先頭に出力されます。

ローカル環境で試したところ、BOM付きで保存した状態では、トップページにもログイン画面にも、<!DOCTYPE html>より前にBOMの3バイトが出力されていました。ルール2の空行と同じく、トラブルの原因になります。

VS Codeでは、画面右下の文字コードが「UTF-8」になっていれば、BOMなしで保存されます(BOM付きの場合は「UTF-8 with BOM」と表示されます)。

ルール4:関数名には自分専用の接頭辞を付ける

functions.phpで関数を作るときは、関数名の先頭にkurumico_のような自分専用の接頭辞を付けます。

PHPでは、同じ名前の関数を2回作ることはできません。WordPressやSWELL、プラグインにはたくさんの関数があるので、短い名前を付けると、名前がぶつかる可能性があります。試しに、WordPressにすでにあるget_the_title()という名前で関数を作ってみると、次のエラーになりました(ファイルの場所は一部省略)。

Fatal error: Cannot redeclare get_the_title() (previously declared in …\wp-includes\post-template.php:118) in …\swell_child\functions.php on line 25

「get_the_title()は、すでにpost-template.phpの118行目で作られているので、もう一度は作れません」という意味です。接頭辞を付けておけば、このような名前の衝突を防げます。

やってはいけない書き方:functions.phpで直接echoする

functions.phpに、次のようにechoを直接書くとどうなるでしょうか。

echo 'こんにちは';

ローカル環境で試したところ、ページの一番先頭、<!DOCTYPE html>よりも前に「こんにちは」が出力されました。

こんにちは<!DOCTYPE html>
<html lang="ja" …

しかも、トップページだけでなく、ログイン画面の先頭にも同じように出力されていました。functions.phpは、テンプレートより先に、すべてのページで読み込まれるためです。

functions.phpで直接echoした場合とフックを使った場合の出力位置の違い。直接echoすると<!DOCTYPE html>より前に出力され、wp_footerフックを使うと</body>の手前に出力される

ページの決まった場所に何かを出力したいときは、フックを使います。たとえば、wp_footerというフックを使うと、ページの最後(</body>の手前)に出力できます。

add_action( 'wp_footer', function() {
	echo '<p>こんにちは</p>';
} );

add_action()は、「WordPressの決まったタイミングで、この関数を実行してください」と登録する関数です。2つ目の引数には、【PHP】無名関数・アロー関数の使い方を解説で解説した無名関数を渡しています。フックの詳しい使い方は、第9回・第10回で解説します。

子テーマが先に読み込まれることに注意する

第1回で解説したとおり、子テーマのfunctions.phpは、親テーマのfunctions.phpより先に読み込まれます。そのため、子テーマのfunctions.phpの一番外側では、SWELLが用意している機能はまだ使えません。

ローカル環境で、SWELLの機能をまとめたSWELL_Themeというクラスがあるかどうかを調べたところ、次の結果になりました。

調べた場所SWELL_Themeクラス
子テーマのfunctions.phpの一番外側ない
after_setup_themeフックの中ある

after_setup_themeは、テーマの読み込みが終わったタイミングで実行されるフックです。SWELLの子テーマのfunctions.phpに最初から書かれている「親テーマのfunctions.phpのあとで読み込みたいコードはこの中に」というコメントは、このことを指しています。SWELLの機能を使うコードを書くときは、フックの中に書くと覚えておきましょう。

SWELL以外のテーマでも、子テーマのfunctions.phpが親テーマより先に読み込まれるのは同じです。親テーマの機能を使うコードは、フックの中に書きます。

エラーメッセージの読み方

ローカル環境では、functions.phpを書き間違えると、「重大なエラー」の画面に加えて、エラーの詳しい内容が表示されます。本番サイトでは「重大なエラー」の画面だけが表示されるので、ここはローカル環境の大きな利点です。

たとえば、functions.phpの最後に、セミコロンを付け忘れたecho 'テスト'を書くと、次のメッセージが表示されました。

Parse error: syntax error, unexpected end of file, expecting "," or ";" in …\swell_child\functions.php on line 26
エラーメッセージの読み方。Parse errorはエラーの種類、syntax error以降は原因、inの後ろはファイルの場所、on line 26は行番号を表している
部分意味
Parse errorエラーの種類(書き方の間違い)
syntax error, unexpected end of file, expecting “,” or “;”原因(ファイルの終わりに来たが、「,」か「;」が必要)
in …\functions.phpエラーが起きたファイル
on line 26エラーが見つかった行

注意したいのは、行番号です。このときecho 'テスト'を書いたのは25行目でしたが、メッセージは26行目を指していました。セミコロンの付け忘れは、次の行まで読んでから間違いに気付くため、実際の間違いは表示された行の少し前にあることがよくあります。

実務サンプル:フッターに運営年数を表示する

ここまでのルールを使って、SWELLのフッターの著作権表示の下に、「2016年から運営中(11年目)」のような運営年数を表示してみましょう。年が変わると、年数が自動で更新されます。

子テーマのfunctions.phpの、もともとあるコードの下に、次のコードを追加します。

/**
 * 運営年数の文字列を作る
 */
function kurumico_years_running( $start_year ) {
	$this_year = (int) date( 'Y' );
	$years     = $this_year - $start_year + 1;

	return $start_year . '年から運営中(' . $years . '年目)';
}

/**
 * SWELLの著作権表示の下に運営年数を表示する
 */
add_action( 'swell_after_copyright', function() {
	echo '<p class="copyright">' . esc_html( kurumico_years_running( 2016 ) ) . '</p>';
} );

保存してサイトを再読み込みすると、フッターに次のように表示されます。

SWELLのフッター。著作権表示「© kurumico-local.」の下に「2016年から運営中(11年目)」と表示されている

コードのポイントは次のとおりです。

  • 関数名に接頭辞kurumico_を付けている(ルール4)
  • 文字列を作る処理は自作の関数にまとめ、出力はフックの中で行っている(直接echoしない)
  • swell_after_copyrightは、SWELLが著作権表示の直後に用意しているSWELL独自のフック
  • 出力する<p>に、SWELLの著作権表示と同じcopyrightクラスを付けて、見た目をそろえている
  • esc_html()は、文字列を安全な形にしてから出力するWordPressの関数(第12回で解説します)

2016の部分を自分のサイトの運営開始年に変えれば、そのまま使えます。

swell_after_copyrightはSWELL独自のフックなので、SWELL以外のテーマでは使えません。ほかのテーマで試す場合は、swell_after_copyrightをwp_footerに変えると、ページの最後に表示されます(表示される位置やデザインはテーマによって異なります)。

よくある質問・エラー対処

Q. functions.phpを書き換えたのに、表示が変わりません

→ 次の3点を確認してください。1つ目は、ファイルを保存したかどうかです。2つ目は、書き換えたのが子テーマ(swell_child)のfunctions.phpかどうかです。親テーマ(swell)のfunctions.phpを開いていることがあります。3つ目は、ブラウザに古い表示が残っていないかどうかです。再読み込みしても変わらない場合は、強制的に再読み込み(WindowsではCtrl+F5)を試してください。


Q. ローカル環境で動いたコードを、本番サイトに反映するにはどうすればいいですか?

→ 本番サイトの子テーマのfunctions.phpを開き、ローカル環境で追加したのと同じコードを、同じ位置に追加します。エックスサーバーなら、ファイルマネージャで編集できます。反映する前に、前回の記事で解説した方法で、元のfunctions.phpの控えを取っておきましょう。


Q. 管理画面の「テーマファイルエディター」で書いてもいいですか?

→ ローカル環境なら問題ありません。ただし、本番サイトのテーマファイルエディターで直接書き換えるのはおすすめしません。エディターには、重大なエラーになる変更を保存しようとすると取り消す仕組みがありますが、すべての書き間違いを防げるわけではないためです。

おわりに(まとめ)

まとめ

functions.phpはサイト全体で読み込まれるファイルなので、決まったルールを守って書くことが大切です。

  • ✅ functions.phpは、管理画面やログイン画面を含むすべてのページで、テンプレートより先に読み込まれる
  • ✅ SWELLの子テーマに最初からあるコードは残し、その下に追加する
  • ✅ 最後に?>を書かない、UTF-8(BOMなし)で保存する
  • ✅ 関数名には自分専用の接頭辞を付ける
  • ✅ 直接echoせず、フック(add_action)を使って出力する
  • ✅ SWELLの機能を使うコードは、フックの中に書く
  • ✅ エラーの行番号は、実際の間違いより後ろを指すことがある

次回は、記事のタイトルや本文を表示する「テンプレートタグ」について解説します。

次回は、テンプレートタグ(the〜とget〜の違い)について解説予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません!

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください!


【CSS】テキスト関連プロパティについて基本解説|Webの基礎


よかったらシェアしてね!
  • URLをコピーしました!
目次