WordPressテーマは子テーマでカスタマイズする

WordPress(ワードプレス)で聞くことの多い言葉の一つ、親テーマ、子テーマについてまとめていきたいと思います。

WordPressでサイトを運営する場合子テーマでの運営・管理が重要になってきます。

スポンサードリンク

親テーマ・子テーマについて

親テーマとはもととなるWordPressテーマのことを親テーマと言います。

例えば、人気のWordPressテーマ(XeoryBizVektorSimplicityなど)を使ったりする場合、このテーマ自体のことを親テーマと呼びます。

子テーマはその親テーマにくっつくテーマのことを指します。文字通りこどもですかね??

子テーマを使うメリット

使っていたテーマがアップデートされると、変更したところを失ってしまう!

これが子テーマを使う最大のメリットです。

人気のテーマは機能面の向上や使い勝手を良くするためにテーマに対してイロイロと盛り込んだり調整したりしています。その都度テーマをアップデートします。

テーマをアップデートすると親テーマで利用している更新されたファイルが全て上書きされます。ファイル追加の場合は影響はありませんがほとんど、ファイルの上書きが多いです。

ファイルの上書きをされてもカスタマイズした内容を守るための役目が子テーマにはあります。

子テーマの作り方

子テーマを作成する上で最低限必要になってくるファイルがあります。

  • 子テーマ用のフォルダ
  • style.css
  • functions.php

一番上の子テーマ用のフォルダは独自にカスタマイズしていくためのファイルや画像を格納していきます。テーマを格納している「wp-content/themes」のディレクトリ内に作成します。

絶対ではありませんが子テーマのディレクトリを作成するときは「○○-child」と名付けるのが推奨されています。「親テーマの名前-child」と名付けたほうが管理がしやすいかと思います。

次に準備するのがスタイルシートのファイルです。親テーマにもある「style.css」を作成します。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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:  twenty-fifteen-child
*/

CSSを作成するときに上記のようなスタイルシートヘッダ で始める必要があります。上記の書き方でも問題はありませんが子テーマを作成する際は下記のように簡略化しても問題ありません。

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

子テーマの識別をするためのテーマ名と親テーマのディレクトリ名を指定することによって子テーマと親テーマを結びつけることができます。

続いて親テーマで使っているスタイルシートを子テーマを適用させても読み込ませるように設定します。下記のコードをfunctions.phpにコピペします。

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

上記のコードによって親テーマのスタイルシートが子テーマに引き継がれるようになります。以前までは@importでCSSを読み込ませていませていましたが、読み込みスピード問題もあり上記のようなコードで読み込むのが主流になりました。

上記のファイルが用意できたら「wp-content/themes」に子テーマをアップロードして「有効化」すれば完了です。

テーマをカスタマイズされる場合は、子テーマを作成してその上でコードを書き換えるようにしたほうがテンプレートの安全性も高まりますし、テーマのアップデート時に今まで作成したコードをなくしてしまう(上書きされる)こともありません。

他の人が作ったテンプレートを利用される際はとくにテーマの扱いは慎重にしてくださいませ……WordPressを扱って間もないころ私はそれでなんど泣きそうになったことやら……