首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从wp_nav_menu输出中删除<div>包装器

从问答内容来看,这个问题是关于WordPress的主题开发。wp_nav_menu是一个WordPress函数,用于输出导航菜单。但是,有时我们需要删除<div>包装器,以便更好地控制HTML结构。

以下是一种方法,使用JavaScript来删除<div>包装器:

  1. 首先,在WordPress主题的functions.php文件中,添加以下代码以注册一个新的JavaScript文件:
代码语言:php
复制
function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
  1. 然后,在主题的js文件夹中创建一个名为custom.js的新文件,并添加以下代码:
代码语言:javascript
复制
(function($) {
    $(document).ready(function() {
        $('.main-navigation .menu-item').unwrap();
    });
})(jQuery);

这段代码将在页面加载完成后执行,删除.main-navigation .menu-item选择器匹配的所有元素的父<div>元素。

请注意,这个答案并没有涉及到云计算相关的内容,因为这个问题更多的是关于WordPress主题开发。但是,如果您有其他与云计算相关的问题,我会很乐意为您提供帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 图片布局的最全实现方式都在这了!附源码

    ;   &lt;/div>; &lt;/template> &lt;style lang="scss" scoped> .box {   width: 150px;   height: ...第二行开始,每张图片都放到最短的一列下面。然后增加此列高度,此时列的高度发生变化,下张图片又会寻找其他最短的列。以此持续计算下去。...="" />     &lt;/div>;   &lt;/div>; &lt;/template> &lt;style lang="scss" scoped> .waterfall-width-column...&lt;img :src="img.url" />     &lt;/div>;   &lt;/div>; &lt;/template> &lt;script> &lt;style...当然,案例其实还有很多细节没有处理,比如浏览窗口发上变化时重新加载图片会发生闪动该如何优化体验?小伙伴们不妨自己去尝试进行优化。动手实践是掌握技能的重要手段。

    1.4K30

    wordpress导航菜单详解及改造

    / 下面是一些实例 如果只用最简单的代码 输出的结构是这样的 (方便起见,不写类名) 如果我们要更改输出的结构 像外层div 只需 'container' => false 即可 如果要去除外层ul 那么可以这样写...if(function_exists('wp_nav_menu')) { wp_nav_menu(array('container'=> false,'items_wrap'=>'%3$s','theme_location...'=>'main-menu')); } 那么输出的结构就只是 当然,实际上输出的菜单 会带有很多css选择id或class 但这也可以改 //移除菜单的多余CSS选择 add_filter('nav_menu_css_class...array() : ''; } 将以上代码放入function.php文件 就能移除所有的css选择id或class 但并不是都移除就是最好的 有些css选择对我们是很有帮助的 这里先给出默认菜单输出的结构...可以看到,生成的class名太多了 但图中红线划的地方 在某些情况下对我们是很有帮助的 例如通过点击导航栏某个栏目 跳转到这个栏目的页面时 导航栏此栏目位置高亮 观察导航栏结构 我们会发现 该栏目会有一个类名

    3.1K70
    领券