サイトを差別化する

2016年03月27日 2020年05月13日

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が振ってあるか。どんなスタイルが掛かっているか（プロパティや値）を確認してください。詳しい確認方法は下記の記事を御覧ください。

HTMLの要素とCSSを確認しstyle.cssを編集する方法

3.子テーマのstyle.cssに上書きしたいスタイルを書き込む

子テーマのstyle.cssを文字コード対応のテキストエディタで開きます。スタイルシートには、後から読み込んだCSSが優先される特性があり、親テーマのCSSより子テーマのCSSが優先されます。変更したい要素のセレクタやclass名・ID名を書いて、プロパティを上書きします。

参考：【逆引き】WordPressテーマカスタマイズでよく使うCSSプロパティ

4.保存して確認

style.cssを保存してもデザインに反映されない場合は、何度かリロードするか、キャッシュを削除してください。

まとめ

子テーマを作る
変更したい要素を確認
子テーマのstyle.cssを編集
保存して確認

のフローでデザインをカスタマイズしていくことで、思い通りのデザインに変更することができます。まずは試してみてくださいね。