如何给WordPress的导航菜单添加图标

最近许多用户在寻找一种给WordPress导航菜单添加图标的简单方法。这篇文章将要跟大家分享的就是,在不用编辑代码的前提下怎样为导航菜单添加图标。

以下则是实现这项功能的具体步骤。

跟实现其他许多功能一样,首先我们需要安装并启用插件。在这里,我们需要一款菜单图标插件——Menu Image。插件启用后,打开主菜单下Appearance 中的Menus选项。进入界面你会发现在右边现有菜单的结构编辑框中出现以下界面:

如何给WordPress的导航菜单添加图标

然后点击“set image”按钮,上传想要作为导航菜图标的图片。在该按钮下方有“image size”选项,这里面是该插件自动生成的三个图标尺寸,分别是:24 x 24, 36 x 36,48 x 48 PX你可以任选一个作为你图标的尺寸。除此之外,你还可以选择标题与图标的位置关系,标题可以是在图标的后面或前面,也可以隐藏标题,只显示图标。

如果你对插件生成的尺寸不满意,也可以设置自己喜欢的图标大小。方法也很简单,你只要在主题文件下的 functions.php文件中添加以下代码或者是安装并启用site-specific 插件。 01 add_filter( 'menu_image_default_sizes', function($sizes){ 02 03 // remove the default 36x36 size 04 unset($sizes['menu-36x36']); 05 06 // add a new size 07 $sizes['menu-50x50'] = array(50,50); 08 09 // return $sizes (required) 10 return $sizes; 11 12 }); 除了以上方法之外,我们也可以通过手动编辑CSS文件来为导航菜单添加图标。这种方法适用于知道CSS保存路径的用户。要用这种方法,首先你要将图片上传到媒体库当中,然后复制黏贴到TEXT文档中。这些准备做完后打开Appearance 目录下的 Menus选项,点击右上角Screen Options按钮。然后选中CSS Class选项。如下图所示:

如何给WordPress的导航菜单添加图标

然后向下滚动鼠标,选择任意一项现有的菜单,你将会发现,在菜单结构编辑框中出现了一个CSS Classes选项如下图。我们需要做的就是给菜单添加一个CSS类,代码如下。

如何给WordPress的导航菜单添加图标

1 .homepage { 2 background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png'); 3 background-repeat: no-repeat; 4 background-position: left; 5 padding-left: 5px; 6 }

然后我们需要将CSS文件添加到主题目录下,或者是主题目录下的stylesheet目录。

另外要注意的就是,这里的.homepage和URL要改成你所输入的CSS类名和之前记录在TEXT文件中的URL。由于使用不同的主题,所以可能还需要根据实际情况对CSS进行适当的调整知道你感觉满意为止。

这篇文章就介绍到这里,希望对您有所帮助,谢谢!

本文由 发布在 速卖笔记Sumink,转载此文请保持文章完整性,并请附上文章来源(速卖笔记Sumink)及本页链接。
原文链接:http://www.sum.ink/272.html

微信扫一扫,分享到朋友圈

如何给WordPress的导航菜单添加图标
0 0
我还没有学会写个人说明!

从零开始的微信小程序入门教程(一)

上一篇

万网企业邮箱与阿里云邮箱的SMTP、POP设置

下一篇

你也可能喜欢

发表评论

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

提示:点击验证后方可评论!

插入图片

分类目录

微信扫一扫

微信扫一扫