WordPressの子テーマ(child theme)機能を使ってみる。

当サイト「ゼロからはじめるWordPress」も、サイト開設から1年が経過しましたので。

今年(2012)からちょこちょこと、WordPess中級者レベルの内容にも進んでいこうかと思っています。

というか、私ももっとWordPressを使いこなせるようになりたいので、初心者レベルからのステップアップです。

で、今回お伝えしたいのは、WordPressの「子テーマ」機能

「子テーマ」というと、なんだかイメージがつかめないので、名前だけは知っていても、この機能を利用していない方も多いのではないかと思います。

しかし、「child theme」という英語に戻すと、なんだかイメージがわいてきませんか?

そう。WordPressの子テーマ機能とは、現在使っているWordPressのテーマ(テンプレート)を親にたとえるなら、その親とそっくりの、子どものようなテーマを作ってしまおうという機能です。

なぜ、そんなことをするのかというと、テーマのカスタマイズを容易にするためです。

WordPressのテーマというと、WordPessの公式テーマサイトである「Free Themes Directory」などから、すでに完成されているものをダウンロードして使っている方がほとんどだと思いますが。

ダウンロードしたテーマを100パーセント気に入って使っている方って、ほとんどいないのではないでしょうか。

フォントの大きさだとか、色使いとか、どこかしらカスタマイズしたい部分があるはずです。

そういうときって、たとえば当サイトで使っているテーマの「weaver」みたいに、テーマの各部分をカスタマイズする機能や、独自のCSSを保存する機能があるテーマはいいですが。

そういう機能がないテーマは、WordPress管理画面の「テーマの編集」画面から、スタイルシートファイル(style.css)などに変更を加えることになります。

しかし、苦労して変更した箇所も、テーマをアップデートすると、きれいさっぱり消えさってしまいます。

そういうときに便利なのが、WordPressの子テーマ機能です。

現在使っているWordPressのテーマの子テーマを作ると、以下のような利点があります。

「基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。
さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。
このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。」(WordPress Codex 日本語版「子テーマ」ページより引用)

つまり、ダウンロードして使っているテーマをカスタマイズしたいなら、子テーマ機能をぜひ使ってくださいというのが、WordPress開発元の希望といってもいいでしょう。

で、かんじんの子テーマの作り方ですが、ものすごく簡単です。

このページの最初で「中級レベルの内容」と書きましたが、できればWordPressをはじめたばかりの初心者の方にこそ、マスターしてほしい機能です。

まず、FTPソフトか、レンタルサーバー管理画面のファイルマネージャーから、WordPressにインストール済みの各テーマを保存してある、「themes」というフォルダを開きます。

※ 当サイトはレンタルサーバーのミニバードで運営しているので、ミニバードのファイルマネージャー機能を利用しています。

「themes」フォルダは、「WordPressのインストールフォルダ」 → 「wp-content」 → 「themes」の位置にあります。


「themes」フォルダを開くと、インストール済みの各テーマのフォルダが並んでいます。

現在使っているテーマ(親テーマ)のフォルダ名を確認して、その子テーマであることがわかる任意の名前をつけたフォルダを、同じ階層に新規作成します。

私の場合、「weaver」というテーマを使っているので、子テーマフォルダの名前は、「weaver-child」にしました。


次に、新規作成した子テーマフォルダを開き、その中に、「style.css」という名前の、スタイルシートファイルを新規作成します。


今度は、新規作成した「style.css」ファイルを開き、以下の内容のテキストを入力して、保存します。


/*
Theme Name: 子テーマフォルダの名前
Author: 適当な名前
Template: 親テーマフォルダの名前
*/

@import url('../親テーマフォルダ名/style.css');


これで、子テーマの作成は完了です。

あまりに簡単なので、びっくりされたのではないでしょうか?

WordPress管理画面の「外観」 → 「テーマ」をクリックすると、インストール済みの各テーマに並んで、作成した子テーマのサムネイル?が表示されているはずです。


「有効化」をクリックすると、作成した子テーマが、利用中のテーマになります。

で、子テーマに変更したWordPressサイトをブラウザーで開いてみても、見た目は何一つ変わらないはずです。

これが、子テーマ機能のすごいところで、子テーマは、親テーマの機能をすべて引き継いでいるんです。

先ほど作成した子テーマのスタイルシートファイルの、「@import url(‘../親テーマフォルダ名/style.css’);」の部分が、親テーマのCSSをそのまま受け継ぐという意味のコードになっています。

また、子テーマのスタイルシートは親テーマのスタイルシートよりも優先されるので、今後は利用中の子テーマ管理画面の「外観」 → 「テーマ編集」画面からスタイルシートファイル(style.css)を開き、「@import url(‘../親テーマフォルダ名/style.css’);」の下に独自のCSSコードを書き込むことで、親テーマのCSSコードを一切触らずに、親テーマを(正確には子テーマ?)をカスタマイズできるようになります。


他にも、テンプレートファイルや「functions.php」を新規作成して、いろいろとカスタマイズができるのですが、今回はこのへんにしておきたいと思います。

くわしいことが知りたい方は、WordPress Codex 日本語版「子テーマ」ページ、またはWordPress Codex 英語版「子テーマ」ページをじっくり読んでみてください。

意外と英語版のほうがわかりやすかったりするのが不思議。

end.

  • このエントリーをはてなブックマークに追加

コメント

  1. […] 今回参考にさせて頂いたサイトはゼロからはじめるwordpress様です。 […]

  2. […] そちらを参考にされるのが良いと思います。   WordPressの子テーマ(child theme)機能を使ってみる。 | ゼロからはじめる Word…「WordPressのインストールフォルダ」 → 「wp-content」 → 「themes」 … […]

  3. 情報源 より:

    […] ● ワードプレステンプレート集│WORDPRESS THEME PARK ● WordPress – 無料テーマ&テンプレート紹介サイト|テーマタンク ● WordPressの子テーマ(child theme)機能を使ってみる。 | ゼロからはじめる Word… […]

  4. […] WordPress – 無料テーマ&テンプレート紹介サイト|テーマタンク ● WordPressの子テーマ(child theme)機能を使ってみる。 | ゼロからはじめる Word… [ プラグイン ] ● Background Manager – […]

  5. […] WordPressの子テーマ(child theme)機能を使ってみる。 WordPressのフォントを変更して、見映えをよくする。 […]

  6. […] ■参考『WordPressの子テーマ(child theme)機能を使ってみる。』 […]

  7. […] WordPressの子テーマ(child theme)機能を使ってみる。 […]

  8. tatsu333 より:

    はじめまして。
    とてもわかりやすく、こちらの記事の内容を実践できました!
    ありがとうございました。

    • あぶらあげ より:

      tatsu333様、コメントどうもありがとうございました。
      少しはお力になれたようでうれしいです。
      ※ 2番目のコメント(削除済み)のご希望にそって、お名前とコメントを編集させていただきました。

  9. tatsu333 より:

    あぶらあげ様、遅くなりましたが、ありがとうございました。また勉強させていただきます。

  10. テストゼロ より:

    […] 一番良いのは、WordPressの子テーマ機能を使って、スタイルシートを書き換えること。 […]

  11. […] ゼロからはじめる WordPress>WordPressの子テーマ(child theme)機能を使ってみる […]

コメントをどうぞ

メールアドレスが公開されることはありません。