如何添加或更改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

  • 2024-12-12
  • WordPress 教学

多语言表单有助于与全球观众沟通,使您的网站更易于使用,并吸引更多用户。本文介绍了如何使用WPForms和Formidable Forms插件在WordPress中创建多语言表单,以帮助您轻松实现这一目标。

閱讀更多
  • 2024-10-21
  • WordPress 教学

如果您在WordPress管理区域或其他地方遇到‘jQuery未定义’错误,不必担心,这是一个常见的问题。本文为您介绍了该错误的原因以及六种解决方法,以便让您的网站恢复正常运行。

閱讀更多
  • 2024-10-17
  • WordPress 教学

越来越多的人倾向于使用语音搜索而不是在搜索栏中输入关键词。语音搜索被认为是在线交互的未来,各种设备上数百万人每天都在使用它。与通过普通SEO优化网站一样,将网站适配语音搜索同样重要。在本文中,我们将深入探讨为什么语音搜索SEO如此重要,以及如何优化您的WordPress网站以捕获这些语音搜索。

閱讀更多

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