デイトラweb制作（Word Press化その3）

公開日 2026/9/6 最終更新日 2026/9/6

デイトラの卒業課題を1日（1〜2時間）行なっています。

メニュー部分をWordPressでも編集できるようにする

Word Pressにメニュー機能を使用できるようにする

functions.phpに下記のコードを追加します。

/**
 * メニューの登録
 */
function my_menu_init() {
  register_nav_menus(
    array(
      'global' => 'ヘッダーメニュー',
      'drawer' => 'ドロワーメニュー',
      'footer-menu' => 'フッターメニュー'
    )
  );
}
add_action('init', 'my_menu_init');

フッターメニューは今回は使用しませんが、一応入れておきます。

メニュー構造（通常リンク＋デザインの異なるボタン2つ＋区切り線）を表現させる

・管理画面でクラス名を個別付与し、CSSでスタイルを調整します。

手順: WordPress管理画面＞「外観」＞「メニュー」＞画面右上の「表示オプション」を開き、「CSS クラス」にチェックを入れます。

・静的なhtmlをWord Pressで編集できるように変更。

<nav class="l-header__nav">
    <!-- <a href="" class="l-header__link">トップ</a>
         <a href="" class="l-header__link">当社について</a>
         <a href="" class="l-header__link">サービス</a>
         <a href="" class="l-header__link">導入事例</a>
         <a href="" class="l-header__link">お知らせ</a>
         <a href="" class="l-header__button c-button-type2">資料ダウンロード</a>
         <a href="" class="l-header__button c-button-type1">お問い合わせ</a> -->

    <?php
         wp_nav_menu(
            array(
                  'depth' => 1,
                  'theme_location' => 'global', // グローバルメニューをここに表示すると指定
                  'container' => 'false',
                  'menu_class' => 'l-header__nav'
                 )
            );
    ?>
</nav>

・管理画面でクラス名を個別に付与する

ドロワーメニューを作成する

・同じく、静的なhtmlをWord Pressで編集できるように変更。

<div id="js-drawer-content" class="l-drawer-content">
    <nav class="c-drawer-content__menu">
       <!-- <a href="" class="c-drawer-content__link">トップ</a>
            <a href="" class="c-drawer-content__link">当社について</a>
            <a href="" class="c-drawer-content__link">サービス</a>
            <a href="" class="c-drawer-content__link">導入事例</a>
            <a href="" class="c-drawer-content__link">お知らせ</a>
            <div class="c-drawer-content__button">
                <a href="" class="c-button-type3">資料ダウンロード</a>
            </div>
            <div class="c-drawer-content__button">
                <a href="" class="c-button-type4">お問い合わせ</a>
            </div> -->

        <?php
           wp_nav_menu(
              array(
                    'depth' => 1,
                    'theme_location' => 'drawer', // ドロワーメニューをここに表示すると指定
                    'container' => 'false',
                    'menu_class' => 'c-drawer-content__menu'
              )
           );
        ?>
    </nav>
</div>

・管理画面でクラス名を個別に付与する

結果

今回はグローバルとドロワーのhtml構成を敢えてa要素のみとdivで囲った記述で作成してみました。

基本的にはクラス名を個別付与する事で再現できましたが、ドロワー側のボタンとの余白（margin）が読み込まれない部分をCSS側で調整しています。

メニューをデザインに再現するにはクラス名を個別付与すると簡単です！

以上、デイトラweb制作（Word Press化その3）の状況でした。

ご依頼等ありましたら、下記のURLにお問い合わせ下さい。

お問い合わせはこちら

ポートフォリオサイトはこちらになります。

ポートフォリオサイトはこちら

タグ