ワードプレスの親テーマに子テーマを作成する方法の備忘録

2019/06/01

ワードプレスの子テーマを作成したものの、親テーマをカスタマイズしすぎてほぼ触っていませんが、一応忘れた時の為に備忘録として残しておきます。

子テーマ作成の手順は以下のようになります。

親テーマがあるフォルダ内に子テーマのフォルダを作成する
作成した子テーマのフォルダ内にstyle.cssと言うCSSファイルを保存する
子テーマフォルダー内にfunctions.phpというPHPファイルを作成する
子テーマを有効にする

テーマフォルダに子テーマフォルダを作成する

子テーマフォルダの作成手段は2種類あります。

お使いのレンタルサーバーにファイルマネージャーがある場合、ファイルマネージャーで作成
FFFTPなどのファイル転送ソフトで作成

FFFTPについては別記事に使い方を書いていますので参考にして下さい。

子テーマを作成するディレクトリは、以下のようにフォルダを開いていってthemesフォルダの中に作成します。themesフォルダに親テーマのフォルダもあるはずです。

public_html
- 自分のサイトのドメイン
  - wp-content
    - themes

フォルダの名前は、親テーマの名前の後にchildをつければ分かりやすくて良いと思います。例えば、twentyseventeen_childなど。

子テーマフォルダの作成は以上です。

style.cssファイルの作成と保存

次にstyle.cssと言うファイルを作成し、子テーマフォルダ内に保存します。エディターなどで下のように書いて保存します。下の記述は例として、テーマ「TwentySeventeen」の記述になります。

/*
Theme Name: twentyseventeen_child
Template: twentyseventeen
*/

Theme Name: twentyseventeen_child

Template: twentyseventeen

記述の際の注意点は、Theme Nameに子テーマフォルダの名前を記述して、Templateに親フォルダの名前を記述します。スペルが間違ってないかよく確認してください。

function.phpの作成と保存

次に、function.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')
);
}
?>

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );