wp_nav_menuにカスタムHTMLを追加するには？

Question

私はWordPressに精通しており、WordPressメニューシステムを使用しています。しかし、カスタムHTMLをwp_nav_menu()に追加する方法を探しています。製品の下のドロップダウンメニューは、画像やリンクを含む方法

お知らせ：

は、私はこのようなメニューを作成しようとしています。私はこれを再作成したいと思います。私はいくつかのプラグインを見てきましたが、むしろそれをコード化します。

イメージとリンクをハードコーディングしても構いませんが、WordPressを使用してメニューを管理する柔軟性を維持したいと考えています。

Answer 1

WordPressがアイテムを表示するためのメニューページを通る方法は、ウォーカーオブジェクトを使用しています。この場合、このオブジェクトの特定のクラスはWalker_Nav_Menuと呼ばれます。 wp-includes\nav-menu-template.phpで見つけることができます。

Walker_Nav_Menuはかなりシンプルなクラスです。そこにリンクやメニュー構造がどのように構築されているかを見ることができます。関数start_elおよびend_elは、メニュー項目の作成に使用されます。 start_lvlおよびend_lvlは、ネストメニュー用です。このアプローチでは、主にstart_elとend_elを使用します。これらの関数で

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { 
    function start_el (&$output, $item, $depth = 0, $args = array(), $id = 0) { 
    // Copy all the start_el code from source, and modify 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) { 
    // Copy all the end_el code from source, and modify 
    } 
} 

、$itemはこれであなたが応じて追加の内容を照会することができ、あなたのメニュー項目である：functions.php親クラスとよく似た方法でWalker_Nav_Menuを拡張するために、クラスを作成し、あなたに

必要に応じて、現在のメニュー項目に移動します。 start_lvlとend_lvlは含まれていませんが、上書きされなければクラスが自動的に親クラスのメソッドを継承するため、問題はありません。

次に、あなたのテーマファイルには、あなたがこのようwp_nav_menu呼び出すことができます。あなたが出力されますどのようなコード変更できるように、

wp_nav_menu(array(
    'theme_location' => 'main', 
    'container' => false, 
    'menu_id' => 'nav', 
    'depth' => 1, 
    // This one is the important part: 
    'walker' => new Custom_Walker_Nav_Menu 
)); 

WordPressは、カスタムクラスや関数を使用します。