WordPress 子テーマの Better な作り方ーCSS @import 未使用

WordPress 子テーマのより良い作り方

子テーマの作り方は超簡単

WordPress のデザインに手を加える際は
デザインテンプレートを直接編集したりせず、
まず 子テーマ を作りますよね!?

最小構成の WordPress 子テーマは
/wp-content/themes/ にフォルダを作り、
以下の style.css ファイルを配置するだけです。

/*
Theme Name: Child Theme // 子テーマ名
Template: xxxxx // 親テーマのディレクトリ名
*/

@import url(../xxxxx/style.css); // この下に子テーマの CSS を記述

子テーマ側でカスタマイズをすることで
テンプレートのアップデートを適用しても
カスタマイズ内容を失わなくなるので、
大体の人は知っていると思います。

正しい WordPress 子テーマの作り方

だけど、サイトのパフォーマンスを落とさないためには、
もっと正しい WordPress 子テーマの作り方があります。

WordPress 日本語公式サイトを見てみると、

@import ルールで親テーマのスタイルシートをインポート

と確かにそう書かれています…が、
@import はパフォーマンスを悪化の要因 です。

つまり、公式なサイトに書かれているとはいえ、
サイトの読み込み速度を落とさない為には、
@import は使うべきではないということです。

ところが、”WordPress 子テーマの作り方” と
試しに日本語で Google 検索をしたところ、
なんと上位にヒットした全てのサイトで、
CSS @import を使っているんです。

…これは記事にしなきゃ勿体ない! ということで、
正しい子テーマの作り方をお伝えします。

functions.php を使う Better な方法

WordPress の子テーマを作るときは、
こちらの better な方法 を使いましょう。

style.css の @import は使わず、
子テーマフォルダの functions.php に
以下のアクションフックを追加します。

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

案外簡単ですね。

WordPress 初心者の方へ

子テーマのフォルダの中に
まだ functions.php がない場合は、
新しくファイルを作ってください。

PHP ファイルの先頭には、
忘れず <?php をつけましょう。

実際の例: functions.php

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

子テーマを作成済みの方へ

もちろん、この better な方法は
既存の子テーマにも適用が可能です。

サイトの読み込み速度があがれば
SEO 的にもプラスの効果があるそうです。
少しチューニングしてみてはどうでしょう?

1つ注意点をあげておくと、
functions.php を更新する前に
style.css から @import を削除すると、
当然、親テーマのスタイルは読み込まれません。

style.css と functions.php は
FTP 接続等で同時更新するようにしましょう。


この記事が参考になったという方は
ぜひシェアをお願いします。

WordPress 子テーマの Better な作り方ーCSS @import 未使用
バリ島地図.jp を運営しています !

バリ島在住 28 歳フリーランス Web デザイナー、翻訳の仕事もしています。2013 年のバリ島への移住をキッカケに、インターネットを活用した「海外ノマド生活」のブログを開設、バリ島の観光客向けに「バリ島の日本語地図」を紹介しはじめました。2014 年 6 月には バリ島地図.jp としてサイトをリニューアルし、運営を続けています。