子テーマの作成　～WordPressでブログを始める～

前回の「パーマリンクの設定」の記事

子テーマの作成の意味

以前の記事で選択したテーマ（hueman）に対してカスタマイズを加えるのだが、その時にテーマを直接手を加えるとテーマがバージョンアップされた時に折角行ったカスタマイズが消えてしまう事がある。

テーマへの設定値などは残っているのだけれども style.css や functions.php に手を加えてのカスタマイズは消えてしまう事もある。

それを避ける方法として子テーマを作って元のテーマをテンプレート（定形のフォーマット）として指定すると子テーマは、

1. 元テーマのすべての機能を引き継ぐ（同じ設定ができる）
2. 子テーマへのカスタマイズは元テーマがバージョンアップされても残る

が実現出来てとても都合が良い。

尚、hueman では外観ー＞カスタマイズー＞詳細設定ー＞追加CSSで css を追加する事ができる。

ここで cssを追加する分にはテーマをバージョンアップしても追加した css は残るのだが、子テーマを作成する方法を試してみることにした。

資料はここを参考にした。

尚、今回は hueman のテーマで行ったが他のテーマの場合でも子テーマの作成方法は同じである。

子テーマ用のディレクトリを作成する

まず子テーマ用のディレクトリを作成する。

ディレクトリ名は “元ディレクトリ名-child” のルールがある模様。

違っても動くみたいだけどこのルールにしておけば複数の子テーマを作った時も分かりやすい。

対象ディレクトリに移動してディレクトリを作成する。

cd /var/www/wordpress/wp-content/themes
sudo mkdir hueman-child

上記のディレクトリは Linux OSに WordPress をインストールした時の標準的なディレクトリだ。

環境によってはディレクトリが異なるので注意して欲しい。

また、PuTTY等のターミナルソフトで ssh 接続してコマンドでディレクトリを作成している。

サーバーの契約（レンタル、共有、専用、VPS・・・）によっては操作が異なるので詳しくはサーバーの説明を確認して欲しい。

自分は AWS（Amazon Web Services）に OS は Ubuntu Server を選択して WordPress をインストールして PuTTY で接続している。

style.cssの作成

先程作成したディレクトリに移動してstyle.cssを作成する。

作成するcssの中身は以下の通り。

/*
Theme Name: hueman Child
Theme URI: http://example.com/
Description: hueman Child Theme
Author: souichirou
Author URI: http://example.com
Template: hueman
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: hueman-child
*/

一見、コメントアウトされていてこれでいいのか？とも思ったけどコードとして認識している。

以下の２つの項目は必須。

後は適当にしておいた。

cd hueman-child
sudo vim style.css

WordPress のメニューから外観ー＞テーマエディターで子テーマの style.css を呼び出して、そこに css を追加する事ができる。

それについてはまた別の記事で紹介するが、前述の外観ー＞カスタマイズー＞詳細設定ー＞追加CSSで css を追加する方が後から読み込まれて有効になる様だ。

※ css は後から読み込まる方が有効になる。

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')
);
}
?>

wp_enqueue_styleを使ってcssを読み込んでいる。

子テーマのcssは、通常は自動的に読み込まれるのでparent-styleの行だけで大丈夫。

念の為、child-styleも明示的にエンキューした。

sudo vim functions.php

オーナーとグループの変更

ファイルを作成した後、hueman-child ディレクトリ以下のオーナーとグループをwww-data（ubuntuの場合、www-dataがapache等のWEBサーバーを操作するデフォルトのユーザとグループ）に変更する。

cd ..
sudo chown -R www-data:www-data hueman-child

sudo コマンドで作成したのでオーナー、グループ共に root で作成されていたので www-data に変更した。

子テーマを有効化する

WordPressのメニュー外観ー＞テーマを選択すると新しく作成した子テーマが表示されているので選択して有効化ボタンをクリックして有効化する。

有効化された。

サムネイル画像が表示されていないので「これで大丈夫なのか？」と不安になったけど「カスタマイズ」ボタンを押してみると元テーマのhuemanと全く同じ項目が設定できる事が分かる。

以上で今回の記事は終了とする。

次回の「hueman テーマのカスタマイズ WEBページデザイン編」の記事に続く