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

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

 

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

 

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

 

花子さん
へえ。そうなんですね。
太郎くん
子テーマを使うことで色々な不具合を予防することもできるんですよ。今回はWordPressで子テーマを作成する手順を説明していきますね!
 
 

もくじ

以下は本記事のもくじです。

  1. 1.概要
    1. 1-1.子テーマとは
    2. 1-2.子テーマを作るには
  2. 2.子テーマの作り方
    1. 2-1.作成環境
    2. 2-2.作成手順
  3. 3. まとめ


 
 

1. 概要

1-1. 子テーマとは

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

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

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

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

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

1-2. 子テーマの作るには

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

wordpress 子テーマの構成図

wordpress 子テーマの構成図

 

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

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

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

2. 子テーマの作り方

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

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

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

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

2-1. 作成環境

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

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

WordPress バージョン 4.5.3

habakiri バージョン2.4.0

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

 

2-2. 作成手順

まず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をカスタマイズできます。

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

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

 

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

3. まとめ

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

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

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

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

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

子テーマ – WordPress Codex 日本語版
 

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

 

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

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。

継続6ヶ月コース

通常 15万円【2017年中】12万円(税抜)
ホームページ作成からWeb集客まで一通り習得したい方向けのコースです。

お試し1ヶ月コース

通常3万円【2017年中】2万円(税抜)
特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコースです。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

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

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

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

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