WordPress 子テーマのCSSで上書きはやめよう!

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
wordpress image
イラストACの画像をもとに加工しています。

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

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

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

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

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

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

ムダな設定が増えて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の書き方で、

親テーマのstyle.cssをコピーして変更を加える

みたいな説明がありますがこれは最悪です。

最低でもCSSのサイズが親テーマのstyle.cssの2倍ですからね?

子テーマは親テーマのコピーなので二重設定のオンパレードです。親テーマのCSSはそれなりのサイズなのに使われません。

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

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

子テーマのstyle.cssだけで設定する。

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

  • 親テーマのstyle.cssの設定をぜんぶ消す。
  • 親テーマのstyle.cssの読み込みを外す。

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

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

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

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

この部分はWordPressがテーマを読み込むときに使います。

親テーマの読み込みに失敗すると子テーマも読み込めません。

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

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

デメリット

親テーマのアップデートがあるとstyle.cssが復活する。

親テーマのcssのアップデートが子テーマに反映されない。(自分でcssを修正する)

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

WordPressのCodexの説明から外れた方法です。テーマによっては真っ白の画面やステータス500エラーが発生することもあります。

安全にカスタマイズするなら、さっきの親テーマのスタイルを消す方法がよいです。

-> WordPress公式 Codex

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

最低限テーマにfunctions.phpファイルが必要です。

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

style.cssのキュー登録
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

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

HTML
<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を外すことができます。

デメリット

親テーマのcssのアップデートが子テーマに反映されない。(自分でcssを修正する)

あらためて言いますが、WordPressのCodexから外れてます。テーマによってはエラーになって使えません。

まとめ

  • CSSサイズは小さい方がいい。
  • CSSサイズを小さくするには子テーマのstyle.cssにぜんぶ設定する。
  • 親テーマのスタイルは外す。

デメリット

親テーマのcssのアップデートの内容の修正が必要。

CSSのスタイルで"none"は使わないようにすべき!書かないのと同じだから。

(ただし動的なものは除く)

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

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

Windows: WinMerge

Mac: CompareMerge

をつかえばかんたんです。

ただし、テーマのアップデート前にバックアップが必要です。

WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!