WordPressで子テーマを作成してカスタマイズする方法

WordPressで子テーマを作成してカスタマイズする方法

ワードプレスのテンプレートを使う場合、子テーマを利用することでメンテナンス性が向上して、色々な不具合を予防できます。
 

今回はWordPressで子テーマを作成する手順を説明していきます。
 

(※追記)WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。
 

ワードプレスをレイアウトをカスタマイズしようと思っています。今のテーマのCSSファイルとかを編集すれば良いんですよね??
確かにそれでもカスタマイズはできるんですけど、ワードプレスには子テーマという機能があって、子テーマを利用してカスタマイズする方法が推奨されているんですよ(※注)
 

子テーマ??なんですか、それは?
今適用している親テーマのデザインや機能をそのまま引き継いだテーマのことです。子テーマを自分流にカスタマイズすることでWordPressをカスタマイズすることができます。

 

そうなんですね。子テーマの方が良い理由はあるんですか??
子テーマを使うことでメンテナンス性が向上して、色々な不具合を予防できるんですよ。今回はWordPressで子テーマを作成する手順を説明していきますね!
 

 

【WordPress対応】自分でホームページ・ブログを作成したい個人事業主のためのWebスクール
 ウェブストエイト

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

 

概要

子テーマとは

子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。
 

適用している既存のテーマのファイルをそのままカスタマイズした場合、そのテーマをアップデートすると自分でカスタマイズした内容が全てリセットされてしまいます。
 

適用している既存のテーマのファイルをそのままカスタマイズした場合、そのテーマをアップデートすると自分でカスタマイズした内容が全てリセットされる
 

既存のテーマと独立して子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなるので、既存のテーマをカスタマイズする場合は子テーマの利用が推奨されています。

親テーマを継承した子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなる
 
(※)本番環境のワードプレスのテーマをバージョンアップ・更新する際は、万一のためにバックアップを取得して元に戻せるようにしておきましょう。
 
バックアップの取得方法は以下をご参照ください。
WordPressのバックアップ 有名プラグインbackWPupの使い方
 
 

(補足)WordPress 4.7からリリースされた追加CSS機能

WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。
 

追加CSSを利用するには、ワードプレスにログインした状態でカスタマイズボタンを押下します。
WordPress カスタマイズ
 

追加CSSを押下します。
WordPress カスタマイズ>追加CSS
 

CSS編集画面で任意のCSS設定を行うことができます。
WordPress カスタマイズ>追加CSSからCSSの編集する
 

また、この追加CSSで編集した内容はテーマのテンプレートを直接編集していないため、テーマが更新されても内容がクリアされることはありません。
 

ただし、ここで設定したCSSはテーマごとに設定が保存されているため、テーマを変更するとCSS設定はクリアされますので注意してください。
 

でも追加CSS機能を利用すれば子テーマは作らなくても良いのでしょうか??使い分け方とかあるんでしょうか。
 

確かにそうですね!
 

使い分け方としては、小規模なCSS設定であればこの追加CSS機能を利用。
テンプレート(xxxx.php)を変更する場合や大規模なCSSカスタマイズをする場合など、より本格的にカスタマイズしたい場合に子テーマを利用する
といったような使い分け方をすると良いと思います。
 

なお、親テーマの追加CSSでCSS設定したあとで子テーマを作成した場合は、親テーマの追加CSSは引き継がれないので注意してください。
 

この場合は子テーマを有効化する前に追加CSSの内容を控えておき、子テーマを有効化後に改めてCSSの設定をしてください。
 
 

子テーマの作るには

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下の図が子テーマの最小構成図です。

wordpress 子テーマの構成図

wordpress 子テーマの構成図

 

必要なフォルダ・ファイルは以下の通りです。

  • <WordPressインストールディレクトリ/wp-content/themes>/子テーマのディレクトリ
  • style.css
  • functions.php(※)

(※)fuctions.phpを使わなくても子テーマとして動作するのですが、親テーマのCSSを正しく継承するためにはfunctions.php が必要であるため実質ほぼ必須になります。
 
 

子テーマの作り方

有名なテーマの場合は、「テーマ名 子テーマ」で検索すると、配布元から子テーマのサンプルファイルが配布されていたり、手順が載っている場合があります。

まずは、「テーマ名 子テーマ」で検索してみましょう。

例. Lightningの子テーマ
lightning 子テーマで検索
 

wordpress lightning子テーマサンプルファイルのダウンロード
 
 

作成環境

ここではhabakiriというテーマを利用して子テーマを作成する手順を記載します。

以下は本記事作成時の環境です。

WordPress バージョン 4.5.3

habakiri バージョン2.4.0

※2016.07.25時点での手順になります。

 

作成手順

まずWordPressのthemesディレクトリに子テーマ用ディレクトリ「habakiri-child」を作成します。

子テーマディレクトリを作成する

子テーマディレクトリを作成する

 

次にhabakiri-childディレクトリの直下にstyle.cssとfunctions.phpの2つのファイルを新規作成します。

style.cssとfunctions.phpの2つのファイルを作成する

style.cssとfunctions.phpの2つのファイルを作成する

※Windowsをご利用の方で文字コードuft-8以外になっている場合はutf-8で作成してください。
 

現時点で下記のようになっていることを確認してください。

wordpress 子テーマの構成図

wordpress 子テーマの構成図

 

 

次にstyle.cssにテーマ名 (Theme Name)や親テーマのディレクトリ名(Template)を記載します。

 

Theme Name(子テーマの名前。なんでも良いがここでは「habakiri-child」とします)
Template(親テーマのディレクトリ名「ここでは habakiri になります」
を記載してください。
 

そのほか、下記のように必要に応じて項目を追加することもできます。省略しても構いません。

 

 

続けてfunctions.phpに親テーマのCSSを明示的に読み込む設定を行います。

親テーマがhabakiriの場合は以下のように記述します。

(※)Habakiri 2.3.0 以降は自動的に Habakiri のスタイルシートが適用されるようになり、上記コードは必須ではなくなったようです。
 

なお、一般的にはfunctions.phpには以下のように記載します。(通常は下記をコピー&ペーストで大丈夫ですが、親テーマがstyle.min.cssを使っているなど名称が違う・複数のCSSを利用している場合など、親テーマによっては必要に応じて読み替えて設定する必要があります。)

 

詳細が下記にありますのでご確認ください。
WordPress Codex 日本語版
wp_enqueue_script()
 

これで子テーマの最低限の内容ができあがりました。
 

WordPressの管理者画面>外観>テーマから子テーマを有効にします。

子テーマを有効にする

子テーマを有効にする

 

 

トップページを見て親テーマと初期画面が同じであることを確認します。

子テーマ有効時の初期画面

子テーマ有効時の初期画面

 

 

ここからは自分のカスタマイズしたい内容に応じて自由に子テーマをカスタマイズしていきます。

 

style.cssに自分がカスタマイズしたいプロパティを追加してください。

 

CSSだけでなく、親テーマのphpファイルを参考に自分の好きなようにカスタマイズしていくこともできます。
 

たとえば、footer.phpをカスタマイズしたいときは親テーマのfooter.phpを子テーマにコピーして、子テーマ内のfooter.phpをカスタマイズできます。

子テーマの設定 親テーマからファイルをコピーしてカスタマイズできる

親テーマのファイルをコピーしてカスタマイズ

 

そのほか子テーマでファイルを増やして独自のカスタム投稿タイプを作成したり、親テーマの既存のファイルをカスタマイズしたり、など自分の好きなようにカスタマイズできるのでぜひいろいろ試してみてください。
 

【WordPress対応】自分でホームページ・ブログを作成したい個人事業主のためのWebスクール
 ウェブストエイト

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

 

まとめ

今回は子テーマとはなにか、子テーマの作成方法について説明しました。
 

親テーマを継承した子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなるので、テーマをカスタマイズする際に推奨されているやり方です。
 

親テーマを継承した子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなる
 

子テーマを自分流にカスタマイズすることでWordPressをカスタマイズすることができます。
 

下記のサイトにもWordPressの子テーマの作り方などが記載されていますのでご興味ある方はご確認ください。
 

子テーマ – WordPress Codex 日本語版
 

当Webスクールでは、Web活用したい個人事業主さま向けにホームページ作成、ウェブマーケティングやSEO対策を教えています。詳細はこちらにありますのでよかったら是非お問い合わせくださいね。

詳細はこちら

今回は以上になります。最後までご覧いただきありがとうございました。

 

自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室
自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 スタンダート48時間コースとプロフェッショナル80時間コースから選択して受講できます。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ