如何在 wordpress ul 容器周围添加 div [英] How can I add a div around wordpress ul container

问题描述

Wordpress 在这个 ul 标签中输出我的子菜单...

我怎样才能在它周围包裹一个简单的 div?

最好是通过functions.php来实现，但jquery也可以.

解决方案

虽然使用 jQuery 之类的东西来包装子菜单很容易，但为此目的使用 jQuery 并不是一个好习惯.把它放在functions.php中:

class Child_Wrap 扩展了 Walker_Nav_Menu{函数 start_lvl(&$output, $depth = 0, $args = array()){$indent = str_repeat("	", $depth);$output .= "
$indent

";}函数 end_lvl(&$output, $depth = 0, $args = array()){$indent = str_repeat("	", $depth);$output .= "$indent</ul></div>
";}}

我假设您的菜单是在您的标题中生成的，因此请转到 header.php(或任何使用 wp_nav_menu 函数的文件)并查找以wp_nav_menu"开头的任何内容.

由于我没有任何代码可看，我只能猜测它使用的参数(如果有的话).如果它看起来完全像 "wp_nav_menu()" 括号之间没有任何内容，则将其更改为以下内容:

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

否则，请使用您的菜单使用的代码编辑您的问题，以便我进一步帮助您.

Wordpress outputs my child menus inside this ul tag...

<ul class="sub-menu">

how can I wrap a simple div around it?

Preferably a way to do it through functions.php, but jquery can work too.

解决方案

While it would be EASY to use something like jQuery to wrap your child menus, it is NOT good practice to use jQuery for this purpose. Place this in functions.php:

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

I'm assuming that your menu is being generated in your header, so go to header.php (or whatever file is utilizing the wp_nav_menu function) and look for anything that starts with "wp_nav_menu".

Since I don't have any code to see, I can only guess the arguments that it's using (if any). If it looks EXACTLY like "wp_nav_menu()" with nothing in between the parenthesis, then change it to the following:

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

Otherwise, please edit your question with the code that your menu is using so I can help you further.

这篇关于如何在 wordpress ul 容器周围添加 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！