如何添加或更改WordPress后台图标(两种简单方法)

08/20/2024

什么是WordPress中的后台图标?

后台图标是WordPress后台区域导航面板中看到的小图像,它们出现在每个菜单项旁边。

这些图标使用的是Dashicons,这是为WordPress制作的图标字体,于2013年首次引入,至今未变。

你可能想给你的WordPress后台做个小改造,改变这些图标。你可以更换现有图标为你更喜欢的,甚至可以用你自己的自定义图标取代它们。

如果你为不熟悉WordPress的客户制作网站,使用自定义图标可以帮助他们更轻松地导航后台。

方法1:使用插件更改WordPress后台图标

在这种方法中,我们将使用Admin Menu Editor插件。正如其名,这个插件可以让你轻松地自定义WordPress后台菜单。

首先,你需要安装并激活Admin Menu Editor插件。激活插件后,前往Settings » Menu Editor 页面,在那里你会看到一个整洁的用户界面(UI)帮助你自定义后台菜单。

在UI顶部有一个工具栏,允许你添加或删除菜单项,添加分隔符,复制和粘贴项目等。

点击任一菜单项即可展开并查看其设置。展开‘文章’菜单项,底部的‘显示高级选项’链接会让你能够添加、替换或删除菜单图标。

如今,你会见到所有可用的Dashicons。你也可以点击‘媒体库’按钮上传自己的图片图标。如果你要上传自定义图标,建议使用32×32的透明PNG图片。选择图标后,点击‘保存更改’按钮。

方法2:手动使用代码片段更改后台菜单图标

这需要你添加一些自定义代码。在使用前,请查看我们的教程:如何在WordPress中添加自定义代码。

使用WPCode来添加自定义代码是最简单最安全的方法。WPCode是一个WordPress代码片段插件,能安全地将自定义代码,CSS和HTML添加到WordPress网站中。

例如:在例子中,我们使用现有的Dashicons图标替换默认图标。为了提高性能,WordPress已加载Dashicons,因此使用它们不会影响页面加载速度。

首先找出你要自定义的菜单项的网址,例如要更改‘文章’菜单的图标,将鼠标移到‘文章’菜单上,看到在页面底部的浏览器状态栏中显示的URL。

然后,前往Dashicons网站并选择想要使用的图标,复制其名称和slug。在Code Snippets » + Add Snippet页面,将鼠标悬停在‘Add Your Custom Code (New Snippet)’框中,并点击‘+ 添加自定义片段’按钮。

在代码编辑框中输入以下代码:

function change_post_menu_icon() {
global $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == ‘edit.php’) {
$menu[$key][6] = ‘dashicons-format-aside’;
}
}
}
add_action(‘admin_menu’, ‘change_post_menu_icon’);

WordPress现在将开始使用你为‘文章’页面选择的图标。

使用Font Awesome图标在WordPress后台中为菜单项增加图标

默认的Dashicon库只有有限的图标,可以使用包含更多图标的Font Awesome字体库。不过,需要加载Font Awesome,可能会稍微减慢WordPress后台的速度(仅仅几毫秒)。

首先,找出要使用的图标并复制它的Unicode值。在Code Snippets » + Add Snippet页面,点击‘+ 添加自定义片段’按钮,并选择PHP Snippet。

输入以下代码并替换f015为复制的Unicode值:

function enqueue_font_awesome() {
wp_enqueue_style(‘font-awesome’, ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css’);
}
add_action(‘admin_enqueue_scripts’, ‘enqueue_font_awesome’);

WordPress现在将开始使用你为‘文章’页面选择的图标。

额外:为自定义文章类型添加图标

自定义文章类型允许你为WordPress网站创建独特的内容类型。这些不是默认的文章或页面,而是你网站内的完全原创内容。如果你在WordPress网站上使用自定义文章类型,你可能想更改其图标以便更易识别。



Related Posts

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>