[WP]親テーマのCSSを編集&削除して軽量化!親テーマCSSの読み込み停止(無効化)とオリジナルテーマの新規読み込み。

Wordpress_親テーマCSSの編集と削除_eyecatch

WordPressではCSSの追加、編集には基本的に子テーマを使いますが、親テーマのCSSを直接編集したい場合が結構あります。

しかし親テーマ内のstyle.cssを直接編集するとテーマアップデート時に元に戻ってしまうので意外と難儀です。

今回、元の親テーマのCSSの読み込みを無効化し、新しく作った専用のテーマを新規読み込みすることにより親テーマのCSSを編集したり、使用していないCSSを削除する方法をまとめました。

複数のテーマで動作確認しましたが、テーマによっては上手くいかないかもしれませんので、あらかじめご了承下さい。

親テーマのCSSを削除、編集する

この記事の内容で出来ることは以下です。

・親テーマのCSSの読み込み停止。
・親テーマのCSSの削除、編集。
・新規作成したスタイルシートの読み込み。

既存のスタイルシートを元に自分でカスタマイズした新しいスタイルシートを読み込みたい場合に便利かと思います。

方法は以下の2つをご紹介します。
親テーマ内のstyle.cssを直接編集する方法はあまり使えないので除外します。

・方法1.子テーマのCSSに必要なスタイルだけを記述する。
・方法2.親テーマのCSSを無効化し、新しいスタイルを読み込む。

・方法1は簡単で分かりやすいです。
子テーマがあるテーマなら全てのテーマで対応できます。

・方法2はfunctions.phpにコードを追加する方法です。
簡単ですが、テーマの作り方によっては上手く動作しないかもしれません。
上手く動作しない場合、テーマのソースコードと睨めっこする必要があります。

親テーマのCSSはサイズが大きく重たい

子テーマのsytle.cssを使えばスタイルは決められます。
では、なぜここまでして親テーマのCSSを編集したいのか?

WordPressの人気テーマのスタイルシートは容量で考えると最適化されていません。
最適化されていないというよりは、あらかじめ最適化することができないのです。

テーマを使うWebサイトによって使用するウィジェットや各パーツの配置が異なりますが、それでも問題なく使用できるように全ての設定に対してCSSを記述してあるため、WordPressのスタイルシートは容量がどうしても大きくなってしまうのです。

Wordpress_親テーマCSSの編集と削除_001

Twenty Twenty-OneのCSSのサイズは約15KB

Twenty Twenty-Oneはシンプルなテーマでスタイルシートのサイズは約15KBです。
そのうち記事ページで使用しているCSSは僅か20%です。

ワードプレスを使ったサイトがPageSpeed Insightsで「使用していないCSSの削減」と怒られるのがコレです。

Webサイトにおいて使用していないCSSがスタイルシートに記述されており、サイズが大きくなっていることはデメリットしかありません。

自サイトで使用していないCSSを削減することが出来れば若干サイトが高速化し、SEOにも良い影響が出るはずです。

ということで親テーマのスタイルシートも編集したいわけです。
やっと今回の内容です。

方法1.子テーマのstyle.cssのみを使用する

※どちらの方法でも必ずstyle.cssのバックアップは保存しておくこと。

親テーマのスタイルシートをほぼ全て削除することで"空"にして読み込む方法です。
子テーマ内にあるstyle.cssに全てのCSSの記述を保存しておくということです。

力業ですがほぼ全てのテーマに対応でき、簡単です。

作業の流れ

1.親テーマのCSSを全て子テーマのstyle.cssにコピー
2.親テーマのstyle.cssの上部のコメント部分以外を全部削除

Wordpress_親テーマCSSの編集と削除_002

上部のコメント部分はテーマの読み込みに必要

親テーマ上部のコメントアウト部分は残して下さい。
それ以下のCSS部分は全て子テーマに移動する感じです。

注意ポイント

・親テーマアップデート時に元に戻ってしまう点に注意

凄くシンプルですが、若干CSSの管理が鬱陶しくなります...
方法2がダメでどうしてもCSSを軽量化したい方はこの力業で。

方法2.専用のスタイルシートを読み込む

親テーマのCSSを無効化し、カスタマイズしたCSSを作成して読み込む方法です。
functions.phpにコードを追加するだけで実用的。アップデートの影響も受けません。

作業の流れ

1.子テーマ内に新しいスタイルシートを作成する
2.作成したスタイルシートに必要なCSSだけを記述する
3.スタイルシートのハンドル名(id)を確認する
4.functions.phpにコードを追加する

別の専用スタイルシートを読み込んで使用しますので、親テーマのアップデートには対応できません。
アップデートの度に作り直すか、変更箇所を必要に応じて追記する必要があります。
こればかりはトレードオフです。

では順番にやってみます。

新しいスタイルシートの作成

子テーマ内に読み込みたいスタイルシートを作成します。
拡張子が「.css」となるファイルを子テーマ内に設置しましょう。

Wordpress_親テーマCSSの編集と削除_003

子テーマ内にstyle.cssを作成する

今回は分かりやすく「customize-style.css」という名前にしました。
後はこのスタイルシートに親テーマや子テーマのスタイルシートを見ながら必要なCSSのみを記述します。

親テーマのスタイルシートの読み込み停止

続いて今まで読み込まれていたスタイルシートを無効化します。

スタイルシートの読み込みを停止するにはfunctions.php内にて「wp_dequeue_style」という関数を使用します。
この関数を使用する事前準備として、ハンドル名の確認が必要になります。

どのスタイルシートなのかを指定するための文字列です。

これをまず確認しましょう。
今回はWordpressのデフォルトテーマであるTwenty Twenty-Oneを使いました。

スタイルシートのidを確認する

ブラウザで自分のサイトを開き、ヘッダー部分を確認します。
スタイルシートのハンドル名はidの部分です。

Wordpress_親テーマCSSの編集と削除_004

stylesheetのidを確認する

「link rel="stylesheet"」の中に入っているid内から「-css」を取った部分がハンドル名となります。(画像の緑部分)

Chromeの場合、デベロッパーツールを開いてから「Ctrl+F」で検索窓を出現させてstylesheetと検索すると見つけやすいです。

functions.phpにコードを追加する

オリジナルのスタイルシートの用意、そして停止したいスタイルシートのハンドル名が確認出来たらあともう少しです。

子テーマのfunctions.phpに下記のコードを追記します。

function change_my_stylesheet() {
    //親テーマCSSの読み込み停止
    wp_dequeue_style('twenty-twenty-one-style');
    //オリジナルCSSの読み込み設定
    wp_register_style('my-style',get_theme_file_uri() . '/customize-style.css',array(),false,'all');
    //オリジナルCSSの読み込み
    wp_enqueue_style( 'my-style' );
}
add_action( 'wp_enqueue_scripts', 'change_my_stylesheet', 9999 );

3行目の「wp_dequeue_style('○○');」の○○は先ほど確認したハンドル名です。
5行目の「my-style」は任意ですが7行目と合わせてください。
「/customize-style.css」は先ほど子テーマ内に作成した.cssファイル名です。
add_actionの第三引数は優先度で10が初期値です。

その他詳しくはwpdocsなどにありますので調べてください。

動作確認

まずは7行目のエンキューが無いコードで動作確認。

wp_dequeue_style('twenty-twenty-one-style');

によってTwenty Twenty-Oneのスタイルシートの読み込みが停止できました。

Wordpress_親テーマCSSの編集と削除_005

親テーマのCSSが読み込まれていない状態

スタイルシートが読み込まれていないので味気ないページになりました。

続いてオリジナルCSSを読み込むコードも追記した先述のコードで動作確認。
今回作成したオリジナルのスタイルシート「customize-style.css」内にはサンプルとして下記のように記述しておきました。

#page{
    color: red;
    background-color: gray;
}

背景色をグレーに、文字色を赤色に変更するだけのコードw

Wordpress_親テーマCSSの編集と削除_006

customize-style.cssが反映した

上手くいきました!
引くぐらい軽量なCSSになりましたw

Twenty Twenty-One内のstyle.cssの上部のコメントアウト部分も書いてますが、無くても反映されました。

ページが崩れる場合

上手くいかない場合はまずハンドル名があっているか確認しましょう。

ダメな場合は「wp_enqueue_style」や「wp_register_style」あたり、スタイルシートの依存関係の指定が悪さをしている可能性があります。

つらつらと書きましたがWordpressのコード的に推奨される方法なのかまでは調べていませんのでご了承ください。

まとめ

WordPressの親テーマのCSSの読み込みを停止したり、オリジナルのスタイルシートを用意して読み込んだりする方法でした。
テーマによっては読み込みファイルの依存関係なんかもあって上手くいかないことも多い内容かも...

たかが数キロバイトのスタイルシートですが、軽量化の余地は残されています。

ではではこのへんで・w・

-Wordpress
-,

© 2021 ソロ学