WordPress個別サポート

「WordPressのテンプレートを編集したら画面が真っ白になった」など、テンプレート編集に関するトラブルの相談が増えています。原因はさまざまですが、ここでは定番の問題を取り上げて、テンプレート編集時の注意点をいくつか紹介します。参考にしてください。

スポンサーリンク

テンプレートの編集はテキストエディタで

WordPressのテンプレートをダウンロードして編集する場合、Windowsのメモ帳はダメです。プログラムの編集やテキストファイルの作成に使う「テキストエディタ」を使って編集するようにしましょう。たとえば、秀丸エディタ(シェアウェア・試用可)などがおすすめです。

テンプレートの編集はメモ帳以外のテキストエディタで

テンプレートの編集はメモ帳以外のテキストエディタで

テンプレートの文字コードはUTF-8(BOMなし)で保存

テンプレートはテキストファイルなので自動的にShift-JISという文字コード(エンコード)で保存されるかもしれませんが、テンプレートの文字コードはUTF-8です。また、BOMの有無を選べる場合、「BOMなし」にする必要があります。注意してください。

文字コード(エンコード)はUTF-8(BOMなし)で保存

文字コード(エンコード)はUTF-8(BOMなし)で保存

改行コードは気にしないで大丈夫です。多くのFTPソフトでは異なるOS間でPHPなどのファイルを転送する場合、必要に応じて改行コードを変換してくれるアスキーモードが使われるからです。

PHPを編集するときは開始・終了タグに注意

テンプレートはHTMLとPHPで構成されていますが、トラブルのほとんどはPHPの編集ミスです。特にPHPの開始・終了タグに注意しましょう。

<?php bloginfo('name'); ?>

PHPのコードは<?php で始まり ?> で終わっています。絶対に消してはいけません。よくあるのは次のように「<?php」や「?>」の一部を壊してしまうパターンです。1文字消しただけですが立派なエラーが発生します。

<?php bloginfo('name'); ?
どこが間違っているのかピンとこないかもしれませんが、PHPを編集するときはそれくらい注意が必要だということです。

また、参考サイトからPHPをコピーペーストする場合も、開始・終了タグが正しく入力されているか確認しましょう。大トラブルの原因の多くは、たった数文字の入力ミスです。

PHPの命令や記号は半角で入力

テンプレートなどのPHPファイルに入力するプログラムコードは基本的に半角で入力する必要があります。たとえば、次のコードをfunctions.phpに入力すると画面が真っ白になります。

add_filter('headContactCustom', 'my_headContactCustom');

わかりづらいかもしれませんが、最後の「;」が全角になっています。正しくは半角の「;」を入力する必要があります。引っ掛け問題で遊んでいるわけではなく実際に同じようなトラブルの相談が多いので、冗談抜きで注意してください。

同じように " ' ( ) などコードに含まれる記号も基本的にはすべて半角で入力します。” ’ ( )は全角です。パッと見ても気づかないかもしれませんが、安易に保存すると一瞬で画面が真っ白になる場合があるので注意してください。

本当によくあるトラブルなので注意してください。コードは全角ではなく半角です。

見えないアイテム「全角スペース」に要注意

「プログラムコードに全角はダメ」の例をもう1つ。全角スペースに要注意です。レンタルサーバーのFTPツールなどを使っている場合、画面上で気づきにくいので特に注意が必要です。

たとえば、次のようなコードを入力したfunctions.phpを保存すると、画面が真っ白になります。1行しか入力していないので間違えるはずがないのですが、どこに問題があるか、わかりますか?

保存すると画面が真っ白になるfunctions.php

保存すると画面が真っ白になるfunctions.php

答えは「コードの最後に全角スペースが入っている」です。上記の画像ではわかりませんが、下の画像の赤枠の部分に全角スペースが入っています。

コードの最後に全角スペースが入っている

コードの最後に全角スペースが入っているためエラーになる

みなさんを引っ掛けるために遊んでいるわけではありません。実際にこのようなケースのご相談があるので、注意喚起として紹介しています。

何が問題か。一般的なレンタルサーバーのFTPツールでは全角スペースを可視化できないということです。その意味は、上記の画像のとおりです。また、「外観」-「テーマの編集」メニューでコードを編集した場合も同じです。

レンタルサーバーのFTPツールではなくテキストエディタを使えば、全角スペースや行末の改行を可視化できるので、なんとか問題を特定できると思います。

全角スペースや改行を可視化すれば問題を特定できる

全角スペースや改行を可視化すれば問題を特定できる

絶対にテキストエディタを使いましょう、とは言いませんが、レンタルサーバーのFTPツールを使うときは注意が必要です。ポイントをまとめておきます。

  • PHPのコードの行末に全角スペースが入っているとエラーになるので注意
  • レンタルサーバーのFTPツールでは全角スペースを可視化できないので注意
  • 問題を特定できないときはテキストエディタで全角スペースを可視化してチェック

ちなみに、半角スペースの場合はセーフです。

移動したいコードの前後を囲むifとendifに注意

記事やページのレイアウトを変更するときにテンプレート内のコードブロックを移動することがありますが、移動したいブロックが「if」と「endif」いう命令で囲まれている場合は要注意です。

<?php if(is_front_page()) : ?>
移動したいコード
<?php endif ?>

移動したいコードだけに気を取られて次のようにifブロックの外側に移動してしまうと問題が発生する場合があります。

<?php if(is_front_page()) : ?>
<?php endif ?>
…略…
移動したいコード

この例では移動したいコードは「もしもトップページなら」というifブロックで囲まれていました。移動したいコードだけをifの外側に出してしまったことで、トップページ以外でも表示されるようになります。

ここでは極端に単純化したコードで説明したのでミスにすぐ気づきますが、実際は膨大なコードの中で移動するため発見が難しい場合があります。

また、このケースで要注意なのはエラーメッセージが表示されないということです。一見するとエラーの顔をしていないので要注意です。テンプレートの編集に限りませんが、重要な作業を行うときは「本当のエラーはエラーの顔をしていない」ということを頭に入れて慎重に作業、確認する必要があります。

といっても痛い思いをしないとわかりませんが。

functions.phpのお試し編集は厳禁

PHPファイルはすべて十分に注意して編集する必要がありますが、特にfunctions.phpは要注意です。1文字間違えると画面が真っ白になります。どうしても「外観」‐「テーマの編集」メニューから編集したい場合は、画面が真っ白になる前提で、少なくともFTPソフトやレンタルサーバーのFTPツールを使う準備をしてから作業しましょう。

書き込み禁止になっているファイルに注意

レンタルサーバーによってはWordPressのインストール直後に書き込み禁止に設定されている場合があります。たとえば、ロリポップでWordPressをインストールするとセキュリティを考慮してwp-config.phpが書き込み禁止に設定されています。

以下はロリポップFTPでwp-config.phpを開いた例です。現在の属性が「400」になっており、「書込」がチェックされていません。また、警告メッセージから、このファイルを編集できないことがわかります。

wp-config.phpが書き込み禁止になっている

wp-config.phpが書き込み禁止になっている

FTPソフトでダウンロードして編集後にアップロードしてもなぜか更新できないと悩むことになります。この場合、「書込」をチェックしてファイルを保存し、書き込み可能にしてから編集する必要があります。編集が終わったら必要に応じて書き込み権限を無効に戻しておきましょう。

まとめ

以上、WordPressのテンプレートを編集するときの注意点を簡単に紹介しました。基本的には入力ミスに気をつけましょう、という心構えの問題ですが、プログラムコードの入力に慣れていない方もいると思います。そのような方は、プログラムコードを半角で入力することや、文字コードをUTF-8(BOMなし)で保存することなど、基本的な作法を少しずつ身につけるようにしましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート