子テーマ作成に必要なもの3つ
子テーマ作成時、以下の3つは必ず必要です。
(1)子テーマ用フォルダ
(2)style.css
(3)function.php
子テーマ作成の手順
「テーマ名_child」などのフォルダを作成します。
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます(ただし必須ではありません。)
WordPress公式サイト(子テーマ)参照
そのフォルダ内に以下のものを作成します。
style.cssの作成
子テーマフォルダ内に新規のstyle.cssを作成します。
[簡単な方法] 親テーマの「style.css」の最初のコメント部分(/*〜*/)を子テーマの「style.css」へコピーして貼り付け、必要箇所は追加変更します。 太字部分は必須です。
/* Theme Name: Twenty Seventeen Child Theme URI: https://wordpress.org/themes/twentyseventeen/ Template: twentyseventeen /*(親テーマのディレクトリ名を書く)*/ Author: SayokoMiura Description: Twenty Seventeen Child theme. Version: 1.0 */
functions.phpの作成
子テーマフォルダ内に新規のfunctions.phpを作成します。
<functions.phpのみは子テーマと親テーマ両方を読み込む設定となります。>
(他のファイルは、子テーマにコピーされたものは親テーマを上書きして利用されます。(両方にあったら子テーマ優先))
WordPress公式サイト(子テーマ)参照
[簡単な方法]
上記WordPress公式サイト(子テーマ)からコピペし、1行目に「 <?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' );
}
themeにアップロード
アップロードすると、WordPress管理画面の「外観ーテーマ」に子テーマが出てきます。
テーマに子テーマが出てこない時は!
子テーマの「style.css」の
Theme Name: 子テーマ名
Template: 親テーマのフォルダ名を指定しましょう!
大文字・小文字も判断するので気をつけましょう
は合っていますか?
記述はありますか?
テーマの中に子テーマが出てきたら、有効化します。
サイトを表示してみて、スタイルが反映されていなかったら!
子テーマの「functions.php」を確認しましょう
①「functions.php」のスペルミスはありませんか?
意外とこれあります。私も実は・・・
②「functions.php」の1行目に
<?php
はありますか?
<?php 以下の内容は、WordPress公式サイトの正しい部分をコピペしていますか?
カスタマイズのコツ
①CSSの編集
ディベロッパーツールを使うと便利です。
子テーマに書いていくと親テーマをアップデートしても影響しません。
②HTMLの編集
親テーマからパーツなどのファイルをコピーして使用します。
・子テーマにコピーされたファイルは親テーマを上書きして利用されます。(両方にあったら子テーマ優先)
・function.phpのみは親のものも読み込まれます。
screenshotも作ってみましょう
「screenshot」はWordPressの管理画面のテーマで見ることのできるテーマの画像です。
サイトトップページのファーストビューなどで作成すると良いでしょう。
作成したら、子テーマのフォルダに入れて、管理画面のテーマで見ることができるか確認しましょう。
- 拡張子 : png 「screenshot.png」
- サイズ:880px × 660px