如何添加周围的WordPress UL容器一个div(How can I add a div aro

2019-07-29 04:06发布

WordPress的输出该UL标签内我的孩子菜单...

<ul class="sub-menu">

我如何包装它简单单吗?

最好的方式通过的functions.php做到这一点,但jQuery的可以工作了。

Answer 1:

虽然它很容易使用像jQuery来包装你的孩子的菜单,不使用jQuery为此目的很好的做法。 将此放在functions.php文件:

class Child_Wrap extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"custom-sub\"><ul class=\"sub-menu\">\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

我假设在你的头正在生成您的菜单,所以去的header.php(或任何文件被利用wp_nav_menu功能),寻找任何与“wp_nav_menu”开始。

因为我没有任何代码,看看,我只能猜测,它的使用(如果有的话)的参数。 如果它看起来酷似“wp_nav_menu()”有没有在括号之间,然后将其更改为以下内容:

wp_nav_menu(array('walker' => new Child_Wrap()))

否则,请修改与您的菜单是使用,所以我可以进一步帮助你的代码你的问题。



Answer 2:

function.php

class Child_Wrap extends Walker_Nav_Menu
{
   function start_lvl(&$output, $depth)
   {
       $indent = str_repeat("\t", $depth);
       $output .= "\n$indent<div class=\"sub-menu-wrapper\"><ul class=\"sub-menu\">\n";
   }
   function end_lvl(&$output, $depth)
   {
       $indent = str_repeat("\t", $depth);
       $output .= "$indent</ul></div>\n";
   }
} 

打电话到您的wp_nav_menu所在的功能(例如:header.php文件)。

$defaults = array( 'container' => 'ul', 'menu_class' => 'scroll', 'menu_id' => 'main-menu-nav' , 'walker' => new Child_Wrap() );

 wp_nav_menu( $defaults );

如果你想这样做,使用jQuery,你可以这样做,因为following.But最好的方法是先method.In这里有时显示为加载页面时弄乱菜单。

jQuery('ul.sub-menu').wrap('<div class="sub-menu-wrapper" />');


文章来源: How can I add a div around wordpress ul container