WordPressで任意の位置にオリジナルのメニューを作る方法

今回はWordPressに任意の場所にオリジナルのメニューを追加する方法を紹介します。

WordPressではデフォルトではメニューの設定はありません。今回紹介するコードによってメニューが有効化されます。そのメニューは独自に作成出来るため、配置とclassを自由に設定する事が出来ます。テーマ作成では必ず必要な要素なので覚えておきましょう。

WordPressで任意の位置にオリジナルのメニューを作る方法

メニューを追加するには、 function.phpに以下の記述をします。
この場合「Main Menu」「about menu」「tab menu」の3つを作成している事になります。

// メニューの設定
function register_my_menus()
{
    register_nav_menus(array(
'main-menu' => 'Main Menu',
'about-menu' => 'about menu',
'tab-menu' => 'tab menu',
));
}
add_action('after_setup_theme', 'register_my_menus');

すると以下の外観→メニューのページにメニューの位置が追加されています。
そのページで実際に入れるメニュー項目をドラック&ドロップで作成していきます。

メニュー作成管理画面の操作については以下で説明しています。

ワードプレスで簡単にメニューを作る方法

今回はWordPress(ワードプレス)を使って簡単にメニューを作成する方法を説明いたします。今回は既存のテーマを使用してグローバルナビゲーションメニュー(グロナビ)を作成していきます。最近のテーマにはほとんどグロナビは付いているので基本的に今回の記事と同じ様に操作すればOKです。

kt-life.net

2020.02.11

メニューが完成したら以下の記述を表示させたいファイルに記述して完成です。

<?php
 // メインメニューを表示
 if ( has_nav_menu( 'main-menu' )){
  $mainMenu = array(
  'theme_location' => 'main-menu',
  'menu_id' => 'main-menu',
  'menu_class' => 'menu',
  'container' => false,
  'link_before' => '<span>',
  'link_after' => '</span>',
  'depth' => 0,
  );
 wp_nav_menu( $mainMenu ); 
 };
?>

後は、CSSで見た目を整えたり、drawer.jsなどでドロップダウン化するなりすれば完成です。

横からスライドするドロワーメニュー(ハンバーガーメニュー)のテンプレート

この記事では、コピペで作れるドロワーナビ(ハンバーガーメニュー)のテンプレートを紹介します。ドロワーナビとは、以下のように「三」型のボタンをクリックすると上下左右の何からコンテンツが現れるUXデザインです。そこにメニューがあると「ドロワーメニュー」と言われます。スマホサイトでは多く採用されているデザインですので、今後の制作では必須の技術です。また別名で「ハンバーガーメニュー」と言われることが多いですので合わせて覚えておきましょう。

kt-life.net

2021.03.07

以上が「WordPressで任意の位置にオリジナルのメニューを作る方法」でした。

少しでも参考になれば幸いです。