WordPress 子テーマの作り方【テーマ カスタマイズ】


WordPressには既存のテーマをカスタマイズしたいときに、そのテーマを引き継いだテーマ「子テーマ」を作成・適用できる機能があります。
 
今回はWordPressで子テーマを作成する手順を記載します。
 

もくじ

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

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

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. 子テーマの作り方

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

 

2-1. 作成環境

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

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(必須)は親テーマのディレクトリ名を記載します。

(その他の項目は必要に応じて記入します。)

 

 

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

functions.phpには以下のように記載します。

(通常はそのままコピぺで大丈夫なはずですが、親テーマがstyle.min.cssを使っているなど名称が違う、複数のCSSを利用しているなど、親テーマによっては必要に応じて読み替えて設定する必要があります。)

 

 

 

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

 

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

子テーマを有効にします。

子テーマを有効にします。

 

 

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

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

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

 

 

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

 

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

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

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

 

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

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

 

こちらの記事もおすすめです


コメント投稿

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

CAPTCHA


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!