親テーマをインポートするのをやめて子テーマのstyle.cssだけでスタイル設定をする方法

子テーマのstyle.cssで親テーマをインポートして子テーマに必要な設定だけを追加していく方法を採用をしている方もいると思いますが、親テーマをインポートするのをやめたいときの方法について考えてみました。

親テーマのstyle.cssをインポートして使う場合のメリットとデメリット

親テーマをインポートしたときの利点

親テーマのバージョンアップによりstyle.cssが変更された場合でも子テーマのファイル内容が変更されることがない利点があります。

親テーマをインポートした場合の欠点

親テーマをインポートして使う場合、2つのstyle.cssを処理する必要があり、また表示するサイト側でも2つのファイル読み込む必要があるのでサイトの表示スピードが遅くなる可能性があります。

親テーマstyle.cssを使わない方法

親テーマstyle.cssを使用しない方法は、子テーマで親テーマへのimport文を削除するとできます。

@import url( '親テーマへのパス' );

親テーマstyle.cssの設定を子テーマで扱う方法

親テーマをインポート(@import)するのをやめて子テーマに移して使用する場合2つの方法が考えられます。

移動した設定を直接変更しながらスタイルを設定する方法

子テーマに移動させたstyle.cssのファイル内容を必要な個所だけ直接変更する方法で、ファイルの行数も増えづらく簡単な方法ですが、親テーマがバージョンアップしたときにstyle.cssを変えることが難しいデメリットもあります。

移動させた設定をそのままにして上書きで設定する方法

親テーマstyle.cssを子テーマファイルの最初の方に移動させて、その部分は修正することなく必要な部分だけを同じファイルの下に追加で上書きして使用する方法で、その分行数が増えてファイルが見づらくなりますが、親テーマのバージョンアップ時にstyle.cssファイルを変更しやすい利点があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です