logo标签列表

在WordPress菜单中添加自定义标记

wordpresswordpress-theming
11

我已经寻找很长时间来解决这个问题，但是没有找到任何方法，所以你们将是我的最后希望！

我正在尝试在我正在工作的 Wordpress 3 网站上构建一个新的 CSS3 菜单。我需要扩展默认菜单标记，但不确定如何操作。

目前，我在主题中使用以下标签输出菜单：

<?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>

我需要在每个<ul class="sub-menu">...</ul>周围添加2个div。

所以我需要标记看起来像这样:

<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>

请问有人知道如何做到这一点吗？

5个回答
8

根据 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";
    }
}

有条件地，我们可以检查$depth的值，仅为所需的子级输出自定义标记;

更多信息，请参见：http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

3
3
2

你可以使用jQuery的.wrap函数，例如：

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

不要忘记在头部添加正确的jQuery .js文件。 你应该使用.ready()函数。
0

不太确定您需要什么，但是这里有一些关于创建自定义WP菜单的参考资料。

在数据库中查看wp_posts表。这里是导航菜单项的位置。

对于自定义CSS，您可以使用CSS编辑器。它可以在仪表板的演示选项卡中的Edit CSS下找到。它由一个空白区域和两个按钮组成。您可以进行实时更改并立即查看结果。

要在主题的默认菜单位置使用自定义导航菜单，必须在主题的functions.php文件中注册此功能的支持。

请参见：http://codex.wordpress.org/Navigation_Menus 和 http://codex.wordpress.org/Function_Reference/register_nav_menus

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接