【子テーマって？】初心者のためのWordPress子テーマの作り方！functions.phpとcssで解決します。

2020 11/11

2020.11.11 2020.11.11

こんにちは、クリブロです！

今回はWordPressの子テーマについて、超わかりやすく解説いたします。

結論、functions.phpとcssという2つのファイルを作成するだけで解決します。

いろんなサイト見ても、結構「どゆことだ？」ってなることが多いので、初心者でもわかるようにシンプルかつ丁寧に解説したいと思います！

この記事は、

そもそも子テーマって何かわからん！

どうやって子テーマを作れば良いんだろぉ〜〜？？

って方のための記事となっております。

【そもそも子テーマとは？】子テーマを作る理由

子テーマとは、簡単にいうと既存テーマを自分好みに安全にカスタマイズするために用意するものとなります。

WordPressテーマには、親テーマ、子テーマと呼ばれるものがありますが、

親テーマ　→　そのテーマ自体のこと。基本のテーマ。
子テーマ　→　カスタマイズ用に作成するテーマ。

ということになります。

なんで、基本のテーマにそのまま上書きしちゃいけないの〜〜？

って思う方もいるかと思いますが、その理由は直接テーマを編集してしまうと弊害が起こるからです。

それは、テーマがアップデートされると変更が失われるというものです。

既存のWordPressテーマというのは、
WordPressの仕様の変更や、新しい機能の追加のために適宜アップデートされます。

そのアップデートごとに、自分が独自で修正・変更した点が消されてしまっては、大変ですよね？

なので、子テーマでカスタマイズしよう！ということになります。

つまり、子テーマでカスタマイズすることで、

バージョンアップにも耐えれる（子テーマを使用すればテーマの変更は確実に保持される。）
簡単に、気兼ねなく自分のカスタマイズが書ける
テーマの重要な記述を消してしまうリスクが低くなる
親テーマをベースにするので開発時間を短縮できる
WordPressのテーマの適切な開発を学べる

と言ったメリットがあります！

クリブロ

親テーマで骨格をバックアップした上で、子テーマで自分好みにカスタマイズするイメージだね！

子テーマの仕組みについて

WordPressテーマ内のファイルは基本的に、「親テーマ→子テーマ」の順に読み込まれます

つまり、子テーマは親テーマを継承後に反映されるということです。

そうすれば既存テーマのコードが反映しながら自分のコードを上書けるためです。

例えば、固定ページのテンプレートである「page.php」が親テーマにあるとしても、
子テーマにも「page.php」があれば、子テーマの「page.php」が反映されます。

これは固定ページに限らず、基本的にはどのテンプレートファイルでも子テーマが上書きされます！

CSSの場合は”上書き”ではなく、”追加”となりますので、ご注意を！
親テーマのCSSはそのまま反映された上で、子テーマのCSSが追加されるイメージです。

クリブロ

基本的には子テーマが優先されると覚えておこう！

【これで解決！】子テーマの作り方

結果からいうと、「style.cssとfunctions.phpを用意する。」これだけです。

詳しく見ていきましょう！

子テーマのフォルダを用意する

WordPressテーマ内のthemesフォルダの直下に「（親テーマ名）-child」の名前で、
新規フォルダを作成しましょう！

名前については、絶対ではないですが、暗黙の了解的にこの形がベターです。

例えば「creblo」っていう親テーマであれば、「creblo-child」みたいな感じです！

style.cssを作成する

新規作成した子テーマフォルダ内に「style.css」という名前でCSSファイルを作成します。
style.cssのコードの記述例を以下に載せておきますね！

/*
 Theme Name:   Creblo Child ←子テーマ名　※必須
 Theme URI:    http://creblo-themes/creblo/ ←テーマのサイトURL
 Description:  Creblo Child Theme ←テーマの概要
 Author:       Creblo ←テーマの制作者
 Author URI:   https://creblo.com/ ←テーマのサイトURL
 Template:     creblo ←親テーマのディレクトリ（フォルダ）名　※必須
 Version:      1.0.0 ←バージョンの数字
*/

基本的には、

Theme Name　→　子テーマ名
Template　→　親テーマのフォルダ名

の2点が記述されていれば、OKです！

あとは親テーマのcssの読み込みと、追加したいcssを記述しましょう！

なので、最低限の記述で子テーマでcssを上書きするなら、こうです。

/*
Theme Name: Creblo Child
Template: creblo
*/
 
/*　↓追加したいスタイルを記述↓　*/
 
h1 {
    width: 100%;
}

functions.phpを作成する

次に同じく子テーマフォルダ内にfunctions.phpを作成しましょう！

その中に、こちらのコードを記述してください。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

これで子テーマを認識させることができます！

クリブロ

コピペで簡単！あとは子テーマ有効化するだけ！