テーマカスタマイザーを使用して、WordPressのテーマを自分好みにカスタマイズする

WordPressのテーマを自分好みにする方法のまとめ

本題に入る前に、WordPressのテーマをカスタマイズする方法について整理しておきます。方法は、大きく分けて次の4種類あります。

• テーマカスタマイザーを利用してカスタマイズする
• 子テーマを作成して、既存のテーマをカスタマイズする
• テーマそのものを改変して、別のテーマとして利用する
• テーマ自体を自作する

基本的に、上から下に行くにつれて難易度が上がっていきます。

テーマカスタマイザーによるカスタマイズ

今回見ていく「テーマカスタマイザー」とはWordPress 3.4から追加された機能で、その名のとおりテーマを簡単にカスタマイズできる機能です。後で詳しく説明しますが、あまりWebについて知識がなくても、ある程度までテーマを調整することができます。

ただし、テーマがカスタマイザーに対応しているかどうか、あるいはどこまでカスタマイズできるかは、そのテーマの対応範囲次第ということになります。

子テーマによるカスタマイズ

テーマにはバージョンアップがあります。従って、テーマそのものを改変したとしても、バージョンアップしてしまうと改変した部分はすべて消えてしまいます。

これを防ぐための仕組みが子テーマで、親となるテーマは修正せずに、その子供となるテーマで親テーマを部分的に修正する（上書きをする）ことができます。子テーマについては、別の記事で改めて紹介します。

テーマを改変するカスタマイズ

上記の通り、テーマがバージョンアップすると、自分で修正した部分は消えてしまいます。

これを避けるために、あるテーマを利用して別のテーマを新たに作り出すのがこの方法です。別のテーマを作り出すのでバージョンアップされることはなくなりますが、反面それ以降の管理はすべて自分自身で行う必要があります。

子テーマによるカスタマイズが部分的で小規模なカスタマイズなのに対し、テーマを改変して新たなテーマを作るこの方法は、ある程度広い範囲を改変するか、または大きく発展させる場合に使います。

ちなみに、本ブログではこの方法については語りません。

テーマ自体を自作する

テーマ自体を自作できれば、すべて完全に自分の思い通りになります。一から作成する分、難易度は高く、労力もかかりますが、やってできないことはありません。

子テーマによるカスタマイズも、「どこを」「どのように」修正すれば自分の求めている結果になるのかを試行錯誤する時間がかかるので、範囲が広がると難易度も上がり、時間もかかってしまいます。

本ブログでは、テーマを自作するところまで解説しますので、興味のある方はぜひ読み進めてください。

テーマカスタマイザーをみてみよう

それでは、今回の本題「テーマカスタマイザー」を見ていきましょう。

本記事では引き続き、”Twenty Seventeen”というテーマを適用した状態で話を進めます。

テーマカスタマイザーを開く

Webサイトにいる場合は、ログインしている間、上に常に表示されているアドミンバーの[カスタマイズ]ボタンを押すとテーマカスタマイザーに移動します。

管理画面からは、[テーマ]から[カスタマイズ]を選びます。

1にカスタマイズできる項目が並んでいます。ここのリストから選んでもよいですし、右に表示されている鉛筆アイコンをクリックしても大丈夫です。

2は、タブレットやモバイル端末でどのように見えるかを切り替えるためのボタンです。カスタマイズしたあとの確認として利用してください。

実際にカスタマイズしてみよう

それでは、試しに少しカスタマイズしてみましょう。まず、1の中から、[サイト基本情報]を選んでみます。

ロゴの登録や、タイトルの変更などが行えるようですね。実際にロゴを登録し、キャッチフレーズを変更してみました。

リアルタイムでプレビューされるのもうれしい機能です。

今度は、画像を変えてみましょう。左上にあるバックボタンで戻ってから[ヘッダーメディア]を選んでみてください。

Twenty Seventeenでは動画をヘッダーの背景として使えるようですが、ここでは単に画像を変更してみました。

トップ画像を変更するだけで、だいぶ個性が出せますね！

また「ウィジット」や「メニュー」という項目がある通り、前回の記事でお話ししたウィジットや、その前の記事のメニューについても、テーマカスタマイザーで変更可能です。どちらで修正しても構いません。

カスタマイズが終わったら、一番上にある[保存して公開]ボタンを押して、設定を反映してください。

追加CSSによるカスタマイズ

追加CSSとは

「追加CSS」とは、テーマの持つCSSはそのままに、新たに独自のCSSを追記できる仕組みです。「追加CSS」は次のような性質を持ちます。

• テーマをバージョンアップしても残り続けます
• 追加CSSはテーマごとに独立して保存されます

元のテーマを修正することなくCSSを追記できる仕組みが「追加CSS」です。”Additional CSS”を直訳しているので、少し意味が分かりにくいですね。

実際に追加CSSを記述してみよう

テーマカスタマイザーにはメニューの背景色だけを変える機能がありませんでした。そこで、CSSを用いて背景色と文字色を変えることを試みます。

まず、Chromeデベロッパーツール（Firefoxにも同様の機能があります）を用いて、エレメントを突き止めます。

1. 調査したいものの付近で右クリックします。
2. [検証]を選びます
3. エレメントが表示されるので、付近のタグを適当にマウスオーバーします
4. 青いハイライト（上の図）を頼りに、目的となるエレメント（タグ）を突き止めます

上の図のように、メニューには”navigation-top”というクラスがついていることがわかりました。このクラスに、背景を黒くするスタイルを付与してみます。

.navigation-top {
	background: black;
}

というCSSを、追加CSSに貼り付けてみてください。

メニューの背景色が黒くなりました！　……が、文字も黒なので見えなくなってしまいますね。

では、文字色は白にしましょう。今度はエレメントを突き止めるだけでなく、テーマのCSSでスタイルがどのように定義されているかに注意しながら進めます。

ディベロッパーツールでスタイルも同時に確認できます。上の例では、.navigation-top aの#222が文字色のようですね。

本題から話がそれるのでこれ以上は説明しませんが、このような操作を繰り返すことで、見た目を変更していきます。

.navigation-top .current-menu-item > a {
	color: #999;
}

.main-navigation a {
	color: white;
}

文字の色を調整した結果が次の図です。

CSSによるStyleは、見た目に関するすべてを支配しているので、本気になればどこまででも調整できてしまいます。しかし、この「追加CSS」のエリアは小さいため、コード量が増えてくると使いにくくなりますし、メンテナンス性も良くありません。

「追加」CSSによるカスタマイズは、小規模なCSSの追加にとどめておくのが良いといえます。

今回のカスタマイズ結果です。

• サイト情報の変更
• ヘッダーメディア（画像）の変更
• 追加CSSによるちょっとしたメニューのカスタマイズ

わずか3項目しか変更していませんが、パッと見ただけでは元がTwenty Seventeenだった感じはなくなりましたね。

このように、ちょっと手を入れるだけで十分オリジナリティを発揮できます！