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

ぜひ読んでほしい方

・WordPressサイトのデザイン等をカスタマイズしたい方
・HTML、CSS、PHPを書ける方
・WordPressのテーマについて理解している方

WordPress子テーマとは？

　WordPressには、テーマと呼ばれるサイトのテンプレートがあります。そして、既存のテーマを使えば簡単にWordPressでサイトを作ることができます。しかしながら、必ずしも気に入ったテーマが見つかるとは限りません。また、だからといってテーマをイチから自前で制作するのも大変です。

　そこで、子テーマを作成してカスタマイズするという方法があります。これは、基本は既存テーマのデザイン等をすべて引き継ぎ、変えたい部分だけ自分で変えるということになります。ですので、イチから自前で制作するのに比べたら格段に楽でに、自分の好みのデザインにしたり機能を付け加えたりすることができます。

WordPress子テーマに最低限必要なテーマファイル

　WordPressで子テーマを作成する上で最低限必要なファイルが二つあります。それは「style.css」と「functions.php」です。
そして、これらのファイルに必ずしなければならない記述がありますので、以下でそのコードについて説明していきます。

style.css

　一般的なサイトおけるstyle.cssの役割は、言わずもがなサイトのデザインを整えることです。
　しかし、WordPress子テーマにおいては、これに加えてテーマについての情報を記載するという、別の役割も担っています。

　そこで以下に示すように、作成する子テーマについての情報をstyle.cssの一番最初に記載する必要があります。

/*
Theme Name: 子テーマの名前
Template: 引き継ぎ元のテーマの名前
*/

1

2

3

4

/*

Theme Name: 子テーマの名前

Template: 引き継ぎ元のテーマの名前

*/

　これを記載したら、あとは通常通りのcssコードを記述して、デザインをカスタマイズすればいいことになります。

functions.php

　WordPressサイトにおけるfunctions.phpの役割は、そのテーマに必要な関数の記述です。
　WordPress子テーマにおいては、まず既存テーマのデザイン等を引き継がなければなりませんので、その引き継ぐ関数を記述する必要があります。

　その関数が以下になります。

<?php
function child_styles() {
    wp_dequeue_style( 'theme-style' );
    wp_enqueue_style( 'theme-parent-style', get_template_directory_uri() . '/style.css', [], wp_get_theme()->get('Version') );
    wp_enqueue_style( 'theme-child-style', get_stylesheet_uri(), ['theme-parent-style'], wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'child_styles', 11);

1

2

3

4

5

6

7

<?php

function child_styles() {

wp_dequeue_style( 'theme-style' );

wp_enqueue_style( 'theme-parent-style', get_template_directory_uri() . '/style.css', [], wp_get_theme()->get('Version') );

wp_enqueue_style( 'theme-child-style', get_stylesheet_uri(), ['theme-parent-style'], wp_get_theme()->get('Version') );

}

add_action( 'wp_enqueue_scripts', 'child_styles', 11);

作成した子テーマを有効化

　まず、作成した子テーマをWordPressの方にアップロードする必要があります。

　アップロードする準備として、先ほど作成した「style.css」「functions.php」をフォルダにまとめます。そして、そのフォルダをZip形式に変換します。Zip形式にしたら、いよいよアップロードしていきます。

　まず、WordPressサイトの管理画面の「テーマ」の項目にいきます。
　そうしたら、[新規追加]→[テーマのアップロード]とクリックしていきます。

　すると、Zipファイルをアップロードするところが出てくると思うので、先ほど作成したZipがファイルをアップロードしてください。

必須以外のテーマファイルについて

　先述の通り、最低限必要な「style.css」と「functions.php」があれば子テーマを作ることができます。しかし場合によってはそれ以外のファイルも作る必要があります。それは、例えば既存テーマのheader.phpをカスタマイズしたいなどの、特定のファイルをカスタマイズしたい場合です。以下では、このような場合の子テーマの作り方を説明します。

　例えばheader.phpをカスタマイズしたい場合は、子テーマにheader.phpという名前のファイルを作ります。
　そして、作ったファイルに既存テーマのheader.phpのコードをそのままコピぺします。このコピペをしないと、既存テーマをコード引き継がなくなってしまうので、忘れないようにしてください。コピペをしたら、新たなコードを書くなり、不要な部分を消すなりしてカスタマイズしてください。

　今回は、header.phpを例に挙げて説明しましたが、他のテーマファイルについても同様です。(style.css、functions.phpを除く)