WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう！

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテーマを弄るのはまずそうです。

というのも、テーマをバージョンアップすると弄ったCSSも上書きされてしまい全部やり直しになってしまうからです。

子テーマを作る重要性

カスタマイズしたCSSのバックアップを取っておき、バージョンアップ後に上書きすればいいやと言う気もします。

しかし、バックアップを忘れていたり、バージョンアップの内容によっては上書きしたくないなどあります。何よりスマートではないです。

そこで、WordPressには子テーマを用意し、そちらでカスタマイズするスマートな方法が推奨されています。オリジナルのテーマを弄る事がないので、ミスを気にせず思い切ったカスタマイズが出来そうです。

今回はSTINGER5の子テーマを作ります。作ったファイルをサーバーにアップロードする手順も紹介します。また、PHPを使いますが、手順通りに行えば知識がなくても問題ないです。

WordPressのテーマ構成について

子テーマを作る前にWordPressのテーマがどのような構成になっているのか、ざっと説明します。理解してなくても手順通りにやれば、子テーマは作れるので面倒な人は飛ばしてもいいです。

WordPressを使ったテーマは、ヘッダー部やコンテンツ部、フッター部、サイドバー部など複数のパーツに分割されていて、それぞれをPHPファイルで定義しています。

これらの情報はMySQLを使ってデータベースに記録されていて、webサイトを表示する時にそれらを動的に呼び出し組み合わせる事でページを構成している訳です。

動的に表示するので、当然ながらユーザーサイド的には表示速度が遅くなる欠点がありますが、管理者サイド的には、記事などの変更を行う度に全体の再構築を行わないので作業の時間を無駄にしなくて済むといった利点があるのです。必要なパーツのみの変更で済むと認識しておけば分かりやすいと思います。

動的表示の欠点を補うアイデアとして、作成したページのHTMLファイルをキャッシュに保存しておくといった方法があり、プラグインなどを導入すると簡単に利用できたりします。

ただプラグインによっては問題もあるようなので、アクセス数が増大した時などに検討した方が良いと思います。

テーマの構成要素

管理画面メニューの外観から「テーマの編集」にテーマを構成するPHPファイルやCSSファイルがあります。下記はSTINGER5のテーマ構成です。

• テンプレート
  404.php：リンク切れの404ページ
  ad.php：広告
  archive.php：記事のアーカイブ
  comments.php：コメントページ
  footer.php：フッター
  functions.php：テーマのための関数
  header.php：ヘッダー
  home.php：トップページ
  index.php：メインインデックス
  itiran.php：記事一覧
  kanren.php：関連記事
  newpost.php：新着記事
  page.php：固定ページテンプレート
  scroll-ad.php：追っかけ広告
  search.php：検索結果
  searchform.php：検索フォーム
  sidebar.php：サイドバー
  single.php：単一記事の投稿
  sns-top.php：SNS
  sns.php：SNS

• スタイル
  style.css：スタイルシート
  editor-style.css：ビジュアルエディターのスタイルシート

何か変更を加えたい場合は、これらのファイルを編集すれば良いのですが、前述した様に色々と不都合もあるので、それぞれの子テーマを作ってカスタマイズしていく訳です。

子テーマについて

子テーマとは、親テーマへの直接編集を避けるための差分ファイルの様なものです。実際には、サイトがブラウザ上で表示される時に動的に反映されるので、編集したい部分だけを子テーマに記述すれば良い訳です。

読み込まれる順番や、反映のされ方については注意すべき点もあります。

style.cssファイル

親テーマが先に読み込まれて、子テーマの内容が上書きされます。注意点は、子テーマの属性値に何も記述していない箇所は親テーマの値が有効になるので、スタイルを使いたくない時は、0やnoneを記述する必要があります。

functions.phpファイル

子テーマが先に読み込まれるため、親テーマと同じ関数は上書きされないので、追加の関数のみの記述となる。（関数を置換する方法はあります）

注意点は、子テーマに親テーマと同じ内容を記述したり、「 ; 」を抜かしてしまうなどすると、エラーを起こし管理画面やブログにアクセス出来なくなります。その際は、サーバーのファイルマネージャで修正してください。

その他のファイル（header.phpやfooter.phpなど）

style.cssと同様に子テーマの内容が上書きされる。

子テーマの作成手順

子テーマを作るまでの全体的な流れは、

1. themesディレクトリに子テーマ用のフォルダを作る。
2. 子テーマ用のフォルダにとstyle.cssファイルを作る。
3. functions.phpとstyle.cssに必要なコードと情報を書き込む。

子テーマのフォルダとファイルを作成する

エックスサーバーを例に、フォルダとファイルの作成をしてみます。と言っても、管理画面から作成できるので、FTPソフトなどを使う必要もなく簡単に出来ます。

1. ファイルマネージャにログインする。
2. themesフォルダにアクセスする。/サイト名/public_html/wp-content/themes/
3. [作成]でフォルダ名を入力して作成。例）sample-child
4. 作成した子テーマのフォルダにアクセス後、[作成]でファイル名を入力して作成。例）style.css functions.php

子テーマのfunctions.phpを編集する

functions.phpにチェックを入れて、編集をクリックし、ファイルに下記のコードを書き込みます。テーマの編集でファイルに入力してもいいですがエラーに注意。

子テーマのstyle.cssを編集する

style.cssにチェックを入れて、編集をクリックし、ファイルに下記の情報をコメントとして書き込みます。テーマの編集でファイルに入力してもいいです。

記入例です。

必須項目は、Theme NameとTemplateなのでこの2つだけ正しく記入すればOKです。注意点は、「:」の後に全角スペースがあると正しく読み込めないので、半角スペースにする。Templateは大文字と小文字を区別する。

最後に外観のテーマに移動して、子テーマを有効化します。これで子テーマが親テーマを引き継ぐ事になるの正しく表示されているはずです。

管理画面の外観からテーマの編集に移動すると、編集するテーマの選択で子テーマ（stinger5-child）を選択できるようになっています。

今回作ったfunctions.php以外にもheader.phpやfooter.phpなども同様にして子テーマを作る事が出来るので必要に応じて作ってみましょう。

STINGER5には別の方法を適用する

前述の方法で子テーマを作成すると、STINGER5の場合は親テーマの内容を上書きしてくれないので別の方法を取ります。詳しくは、STINGER5の子テーマでCSSが上手く反映されない原因を解決！より

@import url()を使用する

@import url(‘../stinger5ver20141227/style.css’);を子テーマのstyle.cssに記述します。

子テーマのfunctions.phpは必要ないです。

まとめ

子テーマを作る事で、安心安全にテーマテンプレートを弄れるようになります。

ただし、ファイルを弄りすぎるとエラーを起こす事があります。特にfunctions.phpは、管理画面に入れなくなり、編集も出来なくなります。サーバーのファイルマネージャで編集すれば元に戻るので焦らずに修正しましょう。

これで積極的にカスタマイズ出きるので、恐れずに色々と試してみてください。