WordpressではCSSの追加、編集には基本的に子テーマを使いますが、親テーマのCSSを直接編集したい場合が結構あります。
しかし親テーマ内のstyle.cssを直接編集するとテーマアップデート時に元に戻ってしまうので意外と難儀です。
今回、元の親テーマのCSSの読み込みを無効化し、新しく作った専用のテーマを新規読み込みすることにより親テーマのCSSを編集したり、使用していないCSSを削除する方法をまとめました。
複数のテーマで動作確認しましたが、テーマによっては上手くいかないかもしれませんので、あらかじめご了承下さい。
この記事の目次
親テーマのCSSを削除、編集する
この記事の内容で出来ることは以下です。
- 親テーマのCSSの読み込み停止
- 親テーマのCSSの削除、編集
- 新規作成したスタイルシートの読み込み
既存のスタイルシートを元に自分でカスタマイズした新しいスタイルシートを読み込みたい場合に便利かと思います。
方法は以下の２つをご紹介します。
親テーマ内のstyle.cssを直接編集する方法はあまり使えないので除外します。
- 子テーマのCSSに必要なスタイルだけを記述する方法。
- 親テーマのCSSを無効化し、新しいスタイルを読み込む方法。
方法１は簡単で分かりやすいです。
子テーマがあるテーマなら全てのテーマで対応できます。
方法２はfunctions.phpにコードを追加する方法です。
簡単ですが、テーマの作り方によっては上手く動作しないかもしれません。
上手く動作しない場合、テーマのソースコードと睨めっこする必要があります。
親テーマのCSSはサイズが大きく重たい
子テーマのsytle.cssを使えばスタイルは決められます。
では、なぜここまでして親テーマのCSSを編集したいのか？
Wordpressの人気テーマのスタイルシートは容量で考えると最適化されていません。
最適化されていないというよりは、あらかじめ最適化することができないのです。
テーマを使うWebサイトによって使用するウィジェットや各パーツの配置が異なりますが、それでも問題なく使用できるように全ての設定に対してCSSを記述してあるため、Wordpressのスタイルシートは容量がどうしても大きくなってしまうのです。
Twenty Twenty-OneのCSSのサイズは約15KB
Twenty Twenty-Oneはシンプルなテーマでスタイルシートのサイズは約15KBです。
そのうち記事ページで使用しているCSSは僅か20％です。
ワードプレスを使ったサイトがPageSpeed Insightsで「使用していないCSSの削減」と怒られるのがコレです。
Webサイトにおいて使用していないCSSがスタイルシートに記述されており、サイズが大きくなっていることはデメリットしかありません。
自サイトで使用していないCSSを削減することが出来れば若干サイトが高速化し、SEOにも良い影響が出るはずです。
ということで親テーマのスタイルシートも編集したいわけです。
やっと今回の内容です。
方法１．子テーマのstyle.cssのみを使用する
※どちらの方法でも必ずstyle.cssのバックアップは保存しておくこと。
親テーマのスタイルシートをほぼ全て削除することで"空"にして読み込む方法です。
子テーマ内にあるstyle.cssに全てのCSSの記述を保存しておくということです。
力業ですがほぼ全てのテーマに対応でき、簡単です。
作業の流れ
- 親テーマのCSSを全て子テーマのstyle.cssにコピー
- 親テーマのstyle.cssの上部のコメント部分以外を全部削除
上部のコメント部分はテーマの読み込みに必要
親テーマ上部のコメントアウト部分は残して下さい。
それ以下のCSS部分は全て子テーマに移動する感じです。
注意ポイント
親テーマアップデート時に元に戻ってしまう点に注意
凄くシンプルですが、若干CSSの管理が鬱陶しくなります...
方法２がダメでどうしてもCSSを軽量化したい方はこの力業で。
方法２．専用のスタイルシートを読み込む
親テーマのCSSを無効化し、カスタマイズしたCSSを作成して読み込む方法です。
functions.phpにコードを追加するだけで実用的。アップデートの影響も受けません。
作業の流れ
- 子テーマ内に新しいスタイルシートを作成する
- 作成したスタイルシートに必要なCSSだけを記述する
- スタイルシートのハンドル名(id)を確認する
- functions.phpにコードを追加する
別の専用スタイルシートを読み込んで使用しますので、親テーマのアップデートには対応できません。
アップデートの度に作り直すか、変更箇所を必要に応じて追記する必要があります。
こればかりはトレードオフです。
では順番にやってみます。
新しいスタイルシートの作成
子テーマ内に読み込みたいスタイルシートを作成します。
拡張子が「.css」となるファイルを子テーマ内に設置しましょう。
子テーマ内にstyle.cssを作成する
今回は分かりやすく「customize-style.css」という名前にしました。
後はこのスタイルシートに親テーマや子テーマのスタイルシートを見ながら必要なCSSのみを記述します。
親テーマのスタイルシートの読み込み停止
続いて今まで読み込まれていたスタイルシートを無効化します。
スタイルシートの読み込みを停止するにはfunctions.php内にて「wp_dequeue_style」という関数を使用します。
この関数を使用する事前準備として、ハンドル名の確認が必要になります。
どのスタイルシートなのかを指定するための文字列です。
これをまず確認しましょう。
今回はWordpressのデフォルトテーマであるTwenty Twenty-Oneを使いました。
スタイルシートのidを確認する
ブラウザで自分のサイトを開き、ヘッダー部分を確認します。
スタイルシートのハンドル名はidの部分です。
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 );
３行目の「wp_dequeue_style('○○');」の○○は先ほど確認したハンドル名です。
５行目の「my-style」は任意ですが７行目と合わせてください。
「/customize-style.css」は先ほど子テーマ内に作成した.cssファイル名です。
add_actionの第三引数は優先度で10が初期値です。
その他詳しくはwpdocsなどにありますので調べてください。
動作確認
まずは７行目のエンキューが無いコードで動作確認。
wp_dequeue_style('twenty-twenty-one-style');
によってTwenty Twenty-Oneのスタイルシートの読み込みが停止できました。
親テーマのCSSが読み込まれていない状態
スタイルシートが読み込まれていないので味気ないページになりました。
続いてオリジナルCSSを読み込むコードも追記した先述のコードで動作確認。
今回作成したオリジナルのスタイルシート「customize-style.css」内にはサンプルとして下記のように記述しておきました。
#page{
color: red;
background-color: gray;
}背景色をグレーに、文字色を赤色に変更するだけのコードw
customize-style.cssが反映した
上手くいきました！
引くぐらい軽量なCSSになりましたw
Twenty Twenty-One内のstyle.cssの上部のコメントアウト部分も書いてますが、無くても反映されました。
ページが崩れる場合
上手くいかない場合はまずハンドル名があっているか確認しましょう。
ダメな場合は「wp_enqueue_style」や「wp_register_style」あたり、スタイルシートの依存関係の指定が悪さをしている可能性があります。
つらつらと書きましたがWordpressのコード的に推奨される方法なのかまでは調べていませんのでご了承ください。
まとめ
Wordpressの親テーマのCSSの読み込みを停止したり、オリジナルのスタイルシートを用意して読み込んだりする方法でした。
テーマによっては読み込みファイルの依存関係なんかもあって上手くいかないことも多い内容かも...
たかが数キロバイトのスタイルシートですが、軽量化の余地は残されています。
ではではこのへんで・ｗ・
