今回はWordPressテーマの子テーマについての記事です。

インストールしたテーマをそのまま使用するのではなく、子テーマをわざわざ作るのには理由があります。

子テーマを使用すると編集が楽

子テーマを使用することによって、親テーマの情報を引き継ぐ形になり、フォルダが整理されて普段あまり編集しないファイルを見なくてよくなります。テーマをカスタマイズする際はフォルダ内がごちゃごちゃしていると全体を把握するのにも時間がかかってしまいますのでなるべく簡潔に済ませることができるのであればそのほうが良いです。

無駄な更新をしなくて済む

テーマをインストールして、ずっと親テーマを使用していると気づくと思いますが、function.phpやヘッダー、フッターなどのファイルにGoogleAnalyticsなどのタグを埋め込む作業を、テーマを更新するたびに行わないといけない状況になると思います。

子テーマを作成すると、テーマを更新しても親テーマの情報が更新されるだけで済むので、追加で記述した関数やタグ情報を再度function.phpなどに記述する必要はなくなります。

子テーマの作り方

WordPressの子テーマを作るのに必要な手順を説明します。

今回はブログサイトなどによく使用されているhuemanテーマの子テーマを作る場合で説明します。

①themeディレクトリ配下(huemanフォルダがある場所と同じ階層)にhueman-childディレクトリを作成します。

②必ず必要なファイルは2つ。「function.php」と「style.css」をhueman-childディレクトリ配下に作成します。

<?php
  add_action('wp_enqueue_scripts', 'theme_basic_styles');
  function theme_basic_styles()
  {
      wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
      wp_enqueue_style('child-style', get_stylesheet_directory_uri().'/style.css', ['parent-style']
  );
}
/*
Theme Name: hueman Child
Description: hueman Child Theme
Template: hueman
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
*/

function.phpには最低限の記述を記載し、style.cssに親テーマの情報などをコメントアウトで記載します。

sytle.cssに必ず必要な項目は、テーマの名前(Theme Name)と親テーマの名前(Template)です。

③ここまでできたら、hueman-childディレクトリごとzipファイルに圧縮します。

④wordpress管理画面のテーマからテーマをアップロードします。

⑤テーマを有効化で完成です。

基本的には、Wordpressでテーマをカスタマイズすることがあるのでしたら、子テーマを作ってから制作にとりかかりましょう。

Masa
Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。