1. 云期刊首页
  2. 建站教程

WordPress(WP)网站高级导航菜单设置方法:为导航菜单添加图标和角标

经常看到别人的WordPress网站导航菜单前面有图标,右上角有角标,高逼格的导航菜单让我十分羡慕。经过研究发现,现在的很多主题都支持了WordPress自定义菜单功能。不需要安装插件,只需要略微调整,就能实现想要的效果,今天object哥哥就来带大家一起为导航菜单添加图标和角标。本教程以WordPress中文版5.3.2–zh_CN为例。

WordPress(WP)网站高级导航菜单设置方法:为导航菜单添加图标和角标

一、导航菜单添加图标

1、进入WordPress后台,点击左侧导航菜单【外观】,再点击【菜单】,然后选择导航菜单,以【价格】菜单为例,点击向下的三角形箭头。

WordPress(WP)网站高级导航菜单设置方法:为导航菜单添加图标和角标

注意:

  • 如何添加导航菜单,相信您已经非常熟悉。这里的提示仅仅为小白用户准备:如上图中的页面,可以看到在左侧有一些项目,例如页面、分类目录、自定义链接等,只需要将左边的项目选中,然后点击添加到菜单,即可添加一个菜单链接,添加后会出现在右侧菜单结构里面,这个界面可以通过拖动改变顺序,也可以通过往右侧拖动实现二级菜单的设置,这样就可以建立好一个菜单了。
  • 如果主题不支持WordPress原生菜单设置,请移步主题设置里面进行。

2、在导航菜单设置页面,您能看到【导航标签】一栏,“价格”的前面多了一行代码 <i class=”fa fa-tags”></i> ,没错,这行代码就是价格前面的小图标。

WordPress(WP)网站高级导航菜单设置方法:为导航菜单添加图标和角标

3、如果想要添加其他图标,修改代码中的tags即可。大多数主题都使用的是Font Awesome的免费图标,我们可以在http://www.fontawesome.com.cn/faicons/  中查找符合自己需求的图标,点击进入图标详情页即可复制图标名称,然后进行替换。

WordPress(WP)网站高级导航菜单设置方法:为导航菜单添加图标和角标

二、导航菜单添加角标

1、仍然在导航菜单设置页面,以“价格”为例,点击向下的三角形箭头。可以看到【 CSS类(可选)】项下面填入了menu-jiage。这就是CSS标签的名称,可以根据自己的需要进行命名。

WordPress(WP)网站高级导航菜单设置方法:为导航菜单添加图标和角标

注意:如果这里看不到【CSS类(可选)】,童鞋请不要惊慌,点后台右上角的显示内容,在CSS类前面打上√号即可出现。

2、在主题中的CSS文件中新增角标样式,以justnews主题为例,只需要在【主题设置】→【插入代码】页面,复制下面的代码粘贴到【自定义CSS】中,点【保存】即可。代码如下:

.menu-jiage:after {
   display: block;
   font-weight: 700;
   background-repeat: no-repeat;
   background-color: red;
   border-radius: 3px;
   color: #fff;
   content:"惊爆";
   font-family: Microsoft YaHei;
   font-size: 13px;
   line-height: 1;
   padding: 2px 3px;
   position: absolute;
   right: -10px;
   top: 7px;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}
@media (max-width: 767px) {.menu-jiage:after {display: none;}}

3、大功告成,快刷新页面看看哦。

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:云期刊,转载请注明出处:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(2条)

  • Muze
    Muze 2020年3月15日 下午6:49

    这个方法很棒,但还是太过于复杂了,我写了个更加简单的方法,大家可以来试试:
    https://www.npc.ink/13031.html

    • 云大君
      云大君 回复 Muze 2020年3月15日 下午7:52

      您的做法不错,但是样式直接写到语句里面不利于SEO,也不是特别规范哦!

问答社区 在线客服
联系我们
分享本页
返回顶部