Wordpress -更改自定义菜单的基础菜单图标

WordPress是一种流行的开源内容管理系统（CMS），用于创建和管理网站。它提供了丰富的功能和插件生态系统，使用户能够轻松地创建和定制自己的网站。

更改自定义菜单的基础菜单图标是通过使用WordPress的自定义菜单功能来实现的。以下是一些步骤来更改自定义菜单的基础菜单图标：

登录WordPress后台，进入“外观”->“菜单”页面。
在菜单编辑器中，选择您想要更改图标的自定义菜单。
展开您想要更改图标的菜单项。
在菜单项编辑器中，您会看到一个名为“CSS类”的字段。在这里，您可以为菜单项添加自定义CSS类。
打开一个新的浏览器标签，搜索适合您需求的图标库。一些常用的图标库包括Font Awesome、Material Icons和Ionicons等。
在图标库中找到您喜欢的图标，并复制其CSS类名称。
返回WordPress后台，将您复制的CSS类名称粘贴到菜单项的“CSS类”字段中。
更新菜单以保存更改。

通过上述步骤，您可以更改自定义菜单的基础菜单图标。这样，您可以根据需要为不同的菜单项添加不同的图标，以增强网站的可视化效果和用户体验。

腾讯云提供了一系列与WordPress相关的产品和服务，例如云服务器、对象存储、内容分发网络（CDN）等。您可以通过以下链接了解更多关于腾讯云的WordPress相关产品和服务：

腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云对象存储：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn

请注意，以上答案仅供参考，具体的产品和服务选择应根据实际需求和情况进行评估和决策。

相关·内容

更改WordPress插件的菜单名称

如果您想在不直接编辑插件的情况下更改WordPress内部管理菜单的名称，您可以使用$menuWordPress管理员中存在的全局变量。操作此数据结构将允许您更改由任何插件添加的管理菜单的文本或名称。...这在您希望提供项目内容的清晰度或为客户端提供更好的管理UX的情况下非常有用。...'icon'] ) ) menu[k][6] = } } add_action( 'admin_init', 'kl_rename_plugin_menus' ); 添加此代码后，您将需要更改...$updates数组中的值。...关键是您当前在WordPress中看到并想要更改的现有插件菜单的名称。该值是具有两个属性的更改数组： name - 要用于插件菜单的新名称 icon - 您要使用的图标，作为可选的自定义

3.9K1 0

移除WordPress 顶部管理菜单左侧的logo 图标

在登陆状态下,WordPress 的顶部会有一条黑色的菜单,左边有一个WordPress 的logo图标，所链接的url 都是几乎用不上的。...因此，如果你想移除WordPress 顶部管理菜单左侧的logo 图标，可以参考以下代码实现：在主题的functions.php 文件下加入以下代码： function annointed_admin_bar_remove

2.1K9 0

使用 Menu Icons 插件给 WordPress 菜单参加图标

一般我们需要编辑主题的 CSS 文件才能给菜单添加图标，今天就给大家介绍一款 WordPress 插件 Menu Icons，可以让你在 WordPress 后台就能给每个菜单指定一个图标，操作非常简单...安装好 Menu Icons 之后，在 WordPress 后台，外观 > 菜单界面，我们就会看到页面的左边有一个新叫做 Menu Icons Setting 的窗体，它可以让我们选择用于菜单图标的图标集...，并且设置图标所处的默认位置：从上图，我们可以看到已有四种最常用的图标字体可供选择，图片选项让我们可以使用 WordPress 媒体库中的已有图片或者新上传一张图片。...另外插件也支持其他字体图标，插件的 FAQ 有关于如何安装 Fontello 字体图标详细的介绍。...点击上图中菜单项的“SELECT Icon”按钮，就会弹出一个选择窗，让你选择该菜单的图标：下面就是设置好图标之后的效果：下载：Menu Icons

7993 0

WordPress为导航菜单添加个性图标字体

我们还可以单独为导航菜单上的项目也配上个性化的图标字体。具体方法：一、WP后台--插件--安装插件页面搜索：Font Awesome 4 Menus，下载安装并启用。...二、WP后台---外观---菜单，进入菜单设置页面，选择并编辑一个菜单项，在CSS类中输入一个图标字体选择器名称，如图： ?...如果在编辑菜单项目面板中无CSS类，可以打开右上角的“显示选项”，在显示菜单高级属性中勾选“CSS类”。（今天才发现有这个的！！！）...图标字体选择器名称，打开此页查看：http://fontawesome.io/icons/ 点开一个认为合适的图标字体，在下会显示类似：只需在菜单...那然这个图标字体库并不只局限于使用在导航菜单上，只要把相应的图标代码加到主题模板的相应位置，也同样可以显示。

1.9K1 0

wordpress去掉自定义菜单的外层div

wordpress调用自定义菜单时自动会在外层加一个，如下图所示，nav是后台定义的菜单名称，如果想把这个div去掉要如何操作呢？...2、如果有二级菜单的话，一般默认的class是sub-menu，如果想改这个名称呢？...$classes = array( 'sub-menu' ); 　　改为自己想要的class名称就可以了，比如menu1 　　这种方法比较不好的一点是当你升级了wordpress，这两个文件会被覆盖，所以需要重新修改一下文件

5051 0

Halo-theme-joe3自定义菜单图标

进入iconfont登录并创建项目 2.将想要的图标添加入库，然后添加入项目 3....进入项目，选择“Font class”将项目生成的在线css链接复制（如下图1.1）（图1.1） 4.选择“项目设置”，记录下“Font Family Font家族”的值 5.进入网站“后台--->外观...--->主题--->自定义”，在“字体图标链接”内填入生成的在线css链接，保存（如下图1.2）（图1.2） 6.回到网站后台，进入“菜单--->要更换图标的菜单--->修改--->元数据”，在“图标...”内填入“Font Family Font家族”的值和图标在iconfont项目中的名字，例如以下格式： iconfont icon-xuexi 注：iconfont为“Font Family”，icon-xuexi

2291 0

WordPress 技巧：从自定义文章类型菜单下移除自定义分类子菜单

假设我们创建了一个 product 的自定义文章类型，然后又创建了一个 product_category 自定义分类，并且关联上了 product 这个自定义文章类型，这样在后台 product 自定义文章类型菜单下就有...product_category 的子菜单。...这个子菜单的链接是： edit-tags.php?...taxonomy=product_category&post_type=product 由于某种原因，我们要移除这个子菜单，根据 remove_submenu_page 函数的的要求，就写了下面的代码来移除...taxonomy=product_category&post_type=product' ); 但是并不生效，这是因为 WordPress 生成子菜单的时候，如果子菜单的链接有 & 的时候会被转换成 &

4532 0

使用 WordPress 的导航菜单

WordPress 原来默认的导航菜单只能是页面，或者分类，或者两者，如果想自己加入一个自定义链接都需要修改主题，非常不方便，所以一个完全可定制化的自定义的 WordPress 导航菜单成了所有人的需求...而 WordPress 3.0 的其中一个非常重要的功能是一个全新的菜单管理系统，这个系统可以让我们创建包含由日志，页面，分类，标签和其他链接组成的完全自定义菜单，并且还支持多级菜单，非常方便和强大，今天就谈谈如果使用...WordPress 3.0 这个全新的导航菜单。...添加菜单项：会提供一堆选择让你添加，比如分类，页面，标签，日志，其他日志分类，还有自定义链接等。...使用 WordPress 的导航菜单如何激活 WordPress 自带的导航菜单要使用 WordPress 导航菜单功能，首先要给当前的主题注册导航菜单，从上面我们知道，我们可以注册一个或者多个导航菜单的主题位置

1.9K1 0

WordPress自定义菜单新窗口打开链接

这里没有单独设置在新窗口打开的选项，那么我们只需要设置方法： 1、进入“网站后台――外观――菜单”页面，点击右上角的“显示选项”； 2、在“显示菜单高级属性”中勾选“链接目标”等这样就可以在自定义链接中出现多个选项...勾选完，多出下面几项这样就可以单独设置某一个菜单新窗口打开啦。...未经允许不得转载：肥猫博客 » WordPress自定义菜单新窗口打开链接

1.6K3 0

为 WordPress 后台管理菜单自定义排序

在对WordPress 进行二次开发时候，可能需要对 WordPress 后台管理菜单自定义排序，后台管理菜单默认的顺序是文章-多媒体-页面-评论-外观……；还是通过添加过滤器的方法可以进行自定义菜单管理的顺序...', //“多媒体”菜单 'plugins.php', //“插件”菜单 'themes.php', //“主题”菜单 'separator1', //分隔符...post_type=xxxx', //自定义文章类型(xxxx)的菜单 ); } add_filter('custom_menu_order', 'custom_menu_order'); add_filter...('menu_order', 'custom_menu_order'); 第 4 行的数组名称其实是顶级菜单的url 链接（即/wp-admin/后面的部分）。...根据这个就可以自定义顺序。注意到第 9 行的separator1代表分隔符，也就是“评论”下面那条颜色稍微深一些的横线。给一下添加上面代码后的效果： ? ?

1.2K9 0

WordPress 技巧：如何移除 WordPress 后台的菜单

可能因为不想给客户看到过多的菜单或者其他种种原因，你想简化 WordPress 后台菜单，其实这个非常容易： add_action( 'admin_menu', 'wpjam_remove_admin_menus...); //Tools remove_menu_page( 'options-general.php' ); //Settings } 如果仅仅想移除子菜单...，比如设置界面： remove_menu_page( 'options-general.php' ); //Settings 也可以移除插件生成的菜单，只要复制链接的最后一段即可，比如要隐藏下面自定义日志类型生成的页面

3992 0

WordPress 自定义菜单功能介绍和使用详解

如果仅仅是调用文章分类或者页面链接作为导航的话，会比较难控制，无法自由的添加链接等。当然，成熟的 WordPress 系统已经为我们考虑到了这一点，添加了一个 “自定义菜单” 功能。...在 WordPress 后台使用自定义菜单当我们在后台打开 “菜单” 的时候，通常会看到类似这样的界面：没有配置之前，是无法使用的。我们需要先输入一个菜单名称才能继续使用。...实现 WordPress 自定义菜单功能这个功能有两个函数 register_nav_menu 和 register_nav_menus 顾名思义，第一个函数用于创建一个自定义菜单，第二个函数用于创建多个自定义菜单...而这个自定义菜单位置的名称为 topnav，在 WordPress 后台中，我新建了一个名为 “顶部导航” 的菜单，然后与这个 topnav 进行了关联。...例如可以在底部加一个自定义菜单，这样在后台就可以设置底部的链接等等，功能非常强大。不过需要注意一点，WordPress 目前的较新版本 3.4.2 被爆出一个 BUG ，不支持 自定义菜单。

1K2 0

WordPress 4.3 发布：可以更方便自定义菜单

WordPress 4.3 正式版发布，这次更新带来了这几个功能：可以在自定义面板中设置菜单，文章编辑后台格式可以支持快捷方式，站点图标，更强大更安全的密码。...自定义面板中的菜单现在可以在自定义面板中创建菜单，更新菜单，以及对菜单进行排序调整，这些修改的效果都可以在自定义面板中即时预览。...网站图标网站图标是用于代表你的网站，比如用在浏览器标签的左侧，收藏夹菜单内，移动设备的主屏幕上等，现在可以在自定义面板中设置一个独一无二的站点图标，即使你更换了主题，这个图标也不会变，使用网站图标可以让更多用户记住你的品牌...更强大更安全的密码为了使得网站更加安全，WordPress 改进了密码机制，之前通过邮箱收到密码，现在将会收到密码重设链接，不再发送明文密码，并且当管理员在后台添加新用户或者编辑用户资料的时候，WordPress...更快定制博客 -- 无论你在那里，都可以通过工具条上的自定义面板链接快速去修改你的站点

3162 0

WordPress 技巧：缓存自定义菜单，加快博客速度

我前面撰写了一个新函数 wpjam_nav_menu，它是缓存版的 wp_nav_menu。...升级到 WordPress 3.9 之后，WordPress 提供了 pre_wp_nav_menu filter 接口，我们可以直接通过这个接口来缓存自定义菜单结果了，无需使用新函数了，这样方便了很多...在当前主题的 functions.php 文件中添加如下代码： //给 wp_nav_menu 加上对象缓存，加快效率 add_filter( 'pre_wp_nav_menu', 'wpjam_get_nav_menu_cache...$timestamp ); } // 更新菜单，清理缓存 add_action( 'wp_update_nav_menu', 'wpjam_delete_nav_menu_cache' ); function

1722 0

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后，大伙都不约而同的给菜单用上了图标字体，确实给博客带来了一定的美化效果。与之配套的是 font awesome 4 menus 这个图标字体插件，其实还是挺小巧的。...那如何使用到 WordPress 导航菜单呢？...很简单，依次打开 WordPress 后台==>外观==>菜单，然后点开已有菜单，将得到的 class 填入到 CSS 类即可，比如我在官方图标库查到“家”图标的 class 是 fa fa-home，...保存之后，WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。如果发现点开菜单没有 CSS 类栏位怎么办？很明显，你没把这个功能开出来。...点击菜单页面右上方的【显示选项】，勾上 CSS 类即可： ? 如果发现点击【显示选项】没动静怎么办？看来你的 WordPress 也是升级 4.2 了。

2.9K5 0

WordPress 教程：使后台菜单图标兼容 WordPress 新的扁平化后台风格

WordPress 3.8 版本带来最大的变化就是全新的扁平化后台界面，所有的菜单图标和其他地方的图标都是使用字体图标，所以支持界面放大和缩小，并且能够适应各种配色方案，但是通过插件新增的菜单图标，如果使用图片的话...使用 Dashicons Dashicons 就是 3.8 带入的 WordPress 核心中的图标字体，现在 WordPress 后台所使用的图标就是 Dashicons，这些图标是基于矢量的，可以按照任意大小去缩放都不会失真...所以如果你觉得 dashicons 某个图标适合你的插件，可以直接使用，比如我的 WPJAM WordPress 插件就是用 Dashicons 中的 cloud 图标： add_menu_page(...使用 SVG 图标如果 Dashicons 中的图标还不能满足你的需求，那么你可以使用 SVG 图片，和图标字体一样，SVG 图片也是可以任意大小缩放不失真的。...我们可以通过 Data URI scheme 方式插入，比如最新版的微信机器人图标这样设置后台菜单图标（效果如上图）： add_menu_page('微信机器人', '微信机器人', 'manage_options

2814 0

wordpress自定义菜单间添加分隔符

我们知道wordpress自定义菜单每个item是用来固定的，那如果想在加分隔符要如何操作呢？如下图所示。...我们可以用PHP的str_replace()函数来实现，随ytkah一起来看看吧 ? 　　直接上代码如果你使用的开发软件带有php提示功能，会有str_replace()函数使用方法提示，如下图 ?

5151 0

自定义菜单的实现

gradle 引入 compile 'com.github.fg2q1q3q:DropDownMenu:1.1.1' dorpmenu（修改过的部分类，增加了GirdLayout 的动态添加）...[] = {"更新时间", "最新更新", "综合排序"}; private String constellations[] = {"全部类别"}; //contentView 为下拉菜单的...索引，pos：单项菜单中点击的位置索引，clickstr：点击位置的字符串 //排序 if (index == 0) {...headers), initViewData(), contentView); /** * 设置类型和数据源： * DropDownMenu.KEY对应类型（DropDownMenu中的常量...，参考上述核心源码）此处的MyDropDownMenu是上面下载的自定义的MyDropDownMenu * DropDownMenu.VALUE对应数据源：key不是TYPE_CUSTOM则传递

4982 0

更改分享功能的默认图标为自定义的图标

2015-05-07 10:36:23 我们经常在网站上采用百度分享或者是jiathis分享功能，但是他提供了默认的图标，这些传统的图标看的久了就会感觉它不舒服，希望能够使自己网站的分享图标与众不同，...很明显，尝试通过修改css样式的方法来修改他的图标是不可能的了。...但是当你点击他的默认分享图标时你会发现地址栏里的地址非常的长，放在网址解码器里你会发现里面的是一些必要参数，也就是说我们只需要修改这些参数，然后为我们自己的图片添加click事件即可实现更改分享功能的默认图标...下面这行代码是用来定义自己的图标，通过点击图标来分享网页内容。...更改为你想分享的网页地址即可。

1.1K2 0

更改分享功能的默认图标为自定义图标（二）

在上一篇文章中，我介绍了一种分享的方式，他有一定的局限性，当你要分享的网址有参数且不止一个时，你会发现他分享出去的网址参数不全。这篇文章是对上一篇文章的一个补充，也可以说是另一种写法。...我们布好局后，点击相应图标来触发他分享功能的a标签，这样也可以实现分享功能，并且简单可靠。下面我来给大家说一下具体的方法。我们还用jiathis来做例子。首先我们需要引入他给好的代码。 <!...有的朋友会说了，这样引入之后他的图标就正常显示出来了，要怎样将他隐藏呢，其实很简单，给他设置css属性，让他非常的小，并且他的z-index属性值小于其他层的值，让他位于其它层之下，这样就达到了隐藏的效果...下面就是我们要点击的图片了给这个图片设置一个onclick事件，在js中设置一下，看一下代码。...这只是其中一个例子，大家有兴趣的可以多试试其他的，只要给相应的a标签设置id，然后设置点击事件即可。

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云