【第2回】WordPressでオリジナルの自作テーマを作る方法：問題発見と解決する手順や考え方

WordPressで何らかのカスタマイズをしていると、参考とした記事とバージョンや環境が違って上手くいかなかったり、まったく同じ環境なのにやはり上手くいかなかったりすることがあります。簡単に言えば、「コピペしてみたけど上手く動かないといった状況」や、「手順通りだし、間違ってないはずなのに上手く行かない」といった状況です。

原因として考えられるのは「参照とした記事が古い・間違っている」・「参照とした記事通りの手順を行えない」・「導入しているテーマやプラグイン、バージョンが異なる」などが考えられますが、どれも「問題を発見する能力」と「解決する手段」を知らなければ延々と悩むことになりかねません。

実際に簡単そうなカスタマイズを見つけて、試してみたけれど上手くいかず、時間ばかりが過ぎてしまった経験がある方もいらっしゃるでしょう。 今回は「WordPressでオリジナルの自作テーマを作る方法」である基礎知識の一歩先、自分自身で問題を発見し解決する手順や考え方をご説明します。

前回の記事では簡単にオリジナルテーマを自作するための手順や必要とする基礎知識について説明しておりますので下記URLの記事もぜひともご参照ください。 【第1回】WordPressでオリジナルの自作テーマを作る方法：基礎知識編

1.問題を発見するために抑えておきたいポイント

まずは問題を発見するために抑えておきたいポイントをチェックしましょう。

1-1.PHP、JavaScript、HTML、CSSはそれぞれ文法がある

Web制作初心者の方ですと各言語の仕様や文法、構文などの「お作法」部分の違いが理解できていない場合があります。 ぱっと見、ほぼ全部英語ですし、プログラミングの知識や経験がなければわからなくて当然です。 まずはPHP、JavaScript、HTML、CSSはそれぞれ文法や構文、ルールがあることだけでも覚えておきましょう。

1-2.文法や構文が間違っているとエラーやデザインが崩れる原因に

PHP、JavaScript、HTML、CSSのそれぞれに文法や構文があることを覚えたら、次は文法や構文が間違っているとエラーやデザインが崩れる原因になるということを覚えておください。 各言語は基本的には平文です。例えばHTMLであればタグで構造化するためには開始タグと閉じタグがきちんと設定されていなければ崩れてしまいます。 他の言語も同様に記述ルールがあること「コピペミス」や「入力ミス」でも思っていた結果が得られないことを忘れないようにしてください。

1-3.レスポンシブデザイン及びマルチデバイスにも対応するには

レスポンシブデザインに対応するためにはプラグインを利用するか、対応するテーマを選ぶ、またはCSSでディスプレイサイズごとに値を設定する必要があります。 初心者の方がつまづきやすいのが「スマホのデザインをカスタマイズしたはずなのに反映されない」や「パソコンのデザインが崩れてしまう」などが挙げられます。 CSSの場合は基本的にデバイスに関係なくデザインが適用されてしまうこともありますので、思ったように反映されない場合はディスプレイサイズを指定した記述がないか、プラグインやテーマで個別に記述すべき項目がないかチェックしてみてください。

2.問題を発見しやすくなる手順を考えよう

次に問題を発見しやすくなる手順を考えるためのポイントについてチェックしてみましょう。

2-1.作業手順を覚えるのではなく、明確にメモしておく

例えば何らかのサイトを参照にしてコピペ、または編集する場合、必ずその作業手順を覚えるのではなく、明確にメモしましょう。なぜなら、うろ覚えで元に戻そうとしても元に戻らないからです。

初心者の方が陥りやすいパターンとして、カスタマイズのためにテーマファイルをコピペで編集した→上手く行かないので元に戻した（実際は余計なタグ、コードも消している）→元に戻らないということがよくあります。

編集した箇所だけをコピペや削除で元に戻そうとせず、事前にバックアップを取ってファイルそのものを元の状態に戻せるようにしておくことも大切です。

2-2.テーマファイルを編集した時はすぐに見栄えのチェックを

テーマ→カスタマイズ→追加CSSでCSSを追記した場合はその場でデザインに反映されます。しかし、テーマファイルを編集した時はデザインをチェックしながら編集することはできません。 「デザインが崩れた」の他に「何も変化がない」ということも考えられるので、テーマファイルを編集し保存したら、必ず該当する箇所のページを各デバイスで開いて見栄えのチェックをすることを忘れないでください。 なぜなら、その都度チェックしないと「どの段階のカスタマイズ/編集が原因なのか」特定できないたいめです。カスタマイズする箇所が複数ある時こそ手間暇を惜しまずにチェックしましょう。

2-3.ソースファイルを見て構文エラーや文法のミスを気付くために

初心者であれば「自分が間違った」場合や「参照とした記事が間違っている」場合につまづいてしまいがちです。 デザインが崩れた、または何らかの不具合が起きてしまった場合、ソースファイルを見て構文エラーや文法のミスを見つける必要があります。 例えばCSSでは　}　や　;　が一つ抜けただけでも、思ったような結果にならないことがあり、単純な入力ミス、またはコピペミスがデザインが崩れる原因であることは少なくありません。 編集した箇所が間違っていないかどうか見る時は記号ひとつ、数字や英字ひとつがずれたり、改行や半角スペースの有無も逃さずチェックする癖をつけましょう。

3.問題を発見した後、解決までの手順や考え方

次に問題を発見した後、解決までの手順や考え方のポイントをチェックしましょう。

3-1.まずはテーマファイルを以前の状態に戻そう

基本的にはバックアップ、または任意の時点へテーマファイルを戻すようにしましょう。 そして、その時点からどのような作業手順でどんなコードを追記したのか、または編集したのかのメモを元に手順を再現します。 どの時点からおかしくなるのか突き止めたら、自分のミスではないか、参照にした記事やサイトが古い、または間違っていないか調べます。 また、無理に同じ手順を続けるのではなく、他の手順で同様のデザインやカスタマイズができないか検討することも時には大切です。

3-2.知識や経験がないなら、調べて補おう

知識や経験を元に工夫することも大事ですが、素直にインターネットに頼って調べて補うことも忘れないようにしましょう。 特にWordPressの強みである「情報源が多い」というのは学習しやすいという意味でもあります。 同じような現象で悩んでいる人はいないか、解決できるのか、それとも解決できないのかも大抵は記事になっています。 明らかに難しいものは別として、簡単なものであれば「同じことで悩んだ人が絶対にいる！」くらいの気持ちで検索すると、案外あっさりと解決します。

3-3.トライアンドエラーの精神を持つことが大事

WordPressを少しでも上手に扱えるようになりたいのであれば「失敗」を恐れることなく、何度でも繰り返しましょう。

一回で成功する方が嬉しいですが、何が間違っていてどうすれば解決できるのかを何度か経験すると、様々な現象に対応できるからです。 よく、バックアップを取って再構築する手順を覚えておくべきと言われるのはこのためです。ほとんどのデータは前のデータを持っていれば元に戻すことができます。 しかし、編集したファイルを、前の状態に手動及び目視で元に戻して、再度編集してとなると、元の状態に戻っていないまま、エラーとなる原因や不具合となる箇所を保持したまま作業しつづけることになりかねません。 自分が作業した時間が無駄になってしまうと考えるより、スパッとバックアップから「確実に」元の状態に戻した方が早いこともありますので、悩みすぎず、時には気持ちを切り替えることも大切です。

まとめ：最初から一発で答えにたどり着けなくてもOK！

WordPressの記事の中には「誰でも簡単！」や「コピペでOK！」といったものがあります。簡単にデザインを変更できれば嬉しいですし、コピペで済むのなら楽だと考えてしまうこともあるでしょう。 実際には記事やサイトを作成した人の環境で「簡単」であり、「コピペでOK」なものもあるということ、全てのバージョンやプラグインとテーマの組み合わせに対して適用可能なものばかりでないということも覚えておいてください。 同時に最初から一発で答えにたどり着けなくてもOKという気持ちで作業することも大切です。ミスや失敗や無駄は誰しも嫌ですが、逆にそれらが知識と経験の積み重ねの土台となるという考え方を合わせ持つこともおすすめします。