縦ぽん!!

前回の記事でWordPressテーマ「Garyu」のインストール手順について解説しましたが、テーマをカスタマイズする場合は「子テーマ」を作ることが一般的です。直接テーマをカスタマイズした場合、テーマがアップデートされた場合にせっかくカスタマイズした内容が失われてしまうからです。


ここでは子テーマの作り方とカスタマイズする際の注意点などについて解説します。また、Codexには子テーマに関する詳細な説明がありますので、こちらも併せて確認しておいた方が良いでしょう。

この記事は過去の記事を基に再編集したものです。

準備するもの

まず、子テーマを作るために以下のものを用意します。どちらも無償のもので十分です。

  • UTF-8形式が扱えるテキストエディタ
  • 作成した子テーマをサーバーへアップロードするFTPクライアント

WordPressの子テーマとして作成するファイルは全てテキストファイルですので、テキストエディタを用意します。汎用のテキストエディタでも問題ありませんが、せっかくですのでPHP、JavaScript、スタイルシートを簡単に扱えるものを使用した方が良いでしょう。

私がおすすめしたいのはVisual Studio Codeです。マイクロソフトにより開発されたVisual Studio Codeは比較的新しいテキストエディタですが、動作が軽くコード補完がしっかりしているため、ソースコードを扱うには最適といってよいくらいのものです。また、バージョン管理のGitとの連携ができるため、修正したソースコードを容易に管理できるメリットもあります。

作成した子テーマを使用するには、サーバーへファイルをアップロードする必要があります。テーマファイルをインストールしたように、子テーマファイルをまとめて圧縮して管理画面からインストールことも可能ですが、FTPクライアントを用意すれば任意のファイルをアップロードできるため、こちらも用意しましょう。

無償のFTPクライアントにはいくつかありますが、動作が早くて大量のファイル転送でも問題が起こりにくいFileZillaあたりがおすすめでしょうか。WordPress自体を自力でインストールした方は、既にFTPクライアントを使用されていると思いますので、それをそのまま使うのが良いでしょう。

ちなみに、紹介したVisual Studio CodeとFileZillaですが、どちらもWindows、Linux、macOSで動作するそうです(私が使用しているのがWindowsですので、他はわかりません)。

子テーマに必要なファイルなど

子テーマを構成するものとして以下のものが最低限必要となります。ファイルについてはUTF-8で保存するのを忘れないようにしましょう。

  • 子テーマファイルを格納するディレクトリ
  • style.css
  • functions.php

ディレクトリについて

子テーマファイルを格納するディレクトリを用意します。名称は任意の名称で問題ありませんが、元となるテーマの後ろに ‘-child’ を付けることが推奨されています。また、子テーマディレクトリの名前には空白を含めないでください。

ディレクトリを用意する場所については、パソコンの任意の場所で問題ありません。わかりやすい場所に作成します。

style.cssについて

子テーマに記述する内容は一般的なスタイルシートとほぼ同じです。ちがうところはWordPressの「子テーマ」として認識させるために、style.cssの先頭に以下のような内容が記述されていることです。

/*-----------------------------------------------------------------------------
Theme Name: garyu-typea
Template:   garyu
-----------------------------------------------------------------------------*/

「Theme Name」の後ろに子テーマの名前を、「Template:」の後ろに元となるテーマの名前を記述します。子テーマの名称は作成したディレクトリ名に合わせます。

functions.phpについて

スタイルシートは「子テーマ」を認識させるためと、外観をカスタマイズために必要となりますが、元となるテーマのスタイルシートを読み込むために関数wp_enqueue_script()を使用する必要があるため、必然的にfunctions.phpも用意しなければなりません。

元となるテーマのスタイルシートを使わずにすべてを独自に定義することも可能ですが、子テーマという意味からは少し外れるような気がします。

functions.phpに記述する内容ですが、基本的には以下の内容で問題ありません。

function theme_enqueue_styles()
{
  wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

当サイトで用意してある子テーマ「Garyu-TypeA」では、デフォルトスタイルのためのnormalize.cssやwebフォントのfontawesome、jQueryプラグインのLightbox2などの関係からfunctions.phpに記述する内容が少々異なります。

function theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css', array('normalize', 'fontawesome', 'lightbox2'));
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri().'/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

この内容が当サイトのページに反映すると以下のようになります。



依存関係に従ってスタイルシートが定義されている事がお分かりいただけるでしょうか。

なお、functions.phpに記述する内容は最小限にしてあります。実際にfunctions.phpを作成する場合、PHPの開始タグ(<?php)などは忘れないようにしましょう。

子テーマのスタイルシートに関する留意点

以前は子テーマのスタイルシートに@import:を使用して元テーマのスタイルシートをインポートする方法が紹介されていましたが、この方法は良い方法ではありません。ページの読み込みに時間がかかるようになるため、使わないようにしましょう。

子テーマのアップロード

作成したstyle.cssとfunctions.phpを子テーマをファイルを格納するディレクトリごとアップロードします。アップロード先は/wp-content/themesになります。ここにはすでにアップロードされている元テーマが格納されているはずですので、間違えないようにアップロードします。

アップロードが済んだ状態はこのような感じになります。

/wp-content/themes フォルダ

アップロードが完了し、ダッシュボードのメニューから「外観」→「テーマ」を確認すると作成した子テーマが確認できるようになります。子テーマを「有効化」にして、テーマが反映しているか確認しましょう。

子テーマを「有効化」にする

外見が元テーマと殆ど変わってなければ、正しく子テーマが作成されています。ここまでの手順では子テーマで何もカスタマイズしてないのですから、スタイル定義や機能については元テーマのものが継承されているからです。

まとめ

いかがだったでしょうか。今回は子テーマの作り方とカスタマイズする際の注意点などについて解説しました。

子テーマを作ったと言っても、まだテーマのカスタマイズ準備が整ったにすぎません。ここからウィジェットを配置したり、プラグインをインストールしていくことで、自分だけのテーマを作ることができるようになります。

次回は「Garyu」が持つ機能やウィジェットについて解説したいと思います。

関連する記事