【実録】WordPressをはじめよう ［カスタマイズ編］その３ 〜子テーマを設定する〜
移転しました。
前回の記事ではナビゲーションメニューの設定をしました。その際にサブメニューの文字が白いので見にくいことが分かりました。今回はこの部分の設定をしていきます。
この部分ですね。ここの文字の色を変えて見えるようにしたいと思います。
文字色のカスタマイズ
「外観」「カスタマイズ」を選択。
カラーのカスタマイズ画面で文字色を…
とりあえず黒に変更してみます。すると…
はい。これで見えるようになりました！
しかしメニューの文字も黒くなってしまいました。これでも良いのですが、ここは変更前の白にしたい…と思っていじってみましたが、どうやら「カスタマイズ」では細かく設定できないようで、テーマのCSS（スタイルシート）をいじるしか無さそうです。
親テーマと子テーマ
ここでテーマのCSSをいじろうと色々調べてみたところ、テーマのCSSを編集するのは子テーマで編集した方が良いということが分かりました。こちらの記事を参考にさせていただきました。
要するに親テーマ自体を編集してしまうと、テーマが更新された時に、編集した部分がごっそり無くなる可能性があるということらしいです…怖い。なので子テーマの方で外観等のデザインを編集して、その編集した子テーマを親テーマに紐づけ（リンク）してやれば良いということになります。
子テーマのインストール
STINGERのダウンロードページにアクセスします。
→ダウンロード及び規約 - 無料WordPressテーマ STINGER
「STINGER7子テーマ」をダウンロードします。
「外観」「テーマ」を選択。
「新規追加」を選択。
「テーマのアップロード」を選択。
ファイル選択画面に移ります。「ファイルを選択」をクリック。
先ほどダウンロードした子テーマのファイル「stinger7child.zip」を選択して開きます。
「今すぐインストール」をクリック。
テーマのインストールが完了したら「有効化」をクリック。
「stnger7child」という子テーマが有効化されました。
その状態でサイトを確認してみると…おや。色がデフォルトの色になっている。どうやら以前設定したカラーはテーマごとの設定のようです。再度カラー設定して色を戻します。
「外観」「カスタマイズ」から…
現在のテーマが子テーマになっていることを確認して、この部分をいじってカラー設定をします。
ついでに、なぜかヘッダー部分に画像が設定されているようなので「画像を非表示」にしておきます。
これで元通りの見た目に戻りました！
子テーマの初期設定
子テーマのインストールと有効化が完了しましたが、もういっちょ設定が必要なようです。
「外観」「テーマの編集」をクリック。
子テーマのスタイルシートが出てきます。ここに記述していけばサイトのデザインを変えられるはずです。四角で囲った部分は、親テーマへの紐付け（リンク）の記述なんですが、この記述方法が古いらしいので、新しい方法で紐付け（リンク）します。
まずは下記の記述をコピーします。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
→子テーマ - WordPress Codex 日本語版より
「テーマのための関数（functions.php）」をクリックします。
この一番下に…
先ほどコピーした記述をペーストします。
ペーストしたら「ファイルを更新」します。
再度「スタイルシート」を表示します。四角で囲った部分を削除します。
削除したら「ファイルを更新」します。これにて子テーマの設定が終了しました。
おわりに
この時点で子テーマの存在に気付けて良かったです…。親テーマをいじると前述の通り、テーマが更新されたときにサイトが崩れてしまうリスクがあります。子テーマは親テーマと一緒にダウンロード、インストールするのが良さそうです。失敗から学んでいきますなぁ…。
