当サイトのWordPressテーマはSWELLですが受託案件では自分好みにカスタマイズできるSnow Monkeyを活用する機会も多いです。 そのSnow Monkeyでヘッダーをコーポレートサイト風にカスタマイズ する方法について備忘録として残しておきます。ヘッダーの2行目のグローバルナビを横いっぱいに伸ばして背景色をつけるカスタマイズですね。
こんな感じのやつです。
デフォルトでは2行表示できますが、2行目を画面いっぱいに背景色をつくれないので、カスタマイズが必要になります。あまりコーディングは得意ではないのですが、サポートフォーラムなどを参考にして何とか実装ができました。
基本的な考え方については下記の記事を参考にさせていただきました。ありがとうございます。
https://masatoshihanai.com/snow-monkey-child/
カスタマイズするファイルは、下記の2row.phpです。
STEP
下記サポートフォーラムの回答を参考にMy Snow Monkeyプラグインの中にファイルを作成する
「4. 3」まで進めればOKです。
WordPress テーマ Snow Monkey
ヘッダー上にデザインがある電話を載せたいPCとスマホ共に
このトピックには10件の返信、2人の参加者があり、最後にsnssenyou21@gmail.comにより4年、…
STEP
2row.phpの最下部エリアをカスタマイズする
この箇所です。
<?php if ( $has_global_nav ) : ?>
<div class=l-<?php echo esc_attr( $header_type ); ?>__row u-invisible-md-down">
<?php
Helper::get_template_part(
'template-parts/nav/global',
null,
[
'_vertical' => false,
'_gnav-hover-effect' => get_theme_mod( 'gnav-hover-effect' ),
'_gnav-current-effect' => get_theme_mod( 'gnav-current-effect' ),
]
);
?>
</div>
<?php endif; ?>ここに.c-containerクラスのdivで囲ってあげるだけです。
<?php if ( $has_global_nav ) : ?>
<div class="p-global-nav-bg l-<?php echo esc_attr( $header_type ); ?>__row u-invisible-md-down">
<div class="c-container">
<?php
Helper::get_template_part(
'template-parts/nav/global',
null,
[
'_vertical' => false,
'_gnav-hover-effect' => get_theme_mod( 'gnav-hover-effect' ),
'_gnav-current-effect' => get_theme_mod( 'gnav-current-effect' ),
]
);
?>
</div>
</div>
<?php endif; ?>ヘッダー2行目のグローバルナビに背景色をつけるためのclass「p-global-nav-bg」を新たに追加しておきましょう。他のclass名で追加しないように注意してください。
STEP
CSSを追加する
/* 要素を中央にもってくる記述 */
.p-global-nav-bg {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}/* グロナビメニューの横幅を均等にする記述 */
.p-global-nav-bg .c-navbar__item{
width: 100%;
}後はこの2つの記述をするだけでOKだと思います。 お好みで「.p-global-nav-bg」にborderの記述や背景色を記述してください。
