编辑WordPress导航栏的HTML

时间:2014-12-18 作者:Rogare

有没有办法更改我的wordpress页面导航栏的html?(我想添加几个div,这些div将由媒体查询控制。)

感谢阅读!

2 个回复
SO网友:Karun

是的,您需要为此实现walker类。

这里有一个简单的例子。

$defaults = array(
    \'theme_location\' => \'primary\',
    \'container\'      => \'ul\',
    \'menu_class\'     => \'nav navbar-nav main-nav\',
    \'walker\'         => new Primary_Walker_Nav_Menu()
);

wp_nav_menu( $defaults );
在上述代码块中wp_nav_menu() 函数takes$defaults 作为参数。在阵列中$defaults, 最后一个键是walker. Te walker键的值是类的对象Primary_Walker_Nav_Menu.

在中functions.php 文件实现以下代码:

class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        if (array_search(\'menu-item-has-children\', $item->classes)) {
            $output .= sprintf("\\n<li class=\'dropdown %s\'><a href=\'%s\' class=\\"dropdown-toggle\\" data-toggle=\\"dropdown\\" >%s</a>\\n", ( array_search(\'current-menu-item\', $item->classes) || array_search(\'current-page-parent\', $item->classes) ) ? \'active\' : \'\', $item->url, $item->title
            );
        } else {
            $output .= sprintf("\\n<li %s><a href=\'%s\'>%s</a>\\n", ( array_search(\'current-menu-item\', $item->classes) ) ? \' class="active"\' : \'\', $item->url, $item->title
            );
        }
    }

    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent<ul class=\\"dropdown-menu\\" role=\\"menu\\">\\n";
    }
}
Thestart_el() 方法用于为单个树项目(例如<li>, <span>, 或<a>) 到$output.

这个start_lvl() 方法在walker到达树结构中新“分支”的开头时运行。

通常,此方法用于添加容器HTML元素的开始标记(例如<ol>, <ul>, 或<div>) 到$output.

上述实现的输出将生成以下HTML:

<ul id="menu-main-navigation" class="nav navbar-nav main-nav">
   <li class="dropdown ">
      <a href="http://karunshakya.com.np/services/" class="dropdown-toggle">Services</a>
      <ul class="dropdown-menu" role="menu">
         <li><a href="http://karunshakya.com.np/services/selection-et-recrutement/">Sélection et recrutement</a></li>
         <li><a href="http://karunshakya.com.np/services/mise-disposition-de-personnel/">Mise disposition de personnel</a></li>
         <li><a href="http://karunshakya.com.np/services/gestion-de-salaire/">Gestion de salaire</a></li>
      </ul>
   </li>
   <li><a href="http://karunshakya.com.np/news/">News</a></li>
   <li><a href="http://karunshakya.com.np/medias/">Medias</a></li>
   <li class="last-child"><a href="http://karunshakya.com.np/contactez-nous/">Contactez-nous</a></li>
</ul>
如何使用Walker类:
http://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

SO网友:Amit

如果您只想更改外部元素(而不是li本身),则可以传递到wp_nav_menu() 这个\'items_wrap\' => \'<ul id="%1$s" class="%2$s">%3$s</ul>\' 参数并根据需要对其进行编辑,例如,这显示了如何在nav 元素和adiv 要素:

\'items_wrap\' => \'<div><nav><ul id="%1$s" class="%2$s">%3$s</ul></nav></div>\',.

您还可以传入其他元素来编辑<li> 以及<a> 使用\'before\' => \'\', \'after\' => \'\', \'link_before\' => \'\', \'link_after\' => \'\'.

如果这没有帮助,请显示所需的final 您试图获取的HTML输出。

结束

相关推荐

Add custom html to nav_menu

我正在尝试向nav\\U菜单添加一些html。基本上,如果菜单中有子菜单,我需要在开始li标记后插入一个按钮标记。我看到有一个walker类,但我不知道如何实现它。任何帮助都将不胜感激,谢谢!!!<ul class=\"menu-one\"> <li class=\"has-children\"> <button class=\"toggleExpand\"><i class=\"fa fa-arrow