WordPressテーマのCSS部分をカスタマイズする手順

WordPressテーマは3種類のファイル+αで出来ている WordPressのテーマは、だいたいが
- php(php + html)
- css
- Javascript
の3種類のファイルと、画像ファイル(gif / jpg / png)出来ています。
たまに、fontファイルが含まれているテーマもあります。 それぞれ役割が違うため、何をどう変更したいかに合わせ、編集するファイルを変える必要があります。 ざっくり言うと
- 機能や構造を変更したいとき→phpファイル
- スタイル(デザイン的な要素)を変更したいとき→cssファイル
- ちょっとした小技を効かせたいとき→Javascriptファイル

という様な分担です。 開発中のオリジナルテーマを例として仕分けしました。 拡張子がphp、css、jsの3種類&pngになってますよね。
CSSで、どの程度デザインを変えられるの?

例えばStinger6のstyle.cssの読み込みをやめると、こんな表示になります。
PHPファイルに書いてあるHTMLやWordPress独自タグを出力した結果=style.cssなしのキャプチャです。(厳密に言うと他にも読み込まれているcssがありますが、今回はイメージで)
メニューは縦並びのリストになっていますし、記事のリスト表示も縦に並んでいます。 サイドバーも下に落ちて、レイアウトが崩れてしまいました。リンクの色もデフォルトのブルーになっていますね。
つまり、CSSでレイアウトや色など「デザイン」に当たる部分を設定しているんです。CSSで挙動を変えることはできませんが、見た目ならガラッと変えることができます。
1.子テーマを作る
なぜ子テーマをつくるかというと、お使いのテーマがアップデートされるたびに、カスタマイズした部分が元に戻ってしまうことを防ぐため。
子テーマは、基本的には親テーマを利用します。
ですので子テーマの最小系は、style.cssのみです。
親テーマに変えたい部分がある時は、該当部分の入ったファイルを子テーマにコピーしてください。子テーマの同名のファイルが優先して読み込まれます。変更したファイルのみ子テーマに入れておくことで、親テーマがアップデートされても変更した箇所が戻ってしまうことを避けられます。
1-1.子テーマ用のstyle.cssを作る
下記の内容を、コピペしてstyle.cssを作成してください。
@charset “UTF-8”;/*———————————————————
Theme Name: 子テーマ
Theme URI: http://親テーマのURL/
Template: 親テーマのディレクトリ名
Description: 説明文(なくてもOK)
Author: 製作者の名前(なくてもOK)
Author URI: http://製作者のURL/(なくてもOK)
Version: 1.1(なくてもOK)
———————————————————*/

(なくてもOK)と書いてある箇所は行ごと削除してもOK。
唯一大切なのは、 Template: 親テーマのディレクトリ名 の部分。
FTPを使い
/WordPressをインストールしたディレクトリ/wp-content/themes/
を開いてください。
インストールされたテーマが確認できるので、親テーマとして使いたいテーマのディレクトリ名をコピーしてください。
stinger6を親テーマにするなら、 Template: stinger6 とします。
2.変更したい要素を確認
お使いのテーマを表示した状態で、変更したい要素を確認します。 選択した要素はどんなセレクタで何というclassやIDが振ってあるか。 どんなスタイルが掛かっているか(プロパティや値) を確認してください。 詳しい確認方法は下記の記事を御覧ください。
3.子テーマのstyle.cssに上書きしたいスタイルを書き込む
子テーマのstyle.cssを文字コード対応のテキストエディタで開きます。 スタイルシートには、後から読み込んだCSSが優先される特性があり、親テーマのCSSより子テーマのCSSが優先されます。 変更したい要素のセレクタやclass名・ID名を書いて、プロパティを上書きします。
参考:【逆引き】WordPressテーマカスタマイズでよく使うCSSプロパティ
4.保存して確認
style.cssを保存してもデザインに反映されない場合は、何度かリロードするか、キャッシュを削除してください。
まとめ
- 子テーマを作る
- 変更したい要素を確認
- 子テーマのstyle.cssを編集
- 保存して確認
のフローでデザインをカスタマイズしていくことで、思い通りのデザインに変更することができます。 まずは試してみてくださいね。