分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 讨论 » 如何改进你的WordPress导航栏
+

如何改进你的WordPress导航栏

如何改进你的WordPress导航栏-BanYuner

很久之前我使用DUX主题的时候,我就开始想要着手准备它的导航栏了,但是说实话,那个时候能力有限,根本不知道如何开头,也不知道从哪里找教程,但是随着时间推移,现在似乎了解了一点。

今天简单的介绍一下如何修改自己的导航栏,教程部分的代码来自网络,其它的都是自己的,如果有哪里不能理解,希望大家告诉我。

首先我们必须要知道,导航栏需要用的的WordPress函数式wp_nav_menu函数,那么这个函数的具体功能以及相关含义,大家可以自己去了解一下:点击前往了解。了解了之后我们基本就可以开始下面的相关操作了。

这里以DUX为例,因为我是在目前的主题上面实现了相关功能了,所以确定这个方法是可以在DUX上面实现的,别的主题我相信一定也可以,就是需要时间去琢磨而已。

整个教程分为三个部分,一个就是修改主题自带的wp_nav_menu函数,接下来就是利用其函数中的walker属性来写我们需要的代码,最后就是修改CSS让其看起来更加美观。

修改wp_nav_menu函数

一般来说,每个主题只要用到导航栏的基本都是使用的wp_nav_menu函数,除了一些困难比较特殊的作者,喜欢使用自己的命名方式的,困难会修改这个函数,但是实现一样的功能,这个就需要大家去找了。在没有修改这个函数命名的方式下,我们可以直接在整个主题文件夹中搜索关键字:wp_nav_menu,那么找到了这个函数之后,一般的格式如下:

wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'depth' => 0,
 'walker' => new description_walker())
 );

可能上面的代码有的有,有的没有,但是不用担心也不用慌,我们只需要将

'walker' => new description_walker()

添加到其中即可,那么这里需要注意的就是,description_walker是一个class名,如果你要修改这个名,那么下面的代码中的对应也需要修改。那么如何添加呢?这里依然还是以DUX1.3版本为例,它的主题的相关代码写到了\wp-content\themes\dux\inc\fn.php中,大约351行的位置左右,那么你看到的代码应该是下面这个样子的:

function _the_menu($location = 'nav') {
	echo str_replace("</ul></div>", "", preg_replace("/<div[^>]*><ul[^>]*>/", "", wp_nav_menu(array('theme_location' => $location, 'echo' => false))));
}

那么我们需要做的事情就是在’echo’ => false后面添加如下代码:

,'walker' => new description_walker()

添加了之后就可以保存之后上传就不用去管了,可以直接开始接下来的步骤了。

编辑自定义的walker

我刚刚说过了,上面的walker说白了就是一个类,也就是一个自定义导航的样式,那么我们既然已经给了新的样式表,可是内容还得自己编辑才行,这里我就直接附上代码了:

class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

           $prepend = '<strong>'; 
           $append = '</strong>'; //目录文字加粗
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : ''; //主要代码,这里就是图像描述的内容了,使用了span标签括起来,span标签可以修改,内容发面可以自定义

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }//默认仅仅显示第一层导航使用图像描述,如果需要所有导航都是用,将感叹号去掉即可。

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;//图像描述显示在导航分类名后面,如果想要显示在前面,直接将此行代码与上面一行代码更换位置即可。
            $item_output .= '</a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

这里我个人建议,将上面的代码直接添加到\wp-content\themes\dux\inc\fn.php中wp_nav_menu下面,方面到时候修改可以记起来之前作出的改变。代码添加之后,我们需要在后台外观-设置栏目中显示图像描述这个栏目之后才能进行添加:
如何改进你的WordPress导航栏-BanYuner

勾选了图像描述之后,我们接下来就会在目录中看到了图像描述的选项了:
如何改进你的WordPress导航栏-BanYuner

直接在图像描述中插入内容,就可以在首页有显示了:
如何改进你的WordPress导航栏-BanYuner

那么整个过程就这样简单的说完了,最后就是CSS部分了,这里我就不多说了,毕竟不同主题效果不一样,CSS代码自然不一样了。整个教程讲述完毕之后,我相信很多人可能有点蒙,但是不用担心,其实整个教程仅仅就是我开始说的三个步骤,修改wp_nav_menu函数,添加walker函数,修改CSS代码,可能最耗费时间的就是修改CSS代码了,其次就是各种修改以及自适应的问题了,大家慢慢折腾吧。

最后附上原文链接,有兴趣的用户可以自行前往看看: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
如何改进你的WordPress导航栏
支付宝(点击图片切换)
扫码,支持我
如何改进你的WordPress导航栏
微信(点击图片切换)
扫码,手机看
如何改进你的WordPress导航栏
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • 七牛图片瘦身功能效果如何

    七牛图片瘦身功能效果如何

    已经较长时间没有使用七牛来存储图片了,使用了一段时间之后,发现流量确实是飙升,有点耗不起,所以直接取消了,但是今天看 ...

    点击查看
  • WPJAM Basic插件导致文章内JS地址改变问题修复

    WPJAM Basic插件导致文章内JS地址改变问题修复

    WPJAM Basic插件是我一直在使用的插件,其实这个插件就是将很多功能整合起来了,使用的原因就是因为它将其整合起来了,所以 ...

    点击查看
  • WordPress函数教程-get the time

    WordPress函数教程-get the time

    函数教程方面很少介绍了,因为我个人觉得WordPress官方的Codex已经介绍的很详细了,但是可能是英文的问题,所以很多人并不想 ...

    点击查看
  • WordPress函数介绍-時間和日期格式

    WordPress函数介绍-時間和日期格式

    下面的内容来自Codex官方,有兴趣的可以前往官方站点了解详情:

    点击查看
  • WordPress获取指定文章相关信息函数

    WordPress获取指定文章相关信息函数

    之前我写了一篇文章,是利用短代码来实现获取指定文章内容的功能,那么那个功能其实只是我即将介绍的内容中的很小一部分,介 ...

    点击查看
  • 我们自己到底需要什么样的WordPress主题

    我们自己到底需要什么样的WordPress主题

    折腾WordPress这么久了,折腾WordPress主题也这么久了,学会了很多,但是说实话,没有哪一次是认真的或者系统的学习的,但是 ...

    点击查看
  • 蔚蓝
  • 帅气小琦琦
  • boke112导航
  • 何先生
  • Win7en乐园
  • 橘子书
  • 闲鱼
  • Han
如何改进你的WordPress导航栏
5 + 6 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 6楼
    蔚蓝
    66,学习了
    蔚蓝 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省长沙市 电信 4周前 (12-22)回复
  2. 5楼
    boke112导航
    导航栏对于博客网站而言还是挺重要的,学习了
    boke112导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市 4周前 (12-21)回复
  3. 4楼
    何先生
    写的不错,不过导航加分类表述,估计没人会这么干, :cry:
    何先生 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 4周前 (12-21)回复
    • 帅气小琦琦
      @何先生 可以参考我的 直接添加图片 效果也还是不错的额 不过我的图片太丑了就是
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 4周前 (12-21)回复
  4. 3楼
    Win7en乐园
    先mark下,吃完饭继续看。我想把我的网站的导航栏改成向下拖动时自动缩短高度,一直不知道怎么搞。希望这篇文章能够帮助到我。感谢、
    Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 1个月前 (12-19)回复
  5. 2楼
    闲鱼
    这个可以有,学习了。话说你的网站现在很多图片图标,又不是一个类型的,显得不会那么好看
    闲鱼 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信 1个月前 (12-17)回复
    • 帅气小琦琦
      @闲鱼 确实是的 功能有了 但是图标不统一真心是一个烦心事
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 1个月前 (12-17)回复
      • 橘子书
        @帅气小琦琦 自己简单弄ui。不难的。看到喜欢的图形图标,把它们扣下来,简单梳理成统一的。
        橘子书 来自天朝的朋友 QQ浏览器 Windows 10 福建省漳州市 电信 1个月前 (12-18)回复
  6. 1楼
    Han
    现在这个导航栏悬停后下方大面积模糊,感觉眼睛有点晕((((◎0◎;))))。
    Han 来自天朝的朋友 谷歌浏览器 Windows 10 山东省济宁市 联通 1个月前 (12-17)回复
    • 帅气小琦琦
      @Han 哈哈哈 习惯就好了 这个功能我现在先添加上去 好玩一下看看而已
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 1个月前 (12-17)回复