WordPressのテーマを子テーマを作ってカスタマイズする

Moleskine Books
Creative Commons License credit: Markus Rödder

前にも書いたように、不動産屋のサイトをWordPressで作成することにしているので、私にとっては不動産屋の仕事の一部なのですが、 このブログの「未経験から始める不動産業」という名前からすると、WordPressの話題が多すぎると思います。ブログにきてくれる人のことを考えると、別ブログでWordPressの話題は扱うべきでしょうね。すみません。

私はサイト構築に関しても、WordPressについても、ど素人です。なので、サイト構築作業過程を備忘録として記事に残しておきたいんです。

スポンサーリンク

不動産プラグインを使うなら、Twenty Ten か Twenty Eleven で

不動産屋サイトは、WordPressに不動産プラグインとその他のプラグインを導入し、デザインを手直しして作成することにしています。不動産プラグインを動かす場合のテーマは、Twenty Ten かTwenty Eleven を使ったほうが無難なようなので、Twenty Eleven をカスタマイズすることにしました。

ど素人なのでカスタマイズは css だけにしておく

カスタマイズと言っても、サイトがうまく動かなくなったら困るし、うまく動いても何かあった時の自力復旧に時間がかかるようでは、肝心の営業活動に影響が出てしまうので、php ファイルを触るのはやめて(一部プラグインを動かすためのコード記述だけにおさえて)、css  を変更してデザインの変更だけをしようと思っています。css  だけなら、問題があっても見た目が崩れるだけですし、最悪の場合デフォルトのcssを適用(上書き)してしまえば何とかなります。私のようなど素人でも、何とかなるカスタマイズです。

テーマのカスタマイズは子テーマを作って行うのが一番

さて、今回の本題。

一からテーマを作成する場合は別として、既存のテーマをカスタマイズする場合、 テーマファイルに直接手を加えるのではなく、子テーマを作ってカスタマイズをした方がいいみたいです。

子テーマとは、「別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマ」(WordPress  Codex 日本語版より)です。

自分なりに簡単に言い換えると、「元々のテーマ(親テーマ)に直接手を加えないで、必要なカスタマイズをしたい分だけ(たとえばstyle.css だけ)別ファイルを作り、それを子テーマとして一定のルールしたがって保存しておけば、親テーマがその子テーマを参照して読み込んでくれるので、気楽にガンガンカスタマイズできる」(長いな~)という感じです。

子テーマを作ってカスタマイズすることの最大のメリットは、親テーマのアップデートを適用して更新した場合でも、子テーマは上書きされず、カスタマイズした内容が保持されることです。子テーマを作らないで親テーマのファイルを直接編集していると、うっかりアップデートを適用した際上書きされてデフォルトに戻ってしまいます。

特にWordPressのデフォルトのテーマであるTwenty Elevenは、WordPressをアップデートすると一緒にアップデートされてしまいます。

まあ、手動でアップデートすれば避けることはできるでしょうし、カスタマイズしたテーマファイルはバックアップをとっておけば大丈夫でしょうが、せっかく子テーマという簡単な方法があるのですから、子テーマでのカスタマイズが得策だと思います。

私は、上述の通り、css だけいじろうと思っていますが、もちろん子テーマでphpを扱うこともできます。

子テーマの作り方

子テーマの作り方について概略を書くと

1.WordPress の themes フォルダの中に 子テーマ用のフォルダを作る。
2.子テーマ用のフォルダの名前は自由。
2.子テーマフォルダの中に子テーマ用のファイルを置く。
3.子テーマ用のファイルとしては、style.css は少なくとも必要。
4.style.css のヘッダーにWordPressにどの親テーマに子テーマを適用するのかなどの情報を書き込む。

です。
詳しい内容は、WordPress  Codex 日本語版の子テーマ説明ページを参照してください。

あとは、子テーマフォルダ内のstyle.css の内容を書いていく、という手順です。

One-Click Child Theme というプラグインなら楽チン

子テーマの作り方は前述の通りでさほど難しくはないんですが、でもこのプラグインを使うと、次のように、子テーマの名前・説明・作者名を入れるだけで子テーマを作れます。

かちびと.net さんのサイトで紹介されてました。ありがとうございます。(ちなみに、こちらのサイトではWebサイト制作に関連する有益な情報がたくさんアップされていて、私も時々覗いています。私のような素人にはわからない内容も沢山ありますが、素人でも役立つ情報がたくさんあります。)

One-Click Child Theme Image

まあ、自動的に子テーマフォルダを作成して、その中に子テーマとしてのヘッダー情報を記述して後は空っぽの style.css と rtl.css を作ってくれるだけなんですが、それでも何だかとっても楽チンです。

wordpress.orgのOne-Click Child Themeプラグインのページ

あとは、css の中身を書いていけば子テーマの完成です。

おまけ(テキストエディタについて)

cssの編集は、WordPress の管理画面の「テーマ編集」画面からも行えますが、テキストエディタを使う方が便利です。

テキストエディタは、 Windowsアクセサリのメモ帳を使ってはダメで、「文字コードUTF -8 BOMなし」「改行コード LF 」を選んで保存できることが必要。そうじゃないと文字化けとかしてうまく機能しない、らしい…。私は現時点では NoEditor というフリーソフトで、上記の項目を設定しておいてから使うことにしました。

このサイトも、今はほぼ初期状態ですが、子テーマを使って少しずつデザインを変えていこうと思います。

関連記事とスポンサーリンク

スポンサーリンク


関連しているかもしれない記事

griffin

グリフィンです。不動産業もWordPressも関わるようになってまだわずか。それを差し引いてお読みください。コメントはお気軽にどうぞ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">