子テーマをカスタマイズしてみましょう。 今回はヘッダー部分を調整します。
フロントページでは大きめにヒーロー画像が、 他のページではポートフォリオサイトにデザインを寄せたナビゲーションが表示されるようにします。
１.header.phpを複製する
header部分の調整はテンプレートファイルにも少し変更を加えます。
親テーマ「storefront」からheader.phpをコピーし、 子テーマ「storefront-child」に張り付けて下さい。
↓
テーマカスタムは、この子テーマにコピーしたheader.phpで行います。
header.phpの構造について
子テーマに入れたheader.phpを開いてみましょう。
30行目に<header>タグがあります。
header.php
実行されているのは
do_action( 'storefront_header' );
という部分のみ。
この一行でオレンジ色の点線で囲った<header>タグ内のすべてを表示させています。
do_actionの上にあるコメントアウト部分は、その内容を全てまとめたものが「'storefront_header' 」であるというメモです。
今回はdo_actionの中身は変更しません。
タグにクラスを追加し、独自cssで見た目を調整していきましょう。
２.headerタグにクラスを追加する
header.php - 30行目にある<header>タグにクラスを追加します。
header.php(元のコード)
フロントページと、それ以外のページで表示を変えたいので条件分岐を入れましょう。
<header>タグ部分を下記のように変更してください。
header.php(変更後のコード)
これで
フロントページの<header>タグには「front-header」クラス
それ以外のページの<header>タグには「no-front-header」クラス
追加で入るようになりました。
それぞれのクラスを使って、独自cssを設定してきましょう。
3.フロントページ用の設定
では、フロントページに表示されるheaderエリアの設定をしていきましょう。 作成した「front-header」クラスをセレクタにして、ヒーロー画像と高さを設定します。
前回のstyle.csの確認に使った、bodyの背景色は削除しておいてください。
style.css
※通常のテーマと同じく、使用する画像は子テーマディレクトリ内に入れます。
ショップサイトを開いてstyle.cssの設定でどうなったか見てみましょう。 ヘッダーエリアの高さが確保され背景画像が入っていますね。
このままでは背景画像との兼ね合いでテキストがほとんど見えません。
ブラウザの検証ツールで出力されているタグ・クラスを見ながら、見やすくなるように調整していきます。例えば、サイトタイトル部分は「site-title」クラスが振られているので、テキスト色の変更は.site-titleをセレクタにして設定していく形です。
解説のサイトでは文字サイズ・太さを調整しました。 設定される背景画像等によって文字色等は変わると思いますので、各自調整してください。
style.css
↓css設定反映後の表示
まだ文字が見にくいですが、調整は一旦おいておきます。
先にヘッダーエリア内に表示されている、文字や検索ボックスの位置を調整してしまいましょう。現在の配置ですと、ヘッダーエリアの下が余ってバランスが悪いので、flexプロパティを使ってブロックの配置を調整します。
style.css
↓表示確認
もう少し中央に寄せたい、という場合はmarginやpaddingを使って調整してください。
※青線で囲った「col-full」クラスに対するmin-width指定は、header全体をフレックス化したことでタイトルと検索部分が寄ってしまうのを回避するために入れています。
★filterプロパティ
ヘッダーエリアの文字を読みやすくしてみましょう。 折角ですので画像そのものではなく、cssの「filter」プロパティを使って背景画像の明度と色調を変更してみます。（※不要な方は飛ばしてください）
「filter」は、ぼかしや色変化などのグラフィック効果を要素に適用できるcssプロパティ。 上図の場合ですと、値にsepiaを入れているのでセピア調の色彩になっていますよね。それ以外に「grayscale(50%)」と書くとモノクロ調になったりと、photoshopの調整機能のようにグラフィック効果を適用させることが出来ます。
使用する写真に統一感を出したい、 モノクロ表示→マウスオーバーでカラーに変更、 などの場合にも役に立ちますよ。
プロパティ値についての詳細はMDN-filterをご確認ください。
4.フロントページ以外のヘッダー
続いて、フロントページ以外で表示されるヘッダー部分をカスタマイズしていきましょう。
こちらの設定はシンプルなものにしておきます。
フロントページ以外のページを開いて表示を確認してみて下さい。
５.スマホ幅用の調整
最後に、画面幅を小さくしてもヘッダー部分が綺麗に表示されるか確認します。
まずはフロントページ以外のページを見てみましょう。
特に問題は無いですが、サイトタイトルが少し大きいので調整します。
今度はフロントページに戻って、確認してみましょう。
メニューボタンが落ちてしまっていますし、header画像の高さもありすぎですね。 style.cssで直していきましょう。
これでヘッダー部分のカスタマイズは終わりです。
ナビゲーションの項目を変える
テーマ「storefront」を導入したときから自動的に表示されていたヘッダーナビゲーション。ショップメニューらしい項目が並んでいますが「サンプルページ」など要らない項目も表示されていますね。
これを設定し直しましょう。 管理画面から外観 > メニューを開いてください。
まだ、メニューは一つも登録されていない状態のはずです。 メニューを作成しましょう。
メニュー名を入力し、 メニュー設定で「メインメニュー」にチェックが入った状態で 「メニューを作成」ボタンをクリックします。
表示させたい項目を選び「メニューを保存」ボタンで保存します。
フロントページなどを表示させると変更が反映されています。
ちなみに、メニューの位置をサブメニューにすると、ヘッダーのタイトル横に表示されます。cssを設定しない状態で入れてしまうとレイアウトが崩れるので注意しましょう。
↓
