複雑なヘッダーのカスタマイズの方法について

ありがとうございます。

実のところ、やはりHTMLをいじる以上はテンプレートに手を加える必要があるかなとは思っていたので、ご回答いただき大変参考になりました。ありがとうございます。

ちなみにMy Snow MonkeyからSnow Monkeyのテンプレートファイルを上書きする際、下記のコードを使用するとのことですが、添付画像のようなヘッダーを実装する場合、下記コードを利用し、どのようにカスタマイズを進めれば良いでしょうか？

また今回のヘッダー自体、頻繁にデザインを変更する予定はないのですが、ご提案いただいたメンテナンス性はできれば高い方が良いなと思うところもあります。そちらも合わせて最適解がありましたらアドバイスいただけますと幸いです。

add_filter(
'snow_monkey_template_part_root_hierarchy',
function( $hierarchy ) {
$hierarchy[] = untrailingslashit( __DIR__ ) . '/override';
return $hierarchy;
}
);

参考元：

• https://happy-snow-monkey.olein-design.com/preparing-to-overwrite-the-snow-monkey-template-file-from-my-snow-monkey
• https://snow-monkey.2inc.org/manual/manual-advanced/add-template-root/

以下の通り設定し、結果的に、、、、、、、、、、、、できました！！
ご回答いただいたお二方ありがとうございました！！

こちらも皆さんの参考になればと思い、以下に設定した内容を記載しております。ぜひご参照ください！（無駄なところがあるかもしれません、、）

• ヘッダーを全幅にする
• ヘッダーレイアウトを2行に
• ヘッダーコンテンツに記述（記述内容を以下に記載しております）
• 「お問い合わせ」をグローバルナビに入れ、menu-item-contactクラス付与

ヘッダーコンテンツ
<div class="header-tel">
<div>TEL</div>
<div class="header-tel-number">0000-00-0000</div>
</div>
<div class="header-btn-recruit"><a class="c-btn">採用情報</a></div>

追加CSS
/*==========================*/
/* Header
/*==========================*/
[data-has-global-nav=true] .l-2row-header__row:last-child{
margin-top: 0px;
}
.c-fluid-container{
padding-right: calc(192px + 22px);
position: relative;
}

.c-header-content{
display: flex;
align-items: center;
}

.header-tel{
display: flex;
justify-content: flex-start;
font-weight: bold;
font-size: 20px;
}

.header-tel-number{
margin-left: 6px;
}

.header-btn-recruit{
display: table;
}

.header-btn-recruit a.c-btn{
background-color: #fff;
color: var(--accent-color,#cd162c);
border: 2px solid var(--accent-color,#cd162c);
border-radius: 22px;
font-weight: bold;
width: 175px;
height: 44px;
margin-left: 23px;
display: flex;
align-items: center;
justify-content: space-around;
}

.header-btn-recruit a.c-btn::after{
content: "";
width: 7.7px;
height: 7.7px;
border-top: 2px solid var(--accent-color,#cd162c);
border-right: 2px solid var(--accent-color,#cd162c);
transform: rotate(45deg) translate(1px, 1px);
}

.menu-item-contact{
position: absolute;
top: 0;
right: 0;
width: 192px;
height: 100%;
}

.c-navbar{
justify-content: flex-end;
}

.c-navbar__item{
flex: initial;
}

.c-site-branding__title{
position: absolute;
height: 100%;
top: 0;
display: flex;
align-items: center;
}

.l-2row-header .p-global-nav .c-navbar__item>a{
padding-top: 16px;
padding-bottom: 12px;
}

.p-global-nav .c-navbar__item>a{
font-size: 16px;
line-height: 1.5;
}

@media (min-width: 64em){
.l-2row-header__row:first-child {
padding-top: 4px;
padding-bottom: 0px;
}
}

ふぅ〜追加CSSでできて、よかった、、🥷
トピック閉じておきます

♥ 7

いいねをした人: