COCCOONのモバイルヘッダーをモダンにする方法

COCOONのカスタマイズをChatGPTを使って行っていました。
ヘッダーのデザインが指定のもとは異なったのですが、モダンにできたと思ったので、カスタマイズの参考にできるように、記録に残すために投稿しました。
CSSなどは、実際のデザインに合わせて修正が必要と思われます。

functions.phpを使ってヘッダーに追加するコードを追加しています。

子テーマのfunctions.phpに追加

function custom_mobile_menu() {
    ?>
    <div class="custom-header">
        <div class="header-left">
            <p class="site-name">○○会社</p>
        </div>
        <div class="header-right">
            <a href="tel:[phone]" class="header-icon phone-icon">
                <i class="fa fa-phone"></i>
                <span>お電話</span>
            </a>
            <a href="#contact" class="header-icon contact-icon">
                <i class="fa fa-envelope"></i>
                <span>お問合せ</span>
            </a>
            <div class="hamburger-menu">
                <i class="fa fa-reorder"></i>
                <span>MENU</span>
            </div>
        </div>
    </div> 

    <!-- ハンバーガーメニュー用のモバイルメニュー -->
    <div class="slicknav_nav">
        <?php
        // WordPressで登録されたメニューを表示
        wp_nav_menu(array(
            'theme_location' => 'mobile-menu', // モバイルメニュー用のテーマ位置
            'container' => false,
            'menu_class' => 'mobile-menu-items',
            'fallback_cb' => false, // メニューが未登録の場合にデフォルトを表示しない
        ));
        ?>
    </div>
    <?php
}
add_action('wp_body_open', 'custom_mobile_menu');

モバイルのメニューの項目が表示できるように、設定が必要です。

function register_custom_menus() {
    register_nav_menus(array(
        'mobile-menu' => __('モバイルメニュー', 'your-text-domain'),
    ));
}
add_action('init', 'register_custom_menus');

CSSは、こちらです。

/* モバイル用ヘッダー */
.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-left .site-name {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon {
    font-size: 20px;
    color: #0073aa;
    text-decoration: none;
}

.phone-icon i {
    color: #2d76b8;
}

.contact-icon i {
    color: #3d3b8e;
}

.hamburger-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.hamburger-menu span {
    font-size: 14px;
    color: #333333;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
}

.hamburger-icon span {
    width: 25px;
    height: 3px;
    background-color: #333333;
}




/* モバイルメニューのスライド表示 */
.slicknav_nav {
    position: fixed;
    top: 0;
    left: -100%; /* 初期状態で画面外に隠す */
    width: 250px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    z-index: 1001;
    transition: left 0.3s ease; /* スライド効果を追加 */
}

.slicknav_nav.open {
    left: 0; /* メニューを表示 */
}

/* メニュー内のリンクのスタイル */
.slicknav_nav a {
    display: block;
    padding: 15px;
    color: #333333;
    text-decoration: none;
    border-bottom: 1px solid #eeeeee;
}

.slicknav_nav a:hover {
    background-color: #f8f8f8;
}

/* 背景のオーバーレイ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* 初期状態では非表示 */
}

.menu-overlay.active {
    display: block; /* メニュー表示中に背景を有効にする */
}


/* アイコン全体のデザイン */
.header-icon, .hamburger-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px; /* 正方形の幅 */
    height: 80px; /* 正方形の高さ */
    background-color: #f5f5f5; /* 背景色（デフォルト） */
    text-decoration: none;
    font-size: 12px; /* テキストサイズ */
    font-weight: bold;
    color: #333333;
    border: none; /* ボーダーを削除 */
    margin: 0; /* マージンなし */
    padding: 0; /* パディングなし */
}

/* 特定のアイコンごとの背景色 */
.phone-icon {
    background-color: #e6f4ff; /* 電話アイコンの背景色（青系） */
    color: #0073aa; /* テキストとアイコンの色 */
}

.contact-icon {
    background-color: #d3ccf3; /* 問い合わせアイコンの背景色（紫系） */
    color: #3d3b8e; /* テキストとアイコンの色 */
}

.hamburger-menu {
    background-color: #f7f7f7; /* ハンバーガーメニューの背景色（グレー系） */
    color: #333333;
}

/* アイコン内の文字位置調整 */
.header-icon span, .hamburger-menu span {
    margin-top: 5px; /* アイコンと文字の間隔 */
    font-size: 10px;
}

/* アイコンを横並びに配置 */
.header-right {
    display: flex;
    gap: 0; /* 隙間をなくす */
    justify-content: space-between;
    width: auto; /* 幅を調整 */
    background-color: #ffffff; /* 全体の背景色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 全体に影を追加 */
}

@media screen and (max-width: 480px) {
    .header-icon, .hamburger-menu {
        width: 60px; /* 幅を小さく */
        height: 60px; /* 高さを小さく */
    }

    .header-icon span, .hamburger-menu span {
        font-size: 9px; /* テキストサイズを縮小 */
    }
}


/* ヘッダー全体を固定 */
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* ヘッダーを最前面に */
    background-color: #ffffff; /* 背景色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影の効果 */
}




/* 既存のモバイルのメニューを非表示　*/
.slicknav_menu {
    display: none !important;
}

@media screen and (min-width: 1025px) {
    .custom-header {
        display: none;
    }
}

/* パソコン用ヘッダーをモバイルで非表示にする */
@media screen and (max-width: 1024px) {
    .header-contact-info {
        display: none;
    }
    
    #header-in {
        display: none;
    }

    /* ヘッダー下の余白を確保 */
    #content {
        margin-top: 80px; /* ヘッダーの高さ分だけ下げる */
    }

}

Javascript

  document.addEventListener("DOMContentLoaded", function () {
      const hamburgerMenu = document.querySelector(".hamburger-menu");
      const slicknavMenu = document.querySelector(".slicknav_nav");

      // ハンバーガーメニューのクリックイベント
      hamburgerMenu.addEventListener("click", function () {
          slicknavMenu.classList.remove('slicknav_hidden');
          slicknavMenu.classList.toggle("open");
      });
  });

実装例

スクリーンショットを加工したものですが、コード実装時のイメージのために掲載しました。