WordPressでfunctions.phpファイルをいじっていると、コードは正しく記述されているのに、「ファイルを更新」をクリックするとsyntax error, unexpected~のようなエラーが発生して、何度やっても保存できないという事態に遭遇することがあります。
しかも、「ファイルの〇行目でエラーが発生したため、PHP コードの変更が適用されませんでした。修正して再度保存してください。」という指摘のため、〇行目を見てもおかしなところがないという場合も往々にしてあります。
ここではそんなときの簡単なエラー箇所の発見と修正方法についてまとめています。
エラーの例
エラーは例えば以下のようなものが発生します。
syntax error, unexpected ‘ ‘ (T_STRING)
wp-content/themes/astra-child/functions.php ファイルの44行目でエラーが発生したため、PHP コードの変更が適用されませんでした。修正して再度保存してください。
syntax error, unexpected ‘ ‘ (T_STRING)

syntax error, unexpected ‘function’ (T_FUNCTION)
wp-content/themes/astra-child/functions.php ファイルの58行目でエラーが発生したため、PHP コードの変更が適用されませんでした。修正して再度保存してください。
syntax error, unexpected ‘function’ (T_FUNCTION)

上記では58行目にエラーがあると言っていますが、該当の58行目を見てもエラーはなく、実は他の行にエラー箇所があったりします。
こういった不適切なエラーメッセージがエラー箇所の発見を遅らせる大きな原因になります。
ちなみに上記エラーの原因は、53行目に不要な全角スペースが入っていることです。
エラーの発生原因
エラーの発生原因はWordPressがエラーメッセーで教えてくれているとおりコードに記述ミスが発生していることです。
ただ、エラーメッセージの指摘が適切でないのが問題です。
特に、どこかのサイトから拾ってきたコードを貼り付けた場合など、意図しない全角スペースが入っていたりすることがあり、そのせいでエラーが発生することがあります。
エラー対処法
WordPress管理画面のテーマファイルエディタは簡単なコードハイライトをしてくれますが、決して完璧とは言えません。
このため、テーマファイルエディタ上でエラー箇所を発見しようとすると、目隠しの状態で総当たり式(あるいは推測)で修正をかけていかなければいけないため、効率も非常に悪いです。
そんな時はVScodeなどの優秀なエディタを使うとエラー箇所を一瞬で発見することができます。
ちなみに、わざわざFTP経由でfunctoins.phpをダウンロードしてきて、そのファイルを開くというめんどくさいことをする必要はありません(もちろん、簡単にできるならしてもいいです)
テーマファイルエディタのコードをコピーしてVScodeに「ctrl + n」で作った新しいタブに貼り付ければOKです。
ただ、この状態ではプレーンテキストとして認識されるため、コードハイライトは行われません。そのため、まず「ctrl + s」でファイルをデスクトップなど適当な場所に保存し、そのときに拡張子でPHPを指定します。(拡張子が自動認識される場合は不要です)
これで、エラーが発生している箇所を即座に発見することができます。
エラー発見方法の実例
実際にVScodeを使ってエラーを探す手順を紹介します。
対象のエラー
今回使用するエラーは次のようなものです。
wp-content/themes/astra-child/functions.php ファイルの58行目でエラーが発生したため、PHP コードの変更が適用されませんでした。修正して再度保存してください。
syntax error, unexpected ‘function’ (T_FUNCTION)

WordPressによると58行目にエラーが発生しているということです(実際は違います)
コードをコピーしてVScodeに貼り付ける
テーマファイルエディタのfunctions.phpのエラー該当箇所付近のコードをVScodeに貼り付けます。
このとき、エラーメッセージの該当行だけでなく、上や下など範囲を広げてコピペしてください。(もちろん全体をコピペしてもOKですが、コード量が多いとデバッグが大変です)

VScodeはコードの内容を読み取って自動で拡張子を判定してコードハイライトをいれてくれます。ですが、ときおり機能せずプレーンテキストのままになっていることがあります。
そんな時は「ctrl + s」でファイルを保存してください。
デバッグ用の一時ファイルなので実際のfunctions.phpと混同しないようにファイル名はテストやデバッグであることがわかりやすい名前をつけておきます。
「ファイルの種類」で「PHP」を選択することを忘れないでください。

これで、「保存」をクリックすればコードハイライトが適用されます。
デバッグする
まずはWordPoressでエラーメッセージが出ていた行の付近のコードを確認します。

すると、add_filter('document_title_separator', 'custom_sep', 10, 1);
の後ろに□が表示されています。

これは全角スペースです。今回の場合これがエラーの原因です。
ちなみに、functions.phpではこの行は53行目になります。エラーメッセージの58行目ではありません。
コードの修正
VScode上でコードを修正します。

修正したコードをfunctions.phpに貼り付け、ファイルを更新をクリックします。

無事ファイルを更新し、変更内容を保存することができました。
デバッグの実例2(VScodeだけではエラーを潰しきれない場合)
例えば以下のようなエラーが発生したとします。

このとき、VScodeで対象のコードを見てみると、一番上のfunction child_enqueue_common_style()
のカッコが赤くなっています。

つまりこの部分にエラーがあるということです。ちなみに上記エラーの原因は閉じカッコがないことです。
閉じカッコをつけると赤色が白色(エラーなし)になります。

今度は別のエラーが発生します。

確認すると、一番最後の'child_enqueue_common_style
に閉じ’が抜けています。
‘を加えれば正しく保存できるようになります。

このようにVScodeは決して完璧にデバッグしてくれるわけではありません。ぱっと見で分かりずらいエラーを潰してくれる優秀なツールです。上手く活用することが大切です。
WordPressのテーマファイルエディター functions.phpのデバッグは以上で完了です。必ず対応できるので焦らず落ち着いてコードと向き合いましょう^^