WordPressのPHPやCSSファイルを安心安全に編集するためにやっておきたいこと

シェアしていただけるとうれしいです


全国1億2千万のWordPressファンのみなさんこんにちは。さかのうえのまろ(@sakanoueno_maro)です。

今日もみなさん、せっせとWordPressのカスタマイズに精を出していらっしゃることと思います。だって、カスタマイズは楽しいですもんね。

WordPressのカスタマイズは、おおまかに

  • 管理画面からできるもの
  • ファイルを編集しなければならないもの

があります。

管理画面からできるカスタマイズは、管理画面の左側のメニューの「外観」のところをクリックすると、

  • テーマ
  • カスタマイズ
  • ウイジェット
  • ・・・

と、ありますね。
こちらのメニューから必要な項目を選択したり、入力したりすれば、ある程度のカスタマイズは簡単にできます。

ぼくが使っている「Simplicity」というテーマはカスタマイズ機能が豊富なので、ほとんどの設定が「カスタマイズ」のところでできてしまいます。
Simplicityのカスタマイズ機能

こちらのカスタマイズ機能で実現できないカスタマイズ、例えば、細かいデザインを修正したいとか、Simplicityにない機能を実装したいとか、そういう場合は、テーマやWordPressそのものを構成しているPHPやCSSといったファイルを直接編集する必要が出てきます。

ファイルを編集したときによくあるのが、

  • ページが真っ白になって何も表示されなくなってしまった。
  • ページが真っ白になって、意味の分からない英語だけが表示されている。
  • ページの表示がくちゃくちゃに崩れてしまった。

といったトラブルです。

これらのトラブルは、ファイルの編集内容に間違った部分、つまり、誤りがあるときに起きるトラブルなんです。



トラブルの原因

泣き虫
さっきまでちゃんと表示されていたのに、編集したファイルをアプロードした途端に表示がおかしくなってしまったんです(T_T)

よく聞く話ですし、ぼく自身も経験あります。

原因はただ一つ。

誤った編集をしてしまったから。

これに尽きます。

ページが真っ白になって何も表示されなくなってしまった
ページが真っ白になって、意味の分からない英語だけが表示されている

例えば、

  • ページが真っ白になって何も表示されなくなってしまった。
  • ページが真っ白になって、意味の分からない英語だけが表示されている。

この2つのトラブルの原因は、WordPressやテーマを構成するPHPファイルを誤った内容で編集した際に起きる現象です。

WordPressは「PHP」というプログラム言語で動くシステムです。PHPファイルはプログラムに「どのような動作をさせるのか」という「命令」を書いたファイルです。

命令の仕方がおかしかったり、命令の書き方がおかしかった場合、そのプログラムを動かすPHPが内容を理解できず、エラーとなってしまうのです。

  • ページが真っ白になって何も表示されなくなってしまった。
  • ページが真っ白になって、意味の分からない英語だけが表示されている。

これらの差は、PHPの動作の設定の差です。

  • エラーの内容を表示させない設定」にしているときはページが真っ白になります。
  • エラーの内容を表示させる設定」にしているときは、英語でエラーの内容が表示されます。

ページの表示がくちゃくちゃに崩れてしまった

PHPで処理されたプログラムの処理結果は、HTMLという形式でブラウザに対して出力されます。

HTMLは

  • 本文を構成する「文字」の情報
  • ページを装飾するための「タグ」の情報

    • 文字の装飾
    • ページに貼り付けている画像や動画などのメディア
    • 他のページへのリンク
    • 広告を表示したりページを動的に動かすためのJavascriptの読み込み
    • ページのデザインを施すためのCSSの読み込み

などから成り立っています。

ページの表示が崩れる原因としては、ページを装飾するための「タグ」の情報に誤りがあることが多いです。

とくにCSSは、ページのデザインを施すためによく編集されるファイルですが、こちらの編集内容に誤りがあったときにデザインの崩れを起こすことが多いです。

トラブルを防ぐ方法

ページが表示されなくなってしまった、表示が崩れてしまったというトラブルの原因は、編集内容に誤りがあることが多いです。

このようなトラブルを避けるためにはどのようにすればいいのか?

ファイルの編集をしくじってトラブルが起きたとしても、簡単に元に戻せるようにしておけばいいのです。

では、どのようにして「簡単に戻せる」ようにしておけばいいのでしょうか?

コメント(注釈)を挿入しておく

ファイルを編集しようという箇所に「ここから編集しますよ」というコメント(注釈)を書いておきます。編集したファイルをサーバーへアップロードしてブラウザで表示確認して異常があったときは、編集した箇所を削除する、または、編集した箇所をコメントにしてしまえばいいのです。

コメント(注釈)の部分は、

  • プログラムとして実行されない
  • ブラウザに表示されない、表示に影響を与えない

ようになっています。

コメントの書き方は、PHPとCSSとで若干異なります。

PHPの場合のコメントの書き方

PHPの場合のコメントは、下記のようにコメントにしたい部分の先頭に「//」を挿入します。

または、「ブロックコメント」といって、「/* */」を使って複数行まとめてコメントにすることもできます。

コメントにした部分はPHPのプログラムとしては動作しません。

例えば、function.phpに新しい機能を追加するとします。
Simplicityの子テーマのfunction.phpは、編集を加える前は次のようになっています。

ここに自分で追加をして、新しい機能を追加するとします。

Twitterのアカウントを自動的にリンクにする機能を自分で追加してみました。

ツイッターのアカウントを自動でリンクにするには[WordPress]
ツイッターのアカウントを自動でリンクにする 例えば、Twitterで見かけた記事を引用するとき、または、記事の内容を引用するた...

とコメントを書いておけば、どこに新しい記述を追加したかはっきりとわかります。エディタを閉じてしまっても、再びエディタでファイルを開けば、自分がどこに記述を追加したのかがはっきりとわかりますね。

編集したfunction.phpをサーバーにアップロードしてブラウザで表示確認をするのですが、運悪く編集内容に誤りがあったらしく、ページが真っ白になってしまいました。

その場合は、慌てずに

の部分を全部削除してしまうか、

「//」を使ってコメントにしてしまうか(15行目〜21行目)、

「/* */」を使ってコメントにしてしまってから(15行目と21行目)、再度ファイルをサーバーにアップロードします。

そうすることで、ブラウザの表示はとりあえず元に戻るはずです。
あとはゆっくりどこが間違っているのか確認して、再度編集、ファイルをサーバーへアップロードしましょう。

CSS場合のコメントの書き方

CSSのコメントは、PHPのブロックコメントと同じ方法で書きます。

コメントにした部分はCSSとしては動作しません。PHPのときと同じように

と書いて、どこを編集したのかはっきりと分かるようにしておけばいいですね。

CSSファイルを編集して表示がおかしくなったときは、

の部分を全部削除してしまうか

「/* */」を使ってコメントにしてしまってから(2行目から4行目)、再度ファイルをサーバーにアップロードすると、表示は元に戻るはずです。

ちなみに、コメントにしてその部分の動作を無効にすることを「コメントアウト」といいます。

編集前のファイルをコピーしておく

そもそも論になってしまうのですが、編集前のファイルを別名で保存しておいて、表示がおかしくなってしまったら、別名で保存しておいたファイルを元のファイル名に名前を変えて、サーバーへアップロードすれば元に戻りますね。

ぼくの場合ですが、編集前のファイルを次のように名前を変えて保存しています。

  • function.php → _function.php
  • style.css → _style.css

ファイル名の先頭に「_(アンダースコア)」をつけて別名で保存しています。

別に「_」でなくてもなんでもいいのですが、WindowsのエクスプローラやmacOSのFinderで「名前」で並び替えたときに一番先頭に表示されます。

ファイルの編集でしくじって表示がおかしくなったときって、焦っているじゃないですか?💦
そんなときに慌てていてどのファイルだったか分からなくなったり、見つけられなくなったりしないようにするために、ファイル名の頭に「_」をつけて、一番先頭に表示されるようにして、どのファイルだったかすぐに判別できるようにしています。

編集した部分にコメントを付ける方法でもいいのですが、ごそっと元のファイルに入れ替えるほうが一瞬で済みますので、こちらの方がオススメかもしれません。

元に戻せるようにしておくのが大切

ヒトという生き物は失敗するものです。「私、失敗しないので」という人は大門未知子さんくらいのものではないかと思います。

人が行うことは「失敗する」という前提で準備をしておけば、何も恐れることはありません。

編集した箇所をコメントとして残しておく、編集する前のファイルを別名で保存しておく、これだけのことでもとに戻すことができるのです。

失敗に備えておけば、WordPressのカスタマイズも怖がらずにできますね。

ということで、怖がりのみなさんもWordPressのカスタマイズに挑戦してみてください。
ほなまたみなさん、ごきげんよう。
さいなら〜ヽ(´ー`)

こちらの記事もどうぞ

WordPressのテスト環境を作りませんか?
サーバーエラーは機会損失 Twitterのタイムラインを追っているとよく見る話です。 WordPressのカスタマイズを...
WindowsからXSERVERにSFTPで接続する方法
サーバーにファイルをアップロードしたり、サーバーからファイルをダウンロードするために「FTP」という仕組みをよく使います。パソコン側から...
いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク

シェアしていただけるとうれしいです

フォローよろしくお願いします

関連記事



スポンサーリンク