プラグインを使用せずにWordPressでカスタムナビゲーションメニューを作成する

公開: 2020-11-28

使用しているWordPressテーマに関係なく、ほぼ確実に、メニューを表示できるメニューの場所が少なくとも1つ提供されます（通常はWebサイトのヘッダーにあります）。メニューは管理エリア内から簡単に作成でき、これらの事前設定された場所にすばやく追加できます。しかし、Webサイトの他の場所に表示する別のメニューが必要な場合は、どうしますか？このチュートリアルでは、プラグインを使用せずに、選択した場所に表示できる独自のナビゲーションメニューを作成する方法を見ていきます。

さあ行こう！

新しいカスタムメニューの場所を登録する

最初に行う必要があるのは、新しいカスタムメニューの場所を登録することです。これを行うには、選択したテキストエディタ（Sublimeなど）でアクティブなテーマのfunctions.phpファイルを開き、次のコードを追加します。

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

このコードでは、 add_action()フックを使用してコールバック関数my_custom_menu()を追加しました。これは、 my_custom_menu()関数が、 initアクションが呼び出されるたびに実行されるデフォルトのコア関数とともに実行されることを意味します。「マイカスタムメニュー」文字列は、管理ページに表示される読み取り可能なバージョンです。

関数内では、コア関数register_nav_menuを使用して、テーマのナビゲーションメニューの場所を登録します。複数のメニューを登録する場合は、 register_nav_menus()を使用して、次のように配列内のメニューの場所を定義できます。

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

結果を確認するには、[外観]>[メニュー]の下の管理領域に移動します。カスタムメニューの場所がメニュー設定に含まれていることに気付くでしょう。

注：この時点でこの場所を選択すると、メニューにはフロントエンドに何も表示されません。

カスタムメニューの表示方法

新しいメニューの場所を、テーマにすでに存在する「デスクトップ水平メニュー」の下に配置されるセカンダリ水平メニューに使用するとします。

これを実現するために、メニューを表示するテーマのテンプレートにコードを挿入します。この例では、Twenty Twentyテーマを使用し、そのheader.phpファイルを編集してメニューを表示します。このファイルは、テーマのフォルダーの下にあります。

エディターでheader.phpファイルを開き、33行目のコードでこの要素を見つけます。

 <header class="header-footer-group" role="banner">

このセクションのすぐ下に、新しいカスタムメニューの場所'my-custom-menu'を表示するコードを配置します。

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

theme_locationの値は、前に貼り付けたfunctions.phpコードでメニューに指定した名前と同じである必要があります。この場合：'my-custom-menu'。

次に、これが機能しているかどうかを確認するためのテストメニューを作成しましょう。これを行うには、[外観]> [メニュー]に移動し、新しいメニューの作成を開始します。

メニューに「セカンダリメニュー」というタイトルを付け、場所として「マイカスタムメニュー」を選択してから、「メニューの作成」ボタンを押します。

最後に、メニューにいくつかの項目（たとえば、メニュー項目1、メニュー項目2、メニュー項目3）を追加して、メニューを保存します。

フロントエンドに現在あるものを見てみましょう。

なんとか新しいメニューを表示できましたが、かなり面倒ですね。

ソースコードを見ると、wp_nav_menu（）関数がこのHTMLコードを作成したことがわかります。

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

したがって、コードで説明されているクラスを使用して、メニューを美しくすることができます。これを行うには、CSSを使用します。 style.css（通常はheader.phpファイルと同じ場所にあります）を見つけて、エディターで開き、次のコードを追加します。

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

結果は今でははるかにきれいになり、デモWebサイトのスタイルに合わせてさらに多くなります。

追加のメニューのカスタマイズ

WordPressがメニューを表示するために提供するwp_nav_menu（）関数には、さらにカスタマイズできるさまざまなオプションが付属しています。

' theme_location '

上で説明したように、このパラメーターは、functions.phpのregister_nav_menus（）関数に渡されるキーに対応します。

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'menu_class'

メニューに独自のクラスを指定できる「 menu_class 」オプションがあります。

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) );

お気づきかもしれませんが、このクラスは他のクラスを置き換えるのではなく、代わりにul要素に追加されます。

'menu_id'

クラスオプションとは異なり、menu_idオプションは現在のメニューIDを置き換えます。 <ul>要素に対して生成されるHTMLは、次のようになります。

 <ul class="menu">

このオプションを使用しない場合、IDはメニュースラッグになり、複数のインスタンスを使用するとインクリメントされます。

'容器'

このパラメーターは、メニューを囲む要素のタイプを定義します。デフォルトは「div」です。たとえば、次のコードを使用する場合：

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

この結果が得られます：

'container_class'

これは、メニューの親要素に適用されるクラスです。

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

'before'および'after'パラメーターを使用して、各メニュー項目リンクの前または後にコンテンツを挿入することもできます。これは、ダッシュやアイコンを追加したり、メニュー項目をスパンタグでラップしたりする場合に非常に便利です。以下の例を自分で試して、これが実際に動作していることを確認できます。

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

メニュー項目にアイコンを追加することもできます。たとえば、Font Awesomeプラグインをインストールしてアイコンライブラリを含め、「before」メニューオプションを使用してfont-awesomeアイコンをメニュー項目に適用してみてください。

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

各アイコンのコードは、プラグインのアイコンリストにあります。

ウォーカーパラメータ

最後になりましたが、walkerパラメーターがメニューのカスタマイズにどのように役立つかの例を示します。 WordPressウォーカークラスが何であるかわからない場合は、おそらく次のようになります;あまり意味がありません。最初に「WordPressWalkerクラスに慣れる」を読むことをお勧めします。

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Walkerクラスを示すために、メニューに「サブアイテム」を追加します。

WordPressが提供するデフォルトのWalkerクラスをオーバーライドします。これは、wp-includes/class-walker-nav-menu.phpファイルにあります。これを実現するには、function.phpファイルに移動し、以下のコードを挿入します。

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

次に、headers.phpで、メニューコードを次のコードに置き換えます（結果を比較するためだけに、両方のメニューバージョンを意図的に出力します）。

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

このコードを元のWalker_Nav_Menuクラスと比較すると、 $tree_typeと$db_fieldsは変更されていないが、残りは変更されていることがわかります。時間をかけて、同じメニューのこれら2つのバージョンでコードとHTMLの両方の出力を比較し、My_Nav_Menu_Walkerクラスを試してみてください。

結論

ウェブサイトのメニューは明らかに非常に重要です！メニューの配置と出力を完全に制御できることで、テーマ開発者としての能力が拡張され、プラグインに依存することなくWebサイトを設計するときに、さまざまなエキサイティングな新しい可能性が開かれます。