2022.1.9 更新
皆さまこんにちは！
wordpressはデフォルトの公式テーマ、Twentyシリーズのままでもとっても素敵ですが、他にも沢山あるテーマの中から気に入ったデザインを選んで着せ替えることが出来るのが良いですよね！また、テーマを自分好みにカスタマイズ出来るところも魅力です。本日はwordpressのカスタマイズに必須な子テーマについてのお話です。
1. ワードプレスのテーマを変更してみる
ダッシュボード→外観→テーマ→新規追加
お好きなキーワードで検索、お気に入りが見つかったらインストールします。後は、
外観→テーマ→インストールされているテーマ から選んで「有効化」するだけ。簡単ですね！
気に入ったデザインに着せ替えてはみたものの、「タイトルのフォントの色をもう少し明るくしたい」とか、「メニューバーの位置を変えたい」とか、使っているうちに何かしら不満が出てきますよね。
せっかく自分のサイトを作ったのだから、やはり見た目も機能も自分好みにカスタマイズしたくなるというもの。
そこで登場するのが「子テーマ」です。一からテーマを作成しなくても、既存のテーマを基に自分好みに見た目を変えられるなんて素晴らしいですね(^^)
2. なぜ子テーマが必要なのか？
「テーマの編集」から、右上の▼で編集したいスタイルシートを選んで、その中に変更したい内容を記述したり書き換えてもよいのですが、各テーマも時々アップグレードされたりすることがあります。するとテーマを新しいバージョンに更新する訳ですが、この時、元のテーマのスタイルシートに直接記述をしていると、テーマを更新することでスタイルシートも新しいものに置き換わってしまい、せっかく書いた構文も消えてしまう、という訳なんです。
でも、元になるスタイルシートに子テーマを設定してあれば、元になっているテーマが新しいバージョンに更新されても自分の設定が維持出来るんです。
3. 子テーマを設定してみよう
それでは今回は、Twenty Elevenを例に説明していきます。
ご自分のサーバーへ行き、WPのフォルダの中のwp-contentを開きます。
その中にあるthemesフォルダを開きます。Twenty Elevenのフォルダがありますね。この同じ階層に新しいフォルダ「twentyeleven-child」を作ります。(※ここではtwentyelevenの子テーマということでわかりやすくtwentyeleven-childとしました。)
フォルダを作りましたら、その中に新規にファイルを作成してファイル名を「style.css」とし、
下記の様に記述します。
/* Theme Name: twentyeleven-child Author: wpress Template: twentyeleven */ @import url(../twentyeleven/style.css);
〈説明〉
- Theme Name: お好きな名前をつけて下さい。ここではtwentyelevenの子テーマということでわかりやすくtwentyeleven-childとしました。
- Author: この子テーマの作者名です。あなたのお名前など。
- @import url: 「この子テーマは、親テーマ(ここではTwenty Eleven) のテンプレートを引き継ぎます」と宣言します。cssの記述はこの宣言の後に書いて下さいね。でないと記述したcssが反映されません。
wordpressへ戻り、子テーマを適用したいサイトの
外観→テーマ→インストールされているテーマ
から、先ほど作ったtwentyeleven-childを選んで「有効化」します。
テーマの編集画面へ行きます。
右上の▼から先ほど作成したtwentyeleven-child のスタイルシート(style.css)を選択します。
すぐ下を見ると、
「この子テーマは親テーマ Twenty Eleven のテンプレートを引き継ぎます。」
と書いてあります。
では試しに分かりやすいように背景色を変えてみます。下記の記述をして、ファイルの更新ボタンを押します。
/*
Theme Name: twentyeleven-child
Author: wpress
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);
body {
background: #bdb76b;
}
（※変更したところbody｛｝の中のbackgroundの色をデフォルトの #fff → #bdb76b ）
ファイルの更新をしてサイトへ戻ると…
背景色が白からカーキ色に変わりましたね。
これからは変更したい記述はこのスタイルシートに書くようにします。
テーマカスタマイズの第一歩です♪ ぜひ他のテーマについても、子テーマを作って試してみて下さいね(^^)ゞ