20

WordPress と WordPress メニューシステムの使用に精通しています。しかし、カスタム HTML を に追加する方法を探していますwp_nav_menu()。

次のようなメニューを作成しようとしています。 ここに画像の説明を入力

製品の下のドロップダウン メニューに画像とリンクが含まれていることに注意してください。これを作り直したいと思います。私はいくつかのプラグインを見てきましたが、むしろそれをコーディングしたいと思います。

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

4

1 に答える 1

60

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

はWalker_Nav_Menuかなり単純なクラスです。リンクとメニュー構造がどのように構築されているかを確認できます。関数start_elとend_elは、メニュー項目を構築するために使用されます。関数start_lvlとend_lvlは、メニューをネストするためのものです。このアプローチでは、主に と を使用start_elしend_elます。

クラスを作成する際に、親クラスと非常によく似たメソッドでfunctions.php拡張するには:Walker_Nav_Menu

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がメニュー項目であり、必要に応じて、現在のメニュー項目に従って追加のコンテンツを照会できます。start_lvlandを含めていないことに注意してください。ただし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 はカスタム クラスと関数を使用するため、出力されるコードを変更できます。

于 2012-09-03T16:08:18.967 に答える