WordPressのCSSをカスタマイズするときは小テーマをつかおう
いってみよう!
WordPressの背景色を変えたいとします
ダッシュボードのテーマから背景色を変更できないテーマもあるようです
WordPressはめっちゃ複雑なのであまりテーマを弄りたくないものです
そこで便利なのが 子テーマ です
一時期WordPressのテーマをつくっていた時期があったので、そのとき知りました
詳しく知りたいひとはgoogle先生に聞きましょう
今回は下記ページを参考にさせていただきました
【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法CSS篇|ThePresentNote
wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順
以下スタイルシートをカスタマイズするときの手順となります
子テーマをつくろう!
wp-content/themes/以下に任意の子テーマのディレクトリを作成します
子テーマのディレクトリ名を「親テーマ名_child」にすると、どのテーマの子テーマかわかるのでおすすめです
作成した子テーマのディレクトリの中にstyle.cssを作成し以下のように記述します
/*
Theme Name: 子テーマのディレクトリ名
Template: 親テーマのディレクトリ名
*/
これで子テーマでのスタイルシートの完成です
WordPressのダッシュボードへいき、外観からテーマへいきます
そうすると先ほど作成した子テーマが一覧に表示されますので適応しましょう
レイアウトが崩れる
ページを表示するとレイアウトが崩れていると思います
これは親テーマでなく子テーマのスタイルシートの内容のみが適応されているからです
これを解決するには親テーマのスタイルシートの内容をコピペするか、インポートする必要があります
今回はインポートでいこうと思うので下記のようにstyle.cssに追記します
@import url('../親テーマのディレクトリ名/style.css');
再度ページへアクセスすると正しいレイアウトが表示されると思います
これでテーマのコピーもどきができました
あとは自分でカスタマイズしたい内容をゴリゴリ書いていきます
今回の場合ですと背景色の指定ですね
子テーマの内容がインポートした親テーマのスタイルシートより優先されます
まとまってない
スタイルシート以外にも各種テンプレートファイルとfunctions.phpも、子テーマとして扱えます
指定通りの背景色へ変更しましたが、依頼主はしっくりこなかったようです