WordPressのCSSをカスタマイズするときは小テーマをつかおう

いってみよう!

WordPressの背景色を変えたいとします
ダッシュボードのテーマから背景色を変更できないテーマもあるようです

WordPressはめっちゃ複雑なのであまりテーマを弄りたくないものです
そこで便利なのが 子テーマ です
一時期WordPressのテーマをつくっていた時期があったので、そのとき知りました
詳しく知りたいひとはgoogle先生に聞きましょう

今回は下記ページを参考にさせていただきました

【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法CSS篇|ThePresentNote

wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順

以下スタイルシートをカスタマイズするときの手順となります

  • 子テーマのディレクトリを作成する
  • 子テーマディレクトリにてstyle.cssを作成する
  • style.cssに変更内容を書き込む
  • WordPressにログイン
  • 子テーマを適応する

子テーマをつくろう!

wp-content/themes/以下に任意の子テーマのディレクトリを作成します
子テーマのディレクトリ名を「親テーマ名_child」にすると、どのテーマの子テーマかわかるのでおすすめです

作成した子テーマのディレクトリの中にstyle.cssを作成し以下のように記述します

/*
Theme Name: 子テーマのディレクトリ名
Template: 親テーマのディレクトリ名
*/

これで子テーマでのスタイルシートの完成です
WordPressのダッシュボードへいき、外観からテーマへいきます
そうすると先ほど作成した子テーマが一覧に表示されますので適応しましょう

レイアウトが崩れる

ページを表示するとレイアウトが崩れていると思います
これは親テーマでなく子テーマのスタイルシートの内容のみが適応されているからです

これを解決するには親テーマのスタイルシートの内容をコピペするか、インポートする必要があります
今回はインポートでいこうと思うので下記のようにstyle.cssに追記します

@import url('../親テーマのディレクトリ名/style.css');

再度ページへアクセスすると正しいレイアウトが表示されると思います
これでテーマのコピーもどきができました

あとは自分でカスタマイズしたい内容をゴリゴリ書いていきます
今回の場合ですと背景色の指定ですね
子テーマの内容がインポートした親テーマのスタイルシートより優先されます

まとまってない

スタイルシート以外にも各種テンプレートファイルとfunctions.phpも、子テーマとして扱えます

指定通りの背景色へ変更しましたが、依頼主はしっくりこなかったようです