子テーマをカスタマイズしてみましょう。 今回はヘッダー部分を調整します。
フロントページでは大きめにヒーロー画像が、 他のページではポートフォリオサイトにデザインを寄せたナビゲーションが表示されるようにします。
header部分の調整
①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
header.php - 30行目にある<header>タグにクラスを追加します。
フロントページと、それ以外のページで表示を変えたいので条件分岐を入れましょう。 ポートフォリオサイトのheader.phpで行ったのと同じ方法です。
<header>タグ部分を下記のように変更してください。
header.php
これで
フロントページの<header>タグには「front-header」クラス
それ以外のページの<header>タグには「no-front-header」クラス
追加で入るようになりました。
それぞれのクラスを使って、独自cssを設定してきましょう。
③フロントページ用headerの設定
では、フロントページに表示されるheaderエリアの設定をしていきましょう。 作成した「front-header」クラスをセレクタにして、ヒーロー画像と高さを設定します。
前回style.cssのが読み込まれているか確認するために使った、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」プロパティを使って背景画像の明度と色調を変更してみます。（※不要な方は飛ばしてください）
::beforeを使って疑似要素を重ねるのは、ポートフォリオサイトで背景画像を青っぽく変更するときにも使いましたね。ポートフォリオサイトでは背景色を半透明にして重ねましたが、その高機能版と言えるプロパティが「filter」プロパティです。
「filter」は、ぼかしや色変化などのグラフィック効果を要素に適用できるcssプロパティ。上図の場合ですと、値にsepiaを入れているのでセピア調の色彩になっていますよね。それ以外に「grayscale(50%)」と書くとモノクロ調になったりと、photoshopの調整機能のようにグラフィック効果を適用させることが出来ます。
使用する写真に統一感を出したい、 モノクロ表示→マウスオーバーでカラーに変更、 などの場合にも役に立ちますよ。
プロパティ値についての詳細はMDN-filterをご確認ください。
④フロントページ以外の部分
フロントページ以外で表示されるヘッダー部分をカスタマイズしていきましょう。 こちらの設定は非常にシンプルです。
フロントページ以外のページを開いて表示を確認してみて下さい。
⑤スマホ画面用の調整
最後に、画面幅を小さくしてもヘッダー部分が綺麗に表示されるか確認します。
まずはフロントページ以外のページを見てみましょう。
特に問題は無いですが、サイトタイトルが少し大きいので調整します。
今度はフロントページに戻って、確認してみましょう。
メニューボタンが落ちてしまっていますし、header画像の高さもありすぎですね。 style.cssで直していきましょう。
これでヘッダー部分のカスタマイズは終わりです。
ヘッダーナビゲーションの項目
テーマ「storefront」を導入したときから自動的に表示されていたヘッダーナビゲーション。ショップメニューらしい項目が並んでいますが「サンプルページ」など要らない部分もありますよね。
これを消してみたいと思います。 ショップの管理画面から外観 > メニューを開いてください。
メニューが一つも登録されていない状態のはずです。
自分で設定したメニューを表示させるために、メニューを作成しましょう。 人気のメニュー名を入力し、「メインメニュー」にチェックが入った状態でメニューを作成ボタンをクリックします。
表示させたい項目を選び「メニューを保存」ボタンで保存します。
フロントページなどを表示させると変更が反映されています。
ちなみに、メニューの位置をサブメニューにすると、ヘッダーのタイトル横に登録した項目が表示されます。cssを設定しない状態で入れてしまうとレイアウトが崩れるので注意しましょう。
↓
