【WordPress】テーマ「Hueman」のカスタマイズ 子テーマを作成する

当サイトで使用しているテーマ「Hueman」の、記事単体ページのカスタマイズについての記事です。

今回は、子テーマを作成した内容をご紹介します。
テーマ「Hueman」のカスタマイズを行いたい人の参考になれば幸いです。
※テーマの編集は、必ずバックアップを取ってから行いましょう！

Huemanのバージョン: 3.2.12

子テーマとは？

子テーマが何なのかについては、WordPress Codex(Wiki)に詳細が記載されています。

考え方としては、テーマ「Hueman」が「親（オリジナル）テーマ」と位置付け、カスタマイズ要素のみを持った「子テーマ」を関連付けることによって、
親テーマを直接編集することなくカスタマイズを反映することができる方法の事です。
管理画面から行える「外観→カスタマイズ」を触るよりも前に、子テーマを作成することをオススメします。

なぜ、親テーマを直接編集しないのか？

親テーマを編集しない最大の理由は、WordPressの仕様に関係してきます。

テーマには「アップデート」があり、この「アップデート」を行うとテーマが「上書き」されるため、
直接編集していた場合「最新バージョンのまっさらな状態」に更新されます。

つまり、アップデート前に行ったカスタマイズは事実上リセットされてしまう、というわけ。
そうなると、アップデートするたびにカスタマイズを「し直す」必要があり、非常に面倒です。

子テーマ＝親テーマと関連付けられた「別個のテーマ」だからリセットされない

テーマがアップデートされると、カスタマイズがリセットされてしまう。
そのため、「テーマがアップデートされても、カスタマイズ内容が残る構造」にしたいですよね。
そこで、「子テーマ」を活用します。

親とか子とか呼ぶからややこしい！
実際には「Hueman」と関連付ける設定を行った、別のテーマ「Hueman-child」を作成し、
私自身は「Hueman-child」をカスタマイズしていく、という流れになります。

「Hueman」と「Hueman-child」は、関連付けられているだけで「別個のテーマ」のため、
もし「Hueman」がアップデートされても、「Hueman-child」がリセットされてしまうことはないわけです。

子テーマを作るための手順

1. 子テーマのためのディレクトリ（フォルダ）を作成する
2. 子テーマのためのディレクトリ内にfunctions.phpを設置
3. 子テーマのためのディレクトリ内にstyle.cssを設置

子テーマのためのディレクトリ（フォルダ）を作成する

子テーマを作成するためには、まず子テーマのファイルを置くためのディレクトリが必要になります。
\wp-content\theme内に、ディレクトリhueman_childを作成します。

子テーマのためのディレクトリ内にfunctions.phpを設置

作成したディレクトリhueman_childの中に、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' );
}

子テーマのためのディレクトリ内にstyle.cssを設置

作成したディレクトリhueman_childの中に、style.cssを設置します。
style.cssには、最低限以下の記述が必要です。

/*
 Theme Name:   Hueman Child
 Template:     hueman
*/

これで、子テーマを設置する準備が整いました。

WordPress側で有効化できるように、ディレクトリをアップロードする

子テーマ用のディレクトリを、FTPソフト等を使ってサーバへアップロードし、
Wordpressの管理画面にログインします。

「外観→テーマ」を選択すると、アップロードした「Hueman-child」が追加されていますので、有効化します。

これで、Huemanの子テーマを使う準備ができました。

子テーマを有効化した後は

「Hueman-child」は、あくまで「Hueman」に関連付けられたテーマですので、
「Hueman」と同じディレクトリ構造でカスタマイズしたいファイルを設置し、カスタマイズしていく必要があります。

カスタマイズしたいファイルがどこにあるのかをHueman側で探し、必要であれば同じ名前のディレクトリをHueman-child内に作成後、
ファイルをコピー＆ペーストする等してカスタマイズしていきます。

＜スポンサードリンク＞