我非常需要你的帮助。我搜索了很多但没有找到解决办法。我想在我的插件管理菜单中拥有一个自定义图标，并希望它能与颜色方案完美地集成。
我在这里查看了https://codex.wordpress.org/Function_Reference/add_menu_page
下面的$icon_url
(WP 3.8+) 如果是“data:image/svg+xml;base64...”，则指定的SVG数据图像将用作CSS背景
然而，如果我在那里放置一个SVG图标的URL，我得到的只是一个带有SVG的img元素，因此它根本不能与颜色方案集成。它应该是一个CSS背景。
此外，我不理解这个data:image/svg+xml;base64... 它究竟是什么意思？
我尝试将内联SVG嵌入$icon_url，但显然行不通，但我只是想试试。
Dashicons不是一个选项，那里没有适合我项目的图标。
在你注册自定义文章类型的functions.php中，添加以下代码片段：
add_action('init', 'my_init');
function my_init() {
register_post_type('labs', [
'label' => 'Labs',
// .. ect
'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
]);
}
重要提示：
base64_encode的内容是从Font Awesomes github页面复制的原始字符串。fill="black"属性添加到path/s元素中-这允许WordPress更改颜色。
viewBox必须被设置并正确设置，这意味着它必须根据路径的坐标和框大小设置，对于在此处提供的 FontAwesome SVG，只需保留该属性即可；
另外，路径的fill属性必须被设置，但请选择一些中性的起始颜色，因为重新着色发生在页面加载时（所以您可能会看到原始填充颜色一秒钟...） - jave.webfill="black"而不是fill='black'）。不确定为什么，但使用单引号时，WordPress无法替换颜色。 - JacobTheDev我通过分析Woocommerce得到了解决方案。如果add_menu_page函数没有提供URL，WordPress将使用默认的dashicon图标。因此，只需要覆盖默认样式即可。例如，将以下内容添加到管理样式表中：
#adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
font-family: your_font !important;
content: '\eiconid';
font-size: 1.3em!important;
}
我在Icomoon上将SVG转换为字体。
我想在我的WordPress插件中使用自己的自定义SVG图标，于是研究了一下这个网址：https://developer.wordpress.org/reference/functions/add_menu_page/，在纸上看起来很简单。该指南告诉你如何准备$icon_url参数：
$icon_url（字符串）（可选）要用于此菜单的图标的URL。
传递使用数据URI编码的基于base64的SVG，它将被着色以匹配颜色方案。 这应该以'data:image/svg+xml;base64,'开头。
但是，我在使用$icon_url参数时遇到了一些问题，并且想要添加一些注释。从我的经验和论坛查看来看，使用自定义图标并不像只需创建SVG并对其进行编码那样简单。以下是向管理菜单添加自定义SVG图标的逐步过程：
... 这将为您提供一个有效的$icon_url字符串。 让我详细介绍这些步骤。
您可以以任何方式创建SVG图形，据我所见。 我使用Adobe Illustrator创建了我的图标，但是任何像Inkscape、Corel draw甚至硬编码（如果您对此感到舒适）的工具也可以。
最痛苦的部分是清理SVG。 但是我认为这也是最重要的部分之一。 经过大量测试和实验，我发现SVG越干净，它就越有可能正常工作。 许多图形程序添加元数据和其他琐事，以使SVG更广泛兼容。 99%的情况下很好，但是当将其用于WordPress菜单图标时，它经常会出错，导致根本没有显示图标。
以下是从Adobe Illustrator正常导出的SVG示例：
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
15.7 16"><defs><style>.d{fill:#070707;}</style></defs><g id="a"/><g id="b"><g id="c"><path
class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5
,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,
7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/><path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,
3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.
4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/></g>
</g></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.7 16">
<defs>
<style>
.d{fill:#070707;}
</style>
</defs>
<g id="a"/>
<g id="b">
<g id="c">
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
<path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
</g>
</g>
</svg>
我们想要做的是大量清理并消除不必要的数据。如果将上面的内容作为图像源添加，可能会加载成功，但在GUI中无法正确着色，而且可能大小不对。因此，我们需要做以下几件事情：
<g>组元素，只保留SVG根部的主要路径元素。完成所有这些步骤后，上面提到的SVG文件现在看起来像这样：
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd">
</path>
</svg>
现在您希望将SVG进行Base64编码。我使用的方法是将文件传递到PHP的默认编码机制中，并将路径作为绝对路径复制到我的PHP中。您不希望PHP读取SVG文件、将其进行Base64编码并在用户重新加载页面时每次将其传递给菜单，这只是浪费资源和时间。如果您是WordPress开发人员，使用PHP很容易，并且不应该有问题。
// load the SVG data by loading the file or including the XML directly.
$svg = file_get_contents('/path/to/icon.svg');
// or
$svg = '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd"></path></svg>';
// then encode it and echo it out
echo base64_encode($svg);
// will give you a long string that looks like this:
// PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==
// thats your base64 encoded SVG file!
在base64 SVG前面添加"data:image/svg+xml;base64,"，使其看起来像这样：
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg=="
先生，那里的 $icon_url 字符串是完全有效的。我会将该字符串硬编码到一个变量中，并每次将其添加到您的插件中。
add_menu_page( 'Plugin page name', 'Plugin', 'manage_options', "slug", 'callback','data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==', );
希望这能帮助别人，因为今早这让我省了几个小时的时间！
在将icondata转换为base 64之后，正确的放置方式如下：
“,”很重要
'data:image/svg+xml;base64,'.$icon_data_in_base64
<path fill="black" d="....
你可以在其中放置任何想要的颜色，WordPress使用JS根据管理员主题自动更新填充值。
我认为应该补充以下内容:
如果想要SVG自动重新着色以匹配主题，必须设置fill属性。这是因为它将通过脚本动态更改，否则它不会知道哪个部分需要重新着色。
第三种替代CSS或SVG导入的方法是将SVG图像转换为Base64并使用$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
免责声明：我没有创造这个解决方案，但我想分享它。完全功劳应归功于编辑人员@ https://daext.com/。他们制作了一个可爱的指南，用于生成svg并将其应用于Wordpress管理菜单。来源
要将SVG转换为Base64，请访问：base64，并将转换后的值复制粘贴到$icon_base64中。
为确保一致性，如果链接损坏，下面列出了主要要点：
步骤1）创建一个名为“my_custom_plugin”的新文件夹，并将其放置在：“/ wp-content / plugins / {my_custom_plugin}”中
步骤2）在“my_custom_plugin”文件夹中创建一个".php"文件，并将其命名为例如"my-plugin.php"
步骤3）将以下代码复制并粘贴到文件中：
<?php
/*
* Plugin Name: Custom-Plugin
* Plugin URI:
* Description: Test Page.
* Version: 0.0.1
* Author:
* Author URI:
*/
add_action('admin_menu', 'function_create_menu');
// Create WordPress admin menu
function function_create_menu(){
//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMTM0IDIxMzQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij48Zz48cmVjdCB4PSIyODIuNTc2IiB5PSI4OTAuODg2IiB3aWR0aD0iNzc1Ljc1OCIgaGVpZ2h0PSI3NzguNzgxIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjEwNzMuODkiIHk9Ijg5MC44ODYiIHdpZHRoPSI3NzUuNzU4IiBoZWlnaHQ9Ijc3OC43ODEiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iNjc4LjIzMiIgeT0iMTA2LjUzNyIgd2lkdGg9Ijc3NS43NTgiIGhlaWdodD0iNzc4Ljc4MSIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTE3My43MywzMy4zNjZsLTIxNS4yOTEsLTBsLTAsMzY3LjI0MWwxMDcuMTMxLC0xMTkuMTA2bDEwOC4xNiwxMTkuMTA2bC0wLC0zNjcuMjQxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNNzgxLjg0OCw4OTQuMDc1bC0yMTUuMjkxLDBsLTAsMzUzLjc3MWwxMDcuMTMxLC0xMTQuNzM3bDEwOC4xNiwxMTQuNzM3bC0wLC0zNTMuNzcxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTU2NC45OCw4OTUuNDc0bC0yMTUuMjkxLC0wbC0wLDM1My43NzFsMTA3LjEzLC0xMTQuNzM3bDEwOC4xNjEsMTE0LjczN2wtMCwtMzUzLjc3MVoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iOTk2LjMwMiIgeT0iNTAxLjQ5NyIgd2lkdGg9IjEzOS41NjEiIGhlaWdodD0iNjQuMjMxIiBzdHlsZT0iZmlsbDojMDAxZGZmO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDoxMS42M3B4OyIvPjxyZWN0IHg9IjYwNC40MjIiIHk9IjEzNTUuODkiIHdpZHRoPSIxMzkuNTYxIiBoZWlnaHQ9IjY0LjIzMSIgc3R5bGU9ImZpbGw6IzAwMWRmZjtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6MTEuNjNweDsiLz48cmVjdCB4PSIxMzg3LjU1IiB5PSIxMzU1Ljg5IiB3aWR0aD0iMTM5LjU2MSIgaGVpZ2h0PSI2NC4yMzEiIHN0eWxlPSJmaWxsOiMwMDFkZmY7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjExLjYzcHg7Ii8+PHJlY3QgeD0iMTQxLjAzOCIgeT0iMTY3MS4yOCIgd2lkdGg9IjE4NDcuMDMiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjE0MC4wMDMiIHk9IjE5NTUuNDMiIHdpZHRoPSIxODQ5LjEiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjIxMy4yMzYiIHk9IjE4MTMuNyIgd2lkdGg9IjE0Mi40MTIiIGhlaWdodD0iMTQxLjQ3OSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cmVjdCB4PSI5OTUuOTIxIiB5PSIxODEzLjciIHdpZHRoPSIxNDIuNDEyIiBoZWlnaHQ9IjE0MS40NzkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iMTc3OC42MSIgeT0iMTgxMy43IiB3aWR0aD0iMTQyLjQxMiIgaGVpZ2h0PSIxNDEuNDc5IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjwvZz48L3N2Zz4=';
//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
$page_title = 'Hello World';
$menu_title = 'My Admin Menu';
$icon_data_uri;
$position = '20';
$capability = 'manage_options';
$menu_slug = 'newPage';
$function = 'test_page';
add_menu_page(
$page_title,
$menu_title,
$capability,
$menu_slug,
$function,
$icon_data_uri,
$position
);
}
// Create WordPress plugin page
function test_page()
{
?>
<h1>WordPress test site</h1>
<?php
}
?>
第四步) 进入WordPress的仪表盘，并"激活"插件："插件"->"已安装的插件"。查找插件名称："自定义插件"。该名称在插件文件"my-plugin.php"的顶部指定。
这应该可以让您了解如何开始使用插件。但是，请记住，有些功能应该只被启动一次，以确保良好的用户体验。插件手册
/*
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
*/
add_action( 'admin_menu', 'register_my_custom_menu_page' );
function register_my_custom_menu_page() {
add_menu_page(
'Custom Menu Page Title',
'Custom Menu Page',
'manage_options',
'custom.php',
'',
// Icon data here. in most cases, you can just use the dashicon icon name (dashicons-welcome-widgets-menus). But for any other svg icons:
'data:image/svg+xml;base64,' . base64_encode('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M12 5V2c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h2c.55 0 1-.45 1-1zm-2-3c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1zm8 13V7c0-1.1-.9-2-2-2h-3v.33C13 6.25 12.25 7 11.33 7H8.67C7.75 7 7 6.25 7 5.33V5H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-1-6v6H3V9h14zm-8 2c0-.55-.22-1-.5-1s-.5.45-.5 1s.22 1 .5 1s.5-.45.5-1zm3 0c0-.55-.22-1-.5-1s-.5.45-.5 1s.22 1 .5 1s.5-.45.5-1zm-5.96 1.21c.92.48 2.34.79 3.96.79s3.04-.31 3.96-.79c-.21 1-1.89 1.79-3.96 1.79s-3.75-.79-3.96-1.79z"/></svg>'),
90
);
}
您需要将一个Base64编码的图像（数据URI）粘贴到src中...
更多维基百科。
add_menu_page()的评论。 - undefined