WordPressテーマのCSS部分をカスタマイズする手順 │ ユヅハウスcue.

blanc note.をガッツリカスタマイズ【制作者向け】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を編集
  • 保存して確認

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

blanc note.をガッツリカスタマイズ【制作者向け】一覧へ