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. 子テーマとは

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

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

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

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

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

  • <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で作成してください。

 

 

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

style.cssに必要な情報を記入する

style.cssに必要な情報を記入する

Theme Name(必須)は任意の子テーマの名前を記載します。

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に自分がカスタマイズしたいプロパティを追加してください。

style.cssにカスタマイズしたいスタイルを記載する

style.cssにカスタマイズしたいスタイルを記載する

 

親テーマのphpファイルを参考にカスタム投稿タイプを作成したり、既存のファイルをカスタマイズしたり、自分の好きなようにカスタマイズしていくことができます。
 
 

3. まとめ

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

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

 

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

子テーマ – WordPress Codex 日本語版
 

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

 

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

大阪堀江の個人事業主向けWebスクール Webst8 バナー

『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のための月額2万円のWebスクールです。

『これから自分でホームページを作成したい』

『今のホームページを自分で更新できるようにしたい』

『ホームページでブランディング・集客・売上アップしたい』

といった方はぜひ当Webスクールにお問い合わせください。

Webst8の詳細はこちら

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

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

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

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

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