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

zhezhongyun 2025-06-04 04:19 34 浏览

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

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

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

然后点击“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){

03 // remove the default 36x36 size

04 unset($sizes['menu-36x36']);

06 // add a new size

07 $sizes['menu-50x50'] = array(50,50);

09 // return $sizes (required)

10 return $sizes;

12 });

除了以上方法之外，我们也可以通过手动编辑CSS文件来为导航菜单添加图标。这种方法适用于知道CSS保存路径的用户。要用这种方法，首先你要将图片上传到媒体库当中，然后复制黏贴到TEXT文档中。这些准备做完后打开Appearance 目录下的 Menus选项，点击右上角Screen Options按钮。然后选中CSS Class选项。如下图所示：

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

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进行适当的调整知道你感觉满意为止。

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

CSS 导航栏

上一篇：带图标和按钮切换特效的垂直导航菜单的html页面源码
下一篇：Slideout.js – 滑出式 Web App 导航菜单

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

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）

怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」