WordPressでテーマ編集のために子テーマを作る方法

WordPressを運用していると、テーマを編集したくなる場合があります。
ですが、直接テーマを編集してしまうとテーマ更新時に変更内容が上書きされて消えてしまいます。

そこで、子テーマを作成して編集を行います。

子テーマの作り方

1.子テーマ用ディレクトリ作成

WordPressをインストールしているディレクトリの中にテーマ用のディレクトリがあります。そこに子テーマ用のディレクトリを新規作成します。

#インストールディレクトリのテーマ用ディレクトリに移動します。
#/path/toは環境に合わせて変えてください。
$ cd /path/to/wp-content/themes

#子テーマ用ディレクトリを作成します。わかりやすいディレクトリ名をつけてください。
$ sudo mkdir hoge_child

2.style.cssファイルの作成

子テーマとしてWordPressに読み込ませるためにまずはstyle.cssというファイルを作成します。

#前の手順で作成したディレクトリに移動します。
#/path/to及びhoge_childは環境に合わせて変えてください。
$cd /path/to/wp-content/themes/hoge_child

#ここまでのパスをコピーします。
$pwd
/path/to/wp-content/themes/hoge_child

#親テーマのあるディレクトリまで移動します。
#/path/toは環境に合わせて変えてください。
$cd /path/to/wp-content/themes
$ls
#ここで出てきたディレクトリの中から親テーマのディレクトリを見つけ、移動します。
$cd hoge

#親テーマのディレクトリにあるstyle.cssを子テーマのディレクトリにコピーします。
#後半の/path/to~はコピーしたものをペーストしてください。
$sudo cp style.css /path/to/wp-content/themes/hoge_child

#子テーマのディレクトリに移動します。
#後半の/path/to~はコピーしたものをペーストしてください。
$cd /path/to/wp-content/themes/hoge_child

#コピーできているか確認します。style.cssが表示されればコピー完了です。
$ls
style.css

#コピーしたstyle.cssを編集します。
$sudo vim style.css

#編集する項目のみ抜粋して記載します。
#編集モードにはiキーを押すと入れます。解除する時はEscキーです。
Theme Name: Hoge Child #子テーマ名
Description: Hoge Child Theme #子テーマの簡単な説明
#以下はAuthor URIの後に追記します。
Template: hoge #親テーマディレクトリ名

#編集できたらEscキーを押し編集モードを解除して、保存します。
Escキー　#編集モード解除
:w #上書き保存
:q #vim終了

#テーマ用ディレクトリまで移動します。
#/path/toは環境に合わせて変えてください。
$cd /path/to/wp-content/themes
$ls #子テーマディレクトリ名を確認
#子テーマディレクトリとファイルの所有者とグループをWebサーバのユーザ・グループに変更します。
#www-dataは一例です。Webサーバのユーザ名等は確認してください。
$ sudo chown -R www-data:www-data hoge_child

#子テーマディレクトリとファイルのパーミッションを775に変更します。
$ sudo chmod -R 775 hoge_child

3.functions.phpファイルの作成

次にfunctions.phpというファイルを作成します。

#前の手順で作成したディレクトリに移動します。
#/path/to及びhoge_childは環境に合わせて変えてください。
$ cd /path/to/wp-content/themes/hoge_child

#新しいファイルとして、functions.phpを新規作成します。
$ sudo vim 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')
    );
}
?>

#ペーストできたらEscキーを押し編集モードを解除して、保存します。
Escキー　#編集モード解除
:w #上書き保存
:q #vim終了

#テーマ用ディレクトリまで移動します。
#/path/toは環境に合わせて変えてください。
$ cd /path/to/wp-content/themes
$ ls #子テーマディレクトリ名を確認
#子テーマディレクトリとファイルの所有者とグループをWebサーバのユーザ・グループに変更します。
#www-dataは一例です。Webサーバのユーザ名等は確認してください。
$ sudo chown -R www-data:www-data hoge_child

#子テーマディレクトリとファイルのパーミッションを775に変更します。
$ sudo chmod -R 775 hoge_child

4.子テーマの有効化

ここまでできたら後はWordPressの管理画面から外観-テーマのページに行き子テーマを有効化すれば完了です。

あとは親テーマから編集したいファイルを子テーマのディレクトリにコピーして、編集すると反映されます。

では、またー