ページ真っ白はもう嫌だ!WordPressのテーマカスタマイズで気をつけている5つのこと

せっかくWordPressのテーマをカスタマイズしたのにサイトが真っ白になって目の前真っ白にならないためにやっていること

WordPressのテーマカスタマイズした時に、ミスってページを真っ白にした時のあの焦りはもう2度と味わいたくない!

シェアボタンの見た目を変えたり、記事ランキングを表示したり… WordPressをいじっていると、いろいろとカスタマイズをしたいことが出てきますよね。

でも、コードを編集して更新ボタンを押した瞬間… 「うわ!ページが真っ白に!」

僕も数回このブログを真っ白にしたことがあるのですが、もう絶対にページ真っ白な状況には出会いたくないです…

そんな今までの失敗を糧に、ブログを真っ白にしないためにWordPressテーマのカスタマイズの際に気をつけている事があります。

もし、時々でもWordPressのカスタマイズをするならば参考にしてみてください!

この記事は2014年5月7日に公開したものを再編集しています
7人のブログ侍

WordPressのテーマカスタマイズで失敗しないためにやっている5つのこと

今まで、functions.phpの最終行に余分な空白を入れたりしてブログを真っ白にしたことがあります。よっひー(@yosiakatsuki)です。

ブログをWordPressで運営し始めた最初の方こそ何回か失敗をしましたが、ここ2年ブログが真っ白になる状況はなんとか避けています。

そんな「テーマカスタマイズで絶対に失敗しない為にやっていること」についてお話してみます。

僕がWordPressのテーマカスタマイズで気をつけていることは次の5つです。

  1. テーマファイルはローカル環境で編集する
  2. 修正前のテーマファイルのバックアップをとる
  3. アップロードは上書きしない
  4. ライブプレビューでエラーが無いか確認
  5. テーマテンプレート単位で確認

1. テーマのカスタマイズはローカル環境で編集する

テーマファイルはローカル環境で編集する

テーマをカスタマイズする際には必ずローカル環境でテーマファイルを編集します。

「ローカル環境」というのはざっくり言うと、「自分のPCの中だけで動くWordPressサイト」です。

WordPressを動かす為にはApacheのようなWEBサーバーやMySQLといったデータベースなどが必要になりますが、そういったWordPressの動作に必要なものをまとめて準備してくれる便利なソフトで簡単にローカル環境を作れます

僕の場合、「テーマファイルはローカル環境で編集・確認」という点はかなり徹底していて、PHPファイルはもちろん、CSSに1行追加するだけであってもローカル環境で確認するようにしています。

ローカル環境を用意する大きな理由は「本番サイトに影響を与えない」ことです。

人間はミスする生き物ですから、たった1行の修正でも、なにかミスってサイトの表示がおかしくなれば、サイトを訪れてくれた方に不便をかけるかもしれません。

それに比べたら、ファイルを編集してアップロードする手間なんて大したこと無い…と僕は思っています。

あと、phpファイルやCSSの編集に便利なエディタが使えるということもローカル環境を使う理由の1つです!

2. 修正前のテーマファイルのバックアップをとる

修正前のテーマファイルのバックアップをとる

テーマファイルのカスタマイズが出来て、「さぁ!アップロード!」といきたいところですが、ちょっと待った!!

ファイルのアップロード前に必ず修正前のテーマファイルをバックアップしておきます

ちゃんと動かないテーマファイルをうっかりアップロードして「サイトが真っ白!管理画面にも入れない」となってしまっても、すぐに元の状態に戻せるようにするためです。

WordPressのプラグインやレンタルサーバー側で自動バックアップされたファイルを使うのも手です。

でも、プラグインが正常に動いてなかった…とかだと嫌なので、僕は必ずFTPソフトを使ってファイルをバックアップしています。

FTPソフトは何を使ってもいいと思いますが、個人的にはオープンソースの「FileZilla」が機能的にもシンプルでおすすめです。

3. アップロードは上書きしない

アップロードは上書きしない

たとえ修正前のファイルをバックアップしていても、アップロード時にファイルの上書きはしません。

適用中のファイルを上書きすると、その時点で新しいテーマに勝手に変わった上、修正前のテーマファイルはサーバー上から消えてしまいます…

すると、いざ新しいテーマをアップロードしたけど、「やっぱ何か抜けてる!」といった時、すぐに元に戻せなくなります。(そうならないようにしっかり確認すれば良いのですが…)

もし何かあってもすぐに前のテーマに戻せるように、修正前のテーマと新しいテーマの両方がサーバー上に存在している状況を必ず作るようにしています。

そのためにも、新しいテーマの名前は修正前のものとは違う名前にする必要があります。

フォルダのリネームだけでなく、style.cssも編集する

名前を変更するのはテーマファイル一式がはいっているフォルダとstyle.cssの「Theme Name:」の部分です。

style.cssを編集しないと、管理画面でどれが新しいテーマかわからなくなる

style.cssの編集を忘れると、同じ名前のテーマが複数管理画面に表示されて見分けがつかなくなるのでお忘れなく。

4. ライブプレビューでエラーが無いか確認

ライブプレビューでエラーが無いか確認

修正した新テーマへの切り替えまえの確認として、ライブプレビューをするようにしています。

TOPしか見れないのですが、この時点で変な動きをしていたら、テーマの切り替えをやめて、おかしいところが無いか確認します。

「本番サーバーとローカル環境でPHPのバージョンが違っていたのに「ローカル環境では問題なかったから」とライブプレビューせずテーマを切り替えたら、本番側でうまく動かなかった…」

ということを経験したこともあるので、見た目の確認と言うより「本当に動くかな?」という意味で確認をするようにしています。

5. テーマテンプレート単位で確認

テーマテンプレート単位で表示を確認

事前にローカル環境でも確認はしていますが、テーマを切り替えたタイミングで最終確認をします。

僕はざっくりTOP、個別記事、固定ページ、アーカイブ(記事一覧の2ページ目以降)、カテゴリー、タグ、404ページあたりを確認しています。

「TOPは正常に動くけど、個別記事のテンプレート(single.php)におかしな所があって、途中で表示が切れる…」

なんてことが以前あったので、ちょっと大変になりますが確認しています。

明らかに「single.phpしか修正していない」という時は個別記事の表示しか確認しませんが、CSSを編集した時などは一通り確認するようにしています。

ローカル環境での確認の時は見落としたけど、本番環境で確認しているときはおかしな所に気づけた…なんてことが無いとも言い切れませんのでめんどくさくても1度は確認します!

まとめ

面倒くさいことばかりしていますが、大事なのはサイトが止まらないことです。

それだけは忘れないようにしています。

ローカル環境でテーマを編集するのは、便利なエディタを使いたいからだけなんですけどね…

ちなみに、管理者にだけ適用中のテーマとは違ったテーマで表示の確認をすることができる「WP Theme Test」や「Theme Test Drive」といったプラグインもあるみたいです。

そのうち使う機会がありそうなので試してみます。

よっしーのひとこと

よっひー

ページ真っ白。目の前真っ白。頭も真っ白。

そんなことにならない事を祈っております。

ではまた。

明日のブログ侍は?

明日の七人のブログ侍は木曜日担当、いずれも。のkoh(@koh_izuremo)さんです!お楽しみに!

七人のブログ侍とは

「七人のブログ侍」とは、七人のブロガーが担当曜日を決め、日替わりで更新していくリレー企画!

他の侍の記事も是非読んでみてください!

よっしーの他の「七人のブログ侍」記事も見てね!

7人のブログ侍