Добавить пользовательскую разметку в меню Wordpress

Question

Я долго искал решение этой проблемы, но ничего не нашел, так что вы, ребята, будете моей последней надеждой!

Я пытаюсь создать новое меню CSS3 на Wordpress3 сайта, над которым я работаю.Мне нужно было бы расширить разметку меню по умолчанию, но я не уверен, как.

Это тег, который я использую в теме для вывода меню в данный момент:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

На данный момент разметка меню по умолчанию выглядит следующим образом:

<div class="menu-header">
 <ul id="menu-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <ul class="sub-menu">
    <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
   </ul>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <ul class="sub-menu">
    <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
    <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
   </ul>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>

Мне нужно добавить 2 деления вокруг каждого <ul class="sub-menu">...</ul> Поэтому мне нужно, чтобы разметка выглядела так:

<div class="menu-header">
 <ul id="menu-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>

Кто-нибудь знает, как это сделать, пожалуйста?

Answer 1

Согласно документации Wordpress http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example, просто добавьте Walker в меню:

<?php wp_nav_menu( array(
    'container_class'=>'menu-header',
    'theme_location'=>'primary',
    'walker'=>new my_Walker_Menu_List() //This is the trick!
)); ?>

А затем в файл functions.php вашей темы добавьте следующий код:

class my_Walker_MegaMenu extends Walker_Nav_Menu{
    /**
     * @see Walker::start_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n";
    }

    /**
     * @see Walker::end_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "$indent</ul>\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "$indent</ul></div></div>\n";
    }
}

Условно, мы можем проверить значение $ глубины , чтобы вывести пользовательскую разметку только для желаемого подуровня (ов);

Для получения дополнительной информации вы можете увидеть: http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

Answer 2

Это может помочь:

Объединить wp_nav_menu () с настраиваемым классом Walker

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Объединить wp_get_nav_menu_items () с функцией clean_custom_menus ()

http://digwp.com/2011/11/html-formatting-custom-menus/

Answer 3

Разметка меню генерируется в wp-includes / classes.php с классом Walker, в частности class Walker_Page extends Walker {

Если вы посмотрите на функции в классе, вы увидите, где генерируется фактическая разметка.

http://codex.wordpress.org/Function_Reference/Walker_Class

Answer 4

Вы можете просто использовать функцию jQuery .wrap, например

$('div.submenu').wrap('<div class="sub-menu-container" />');

Не забудьте добавить в свой заголовок нужные jQuery .js.

Вам, вероятно, следует также использовать функцию .ready ().

Answer 5

Не совсем уверен, что вам нужно, но вот несколько ссылок на создание пользовательского меню WP.

В базе данных посмотрите таблицу wp_posts. Здесь расположены элементы навигационного меню.

Для пользовательского CSS вы можете использовать редактор CSS. Его можно найти в разделе «Редактировать CSS» на вкладке «Презентация» на панели инструментов. Он состоит из пустой области для ввода текста и двух кнопок. Вы можете вносить живые изменения и мгновенно видеть результат.

Чтобы использовать пользовательское меню навигации вместо меню по умолчанию для вашей темы, поддержка этой функции должна быть зарегистрирована в файле functions.php темы.

См .: http://codex.wordpress.org/Navigation_Menus И http://codex.wordpress.org/Function_Reference/register_nav_menus