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

Programming

今回は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');

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

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

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

<?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などでドロップダウン化するなりすれば完成です。


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

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
KT LIFE
タイトルとURLをコピーしました