Tag Archives: 子テーマ

「@import」を使わないWordPress子テーマの正しい作り方

WordPressをインストールしたら、まずChild Theme(子テーマ)を設置しましょう。テーマに全く変更を加えないで使うという人には必要ありませんが、自分の好みにカスタマイズしたい人にとっては必須といえます。というのも、テーマのファイルに直接手を加えていると、テーマがアップデートされるときに変更点が新しいバージョンで上書きされるため、サイトのデザインや機能の変更点がすべて消されてしまうからです。

一方で、子テーマを設置すると、親テーマのファイルに手をつけることなくサイトのデザイン・機能を変更できます。そのため、親テーマがアップデートされても、それと独立している子テーマは上書きされず、カスタマイズはすべて保持されます。

@importを使うとサイトのパフォーマンスが低下

ここでは、「正しい」子テーマの作り方を説明します。多くのサイトで「@import」を使って子テーマのスタイルシートを作るやり方が説明されていますが、これは推奨されているやり方ではありません。WordPressサイトでは「this is no longer best practice」と書かれています。このページでは、@importを使ってスタイルシートをインポートする解説に気をつけることが繰り返し呼びかけられており、wp_enqueue_script()を使った方法が薦められています。(Be aware that some of these resources recommend using @import from your child theme’s stylesheet as the method of importing the parent theme stylesheet. Please use the wp_enqueue_script() method described above.) 困ったことに、日本語訳ページでは2015年1月現在でも、この「@import」のやり方が載っています。気をつけましょう。

ここから順を追って説明します。やり方がわかってしまえば10分以内にできてしまうようなシンプルな作業です。

1) 「style.css」と「functions.php」ファイルの作成

自分のコンピューターでテキストエディタ(例えば、テラパッドNotepad++)を使ってファイルを作ってからサーバにアップロードする方法と、サーバにあるWPのフォルダ内にファイルに直接作成する方法との2通りがあります。

まずは、style.cssファイルを作成します。

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
*/

いろいろと記述がありますが、必須なのは黄緑にハイライトされている2行だけで、ほかのラインはなくてもかまいません。というわけで、シンプルなバージョンは下のようになります。

style.cssファイルの初めに書く内容 (シンプルバージョン)

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

「Template」に書く親テーマのディレクトリ名は大文字・小文字にも注意します。この記述によってこのファイルが「子テーマ」と認識されます。これでCSSファイルの編集は終わりです。くれぐれも、このあとに「@import」を使わないようにしましょう。サイトの読み込みスピードが低下するとされています。

次に、「functions.php」ファイルの作成です。以下の内容を書くことで、親テーマのCSSが子テーマに反映されるようになります。(子テーマのCSSに手を加えることで該当部分が親テーマのCSSより優先されます。)

functions.phpファイルに書く内容

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

2) 子テーマフォルダの設置

WordPressのフォルダ構成を上から「wp-content」 → 「themes」 とたどると、デフォルトでインストールされているいくつかのテーマのファイル見つかると思います。「twentyfifteen」や「twentyfourteen」などですね。もちろん使いたい親テーマもここに並んでいるはずです。

ここで、子テーマフォルダの設置です。名前にはフォーマットがあるので、好き勝手なフォルダ名にはできません。「親テーマの名前-child」というのが子テーマのフォルダ名になります。親テーマの名前をそのままコピペして、その後ろに「-child (半角英数のハイフンとchild)」を加えます。

3) 「style.css」・「functions.php」ファイルを子テーマフォルダに設置

最後に、「style.css」と「functions.php」の2つのファイルを子テーマフォルダの中に設置します。ここでは、Bluehostの管理画面を例にとって見てみます。おそらくどのサーバでも似たようなつくりでしょう。

Bluehostのコントロールパネル
Bluehostのコントロールパネル

ページ上の方にある「File Management」カテゴリーにある「File Manager」を選びます。

File Managerのキャプチャー画面: いくつかのテーマとともに子テーマが設置されています。
File Managerのキャプチャー画面: いくつかのテーマとともに子テーマが設置されています。

「wp-content」 → 「themes」 とたどった階層です。ここにフォルダを作成するのは、画面上のアイコン一覧から感覚的にできると思います。

子テーマのフォルダ内に設置された「style.css」と「functions.php」ファイル
子テーマのフォルダ内に設置された「style.css」と「functions.php」ファイル

子テーマのフォルダ内にはいったら、作っておいた2つのファイルをアップロードします。もしくは、テキストエディタであらかじめ編集する代わりに、このフォルダの上にあるアイコン一覧からファイルを作って(New File) それを編集(Edit)する、というやり方でも簡単です。

4) WordPressで子テーマを選ぶ

WordPressのダッシュボードからテーマのセクションに行きます。ここまでのステップが正しく行われていれば、ほかのテーマと並んで子テーマも見つかるはずです。子テーマを有効化すればすべての工程が終了です。自分のサイトに行ってみると、親サイトを変わらないものが表示されているはずです。あとは、CSSのファイルに手を加えることで、親テーマのアップデートを気にすることなく自分の好みにサイトをカスタマイズしていけます。