Habakiri はカスタマイズ前提のテーマであるため、子テーマを作成する機会が多いのではないかと思います。ここでは子テーマの作成方法をご説明します。
1. 子テーマ用のディレクトリを作成する
まずはテーマディレクトリに子テーマ用のディレクトリを作成します。ここでは子テーマの名前をhabakiri-child
としてすすめます。下記のような感じの配置になります。
/wp-content/ /themes/ /habakiri/ /habakiri-child/
2. syle.css を作成する
ディレクトリを作成したら、その中にstyle.css
を作ります(ちなみに、子テーマの場合、必ず必要になるファイルはstyle.css
だけです)。style.css
にはスタイルシートヘッダというテーマの情報を書く決まりがあります。下記を参考にstyle.css
の頭にスタイルシートヘッダを記述してください。
/* Theme Name: habakiri-child Theme URI: http://2inc.org ( テーマのURL ) Description: Habakiri の子テーマです ( テーマの説明 ) Author: Takashi Kitajima ( 作者名 ) Author URI: http://2inc.org ( 作者のURL ) Version: 1.0.0 License: GNU General Public License License URI: https://www.gnu.org/licenses/gpl-2.0.html Template: habakiri */
ここで大事なのは一番下の行、Template: habakiri
の部分です。これを書くことで、このテーマが Habakiri の子テーマと認識されます。スタイルシートヘッダを記述できたら、先ほど作成した子テーマのディレクトリにアップロードしてください。
3. テーマを有効にしてみる
WordPress の管理画面にログインし、テーマの選択画面を開いきます。すると、habakiri-child というテーマがでてきていると思いますので、それを有効化してください。habakiri-child が表示されていなかったり、有効化できない場合はスタイルシートヘッダの記述に誤りがある可能性がありますのでよく見なおしてください。
4. Habakiri のスタイルシートを適用する
子テーマを作成し、有効にしただけでは親テーマである Habakiri のスタイルシートが適用されません。Habakiri のスタイルシートを適用するには子テーマのディレクトリ内にfunctions.php
を作成し、Habakiri のスタイルシートを読み込みますよーという記述を書かなければいけません。下記の内容でfunctions.php
を作成し、テーマディレクトリにアップロードしてください。
<?php function habakiri_child_theme_setup() { class Habakiri extends Habakiri_Base_Functions { public function wp_enqueue_scripts() { wp_enqueue_style( get_template(), get_template_directory_uri() . '/style.min.css' ); parent::wp_enqueue_scripts(); } } } add_action( 'after_setup_theme', 'habakiri_child_theme_setup' );
これで Habakiri のスタイルシートが適用されるようになります。
5. Habakiri のデザインをオリジナルのスタイルで上書きする
ここまでで、Habakiri のときと全く同じデザインになっているかと思います。では、子テーマで Habakiri のデザインを上書きしてみましょう。子テーマの CSS は2で作成したstyle.css
に記述します。ここに CSS を書くことで Habakiri のスタイルを上書きできます。CSS はスタイルシートヘッダの下に書いてください。例えば下記のような感じです。
/* Theme Name: habakiri-child Theme URI: http://2inc.org ( テーマのURL ) Description: Habakiri の子テーマです ( テーマの説明 ) Author: Takashi Kitajima ( 作者名 ) Author URI: http://2inc.org ( 作者のURL ) Version: 1.0.0 License: GNU General Public License License URI: license.txt Template: habakiri */ body { font-size: 13px; }