『公式テーマ「Habakiri」をカスタマイズ』の3回目です。グローバルナビゲーションを、これまたありがちなタイプに整え、ヘッダーに「電話番号」や「お問い合わせ」ボタンを仕込みます。またフッターのコピーライト部分を自社名等に書き換えます。
グローバルナビゲーションを作る
ヘッダーのサイト名「薩摩藩株式会社」の下に、よくある帯状のグローバルナビゲーションを作ります。
構成としては「最新情報」「西郷隆盛」「大久保利通」「小松帯刀」「島津斉彬」(なんだそれw。いや、フツーは「会社概要」「製品情報」「採用情報」「アクセス」とかですねw)。「最新情報」は投稿データから表示。ほかは固定ページとして作ります。
まず「最新情報」を除いた固定ページを作ります。
このあと、投稿データも「最新情報」としてグローバルナビゲーションに追加したいので、投稿データ用の固定ページを作成します(この方法がわかんなくてなー;;)。
管理画面から「固定ページ」→「新規作成」で、タイトルは「最新情報」、スラッグは「blog」(←例:newsでもinfoでもなんでもいい)にします。本文は何も入れなくてもOK。
次に「外観」→「カスタマイズ」→「固定フロントページ」を開き、投稿ページのプルダウンメニューで「最新情報」を選び、保存します。
「外観」→「メニュー」から、メニューを設定します。
メニュー名を適当に入力します。例では「薩摩藩株式会社」と入れて、「メニューを作成」ボタンをクリックしたあと、左側の「固定ページ」から、メニューに並べたい項目をチェックして「メニューに追加」しています。右側の「メニュー構造」の並びを見て、並べ替えが必要な場合は、ここで順序を入れ替えてください。
メニュー設定の「グローバルナビゲーション」にチェックを入れて「メニューを保存」します。
サイトを表示すると、ヘッダータイトルの横に、グローバルメニューが表示されています。それぞれのリンクをクリックして、表示される画面を確かめてください。「最新情報」からは投稿データが表示されます。
ヘッダーとグローバルメニューをカスタマイズする
これでも十分にかっこいいのですが、タイトルの下に帯状にグローバルメニューが表示されるタイプにしてみます。ついでに、ヘッダーのタイトルもそれなりのロゴ画像に変えてしまいます(ロゴ画像を準備してください)。
「外観」→「カスタマイズ」→「レイアウト」→「ヘッダー」から、ヘッダーを「2行」にします。
ヘッダーを固定したい場合は「はい」を選びます。ヘッダーを固定すると、長いページで画面を下にスクロールしてもヘッダー部分だけは動かず、常時表示されます。
ここからヘッダー部分の色をカスタマイズして、帯状のグローバルメニューを作ります。色は適当に選んでください。以下は色カスタマイズの例です。
「外観」→「カスタマイズ」→「色」→「ヘッダー」
背景色#000000
「外観」→「カスタマイズ」→「色」→「グローバルナビゲーション」
背景色#ccb72e・リンク文字色#ffffff・リンク文字色(ホバー時)#ffffff・メニュー背景色#ccb72e・メニュー背景色(ホバー時)#497a2a
「外観」→「カスタマイズ」→「色」→「ハンバーガーボタン」
文字色#ffffff・背景色#000000
ヘッダーのタイトルをロゴ画像に変えます。
管理画面の「メディア」に、あらかじめロゴ画像をアップロードしておきます。
「外観」→「カスタマイズ」→「設定」で、ロゴの「画像を選択」からアップロードした画像を選びます。
なんだかそれらしきグローバルナビゲーションができました。
このグローバルナビゲーションのボタン幅を等幅にして、境界線を描きたい場合は、子テーマのstyle.cssに下記を追加します。
@media screen and (min-width: 980px) {
.menu > li {
border-left: 1px solid #ccc;
width: 20%;
}
.menu > li:last-child {
border-right: 1px solid #ccc;
}
}
2017/12/23追記:menu > liと、直下セレクタを使っていますが、ここをmenu liにしてしまうと、グローバルナビゲーションの、例えば「大久保利通」の下に、「誕生/少年期/青年前期…」とか下層項目が下がっている場合、マウスオーバーでプルダウンするメニューがさらに20%幅になってしまい、おかしなレイアウトになります。
追記終了
さて、これでよくありがちなヘッダーのスタイリングができました。メニューの文字フォントが小さい場合は、「外観」→「カスタマイズ」→「レイアウト」→「グローバルナビゲーション」で、文字サイズ(px)を変更しましょう。
ついでにこれまたよくありがちですが、ヘッダー部分に電話番号とお問い合わせリンクを作ります。
これはheader.phpをさわる必要があるので、子テーマhabakiri-childフォルダの中に、親テーマhabakiriフォルダからheader.phpをコピーしてきます。
<div class="row header__content">
<div class="col-xs-10 <?php echo esc_attr( $site_branding_size ); ?> header__col">
<div class ="row">
<div class="col-md-10 col-sm-12">
<?php get_template_part('modules/site-branding'); ?>
</div>
<div class="col-md-2 col-sm-12">
<ul class="topnav2">
<li class="tnav1"><a href="/inquiries.html"><i class="fa fa-envelope fa-lg fa-fw"></i>お問い合わせ</a></li>
<li class="tnav2"><a href="/recruit.html"><i class="fa fa-phone-square fa-lg fa-fw"></i>03-1234-5678</a></li>
</ul>
</div>
</div>
<!-- end .header__col --></div>
<div class=”row header__content”>と<!– end .header__col –></div>の間を、上記のように書き換えます。
ついでに、style.cssに、上記部分のスタイルを設定します。
ul.topnav2 {
margin: 4px 0 0 0;
padding: 0;
display: block;
list-style-type: none;
}
ul.topnav2 li {
margin: 0;
padding: 0;
color: #fff;
font-size: 16px;
height: 40px;
line-height: 40px;
list-style-type: none;
vertical-align: middle;
text-align: left;
}
ul.topnav2 li a {
color: #fff;
}
ul.topnav2 li a:hover {
color: #ccc;
}
ついでになんとなく全体のフォントも変えてみます。
body {
font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif;
line-height: 1.8;
font-weight: 500;
font-size: 15px;
}
スライドショー上に表示される文字フォントが小さい気がするので、これもstyle.cssをいじります。
.habakiri-slider__item-content {
font-size: 2.0em;
}
フッターのコピーライト部分をカスタマイズする
フッターのコピーライト部分については、作者さんのページでアドオン「Copywrite Manager」(540円)が販売されています。まずはそちらをご検討ください。
自分でカスタマイズしたい方は、親テーマのmoduleフォルダから子テーマのmoduleフォルダへcopyright.phpをコピーしてきて、下記のように、まるっと修正します。リンク先等は適宜修正してください。
<?php
$copyright = '<a href="http://www.satsuma-han.co.jp/">SATSUMA-HAN corporation</a>';
echo apply_filters( 'habakiri_copyright', $copyright );
もうここまででババアは疲労のために青息吐息で倒れそうなので、続きはまた次回。
公式テーマ「Habakiri」をカスタマイズ(1)
公式テーマ「Habakiri」をカスタマイズ(2)
公式テーマ「Habakiri」をカスタマイズ(3)
公式テーマ「Habakiri」をカスタマイズ(4)