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

    这个方法很棒

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

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

问答社区 在线客服
咨询电话

iphone 咨询热线:13001069197

服务时间:上午 9:00 至晚上 21:00

联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部
您的专业上云顾问

攻略6:

若您不是新用户,强烈建议注册新账号再购买,不论什么云都很青睐新用户,价格可以低至1折,找代理还可优惠15%至25%。

立即去云小店购买
您的专业上云顾问

攻略5:

各品牌云服务器的续费成本大约是新购成本的3倍,建议一次性购买3年,可以节约续费成本70%,莫图一时爽续费喊爹娘。

立即去云小店购买
您的专业上云顾问

攻略4:

不论选择那个厂商的云,评估业务量后尽量选择高配,避免服务器不够用时的升级费用,可节约升级费用至少40%到80%。

立即去云小店购买
您的专业上云顾问

攻略3:

阿里云1年在代理商购买,多年在云小站购买;腾讯云、华为云全部在代理商处购买至少再官方折扣基础再优惠15%到25%。

立即去云小店购买
您的专业上云顾问

攻略2:

领取代金券。每次活动都有500到2000元代金券可以领取,本站轮播长期可以领取阿里云、腾讯云无门槛代金券,可供上云使用。

戳本站上方大图领取
您的专业上云顾问

攻略1:

找代理商注册账号可优惠10%至20%,好多伙伴第一次上云,没有条件找到代理商,买完后才发现多花了1000多元,后悔莫及!

代理商合作联系站长