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の読み込みをはずす

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

あらためて言いますが、WordPressのCodexとは違う方法です。テーマによってはエラーになって使えません。

まとめ

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

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

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

WordPressの本
post-cta-image

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

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

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

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


WordPressの本7選

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

*

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

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