WordPress 子テーマのCSSで上書きはやめよう。無駄をなくしてサイズを小さくするコツ。

WordPressのテーマでカスタマイズしたいときに子テーマを作ります。

親テーマのCSSを変更したいとき、子テーマでCSSを用意して親テーマのCSSの設定を上書きする人もいるのではないでしょうか？

しかしこれは避けたほうがいいです。理由は『CSSのサイズが大きくなる』から。

『それじゃあ、どうするのか？』を説明します。

なぜ上書きしてはいけないのか？

なぜ、親テーマのstyle.cssはそのままに、新たに子テーマのstyle.cssでスタイル設定するのがダメかというと、

CSSもJavaScriptも必ずファイル転送が発生します。ファイルサイズが大きいと転送時間が増えます。

そのぶんウェブページの表示速度は遅くなります。速度が遅いとせっかく見に来てくれた人が内容を見ずに離れてしまいます。

HTMLに直接書いても（インライン）、HTMLファイルのサイズが大きくなるので同じです。

親テーマのstyle.css+子テーマのstyle.cssが、なぜサイズを大きくしてしまうのか具体的に見ていきましょう。

CSSサイズが増えるパターン

スタイルの変更

たとえば親テーマにこのようなスタイルがあるとします。

.post-thumbnail {
  width: 100%;
}

投稿ページのアイキャッチ画像のサイズを決めているのですが、300pxにしたいとき子テーマでこのようにします。

.post-thumbnail {
  width: 300px;
}

必要なスタイルは300px幅の画像ですよね？

親テーマの幅いっぱいの画像のスタイルは不要です。

（29byteがムダ）

スタイルの打ち消し

これがいちばんムダな設定です。親テーマでつぎのようなスタイルがあるとします。

.box {
  border: 1px solid #ccc;
}

あるボックスの枠線のスタイルです。この線がいらないとき子テーマで次のようなスタイルを追加します。

.box {
  border: none;
}

気づきましたか？このスタイルは親テーマも子テーマのスタイルもいらないです。ふたつとも書いてないのと結果は同じ。

これは相当ムダですよね？

（46byteのムダ）

このように、親テーマのstyle.cssを残したまま子テーマのstyle.cssにスタイルを設定すると、サイズを大きくするだけで不要なものがたくさんあります。

style.css + style.css = 2倍のサイズとはいいませんが、それに近い状態の人がいるのではないでしょうか？

子テーマだけでスタイルを設定する

ムダな設定をなくす方法はあります。

親テーマのstyle.cssを外す方法は2つ。

まずはかんたんな方法から見ていきましょう。

親テーマのスタイルをぜんぶ消す

親テーマのスタイルを無効化する一番かんたんな方法です。

親テーマの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
*/

この部分はWordPressがテーマを読み込むときに使います。親テーマの読み込みに失敗すると子テーマも読み込めません。

作業はこれだけです。これで親テーマのスタイルは消えます。

子テーマは、消す前の親テーマのstyle.cssをコピーしておいて好きなように編集しましょう。

親テーマのstyle.cssの読み込みを外す

インストールした子テーマの有効化は、親テーマと子テーマのstyle.cssのさっきのコメントの部分をきちんと書くだけでできます

？？？と思った人もいるかもしれません。子テーマの作り方では、funcsions.phpにstyle.cssのキュー登録が必要だから。

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_theme_file_uri( '/style.css' ),
        [ 'parent-style' ]
    );
} );

キュー登録は、HTMLにlinkタグでCSSファイルを追加します。

<link rel='stylesheet' id='parent-style-css'  href='https://sample.com/wp-content/themes/twenty-fifteen/style.css type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://sample.com/wp-content/themes/twenty-fifteen-child/style.css type='text/css' media='all' />

このキュー登録はHTMLにCSSファイルを追加しているだけで、子テーマの有効化とは関係ないんですね？

親テーマのstyle.cssのキュー登録を外しても問題ありません。子テーマのstyle.cssは自動で追加されるので、functions.phpのキュー登録はなくてもいいです。

これで親テーマのstyle.cssを外すことができます。

まとめ

どちらも親テーマのstyle.cssを消しているので、親テーマのcssのアップデートが子テーマには反映されません。

が、アップデート前後の親テーマのstyle.cssの差分をみて子テーマに反映させれば、そんなにむずかしくありません。

を使えばかんたんです。