WordPress中的自定义svg管理菜单图标

Question

我真的指望你帮助我.我搜索了很多,发现没有解决方案.我想在管理菜单中为我的插件设置一个自定义图标,我希望它与配色方案很好地集成.

我看着这里https://codex.wordpress.org/Function_Reference/add_menu_page 在$icon_url

(WP 3.8+)如果'data:image/svg + xml; base64 ...',指定的SVG数据图像用作CSS背景

但是,如果我在那里放置一个SVG图标的URL,我得到的只是在其src属性中使用SVG的img,因此它根本不与颜色方案集成.它应该是一个CSS背景.

另外,我不明白这data:image/svg+xml;base64...究竟是什么意思？

我尝试嵌入内联SVG,$icon_url但很明显,它不会起作用,但我只是不得不尝试一下.

Dashicons不是一个选项,没有适合我的项目的图标.

Answer 1

使用FontAwesome的Step by Step示例:

包括颜色和自定义帖子类型

1选择一个图标

• 转到:http://fontawesome.io/icons/
• 选择一个图标,我为这个例子选择了"fa-flask".

2获取SVG

• 转到:https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
• 找到图标,它将是没有fa前缀的名称- 在我的例子中,就是"flask.svg".
• 单击图标,然后单击Github中的"Raw"

将SVG带入Wordpress

• 在您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页面复制的原始字符串.
• 你需要在svg字符串中更改两个小东西:
  • 1:fill="black"向路径/ s元素添加属性 - 这允许通过Wordpress更改颜色.
  • 2 :(可选)将宽度和高度更改为20,因为这是管理员宽度/高度大小,并且似乎导致更清晰的结果.

Answer 2

我通过分析 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 转换为字体。

Answer 3

添加自定义 SVG 图标。

\n

我想在我的 WordPress 插件中使用自己的自定义 SVG 图标，所以看看这个： https: //developer.wordpress.org/reference/functions/add_menu_page/，这一切在纸上看起来都很简单。该指南告诉您如何准备$icon_url参数：

\n

\n

$icon_url（字符串）（可选）用于此菜单的图标的 URL。\n

\n

使用数据 URI 传递 Base64 编码的 SVG，该 SVG 的颜色将\n与配色方案匹配。这应该以\n\'data:image/svg+xml;base64,\'开头。

\n

\n

然而，我对此进行了一番思考，并想在使用 $icon_url 参数时添加一些注释。根据我的经验和查看论坛的经验，使用自定义图标\xe2\x80\x99并不像创建 SVG 并对其进行编码一样简单。这里\xe2\x80\x99是将自定义 SVG 图标添加到管理菜单的分步过程：

\n

\n
1. 首先，以您想要的任何方式获取或创建您的 SVG 图标。
\n
2. 接下来，清理 SVG 文件并正确格式化
\n
3. 然后对文件进行base64编码
\n
4. 在 base64 字符串前加上 \'data:image/svg+xml;base64,\' 前缀
\n

\n

...这将为您提供一个有效的 $icon_url 字符串。让我详细阐述这些步骤。

\n

步骤1

\n

据我所知，您可以按照您想要的任何方式创建 SVG 图形。我是在 Adob​​e Illustrator 中创建的，但也可以使用 Inkscape、Corel Draw 等工具，甚至可以使用硬编码（如果您对此感到满意）。

\n

第2步

\n

最痛苦的部分是清理 SVG。不过我认为这也是最重要的部分之一。经过大量的测试和实验，我发现 SVG 越干净，它就越有可能工作。许多图形程序添加了元数据和其他内容，以使 SVG 具有更广泛的兼容性。\xe2\x80\x99 在 99% 的情况下都很棒，但是当将它用于 WordPress 菜单图标时，它经常会崩溃，导致根本不显示图标。

\n

这是从 Adob​​e Illustrator 正常导出的 SVG 示例：

\n

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 \n15.7 16"><defs><style>.d{fill:#070707;}</style></defs><g id="a"/><g id="b"><g id="c"><path\n 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\n,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,\n7.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,\n3.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.\n4-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>\n</g></svg>\n

\n

凌乱，非常凌乱。即使我们添加一些换行符并缩进，\xe2\x80\x99s 仍然会发生很多事情。

\n

<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.7 16">\n    <defs>\n        <style>\n            .d{fill:#070707;}\n        </style>\n    </defs>\n    <g id="a"/>\n    <g id="b">\n        <g id="c">\n            <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"/>\n            <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"/>\n        </g>\n    </g>\n</svg>\n

\n

因此，我们要做的就是彻底清理并删除不必要的数据。您可能会发现，如果您将其添加为图像源，上面的内容将会加载，但它在 GUI 中无法正确显示\xe2\x80\x99 颜色，并且可能是错误的大小。所以\xe2\x80\x99s我们需要做一些事情：

\n

\n
1. 删除 <?xml 标签，这不会\xe2\x80\x99t帮助
\n
2. 然后，您必须将每种样式硬编码到路径中，而不是\n使用标签。对于每个路径，从标记中计算出哪些类适用于\n路径，并将这些类中的 CSS 添加到路径中。
\n
3. 一旦\xe2\x80\x99s完成，你可以完全删除defs元素。
\n
4. 您还可以删除<g>组元素并将主路径元素保留在 SVG 的根部。
\n
5. 为了确保 SVG 的颜色与 GUI 一致，您需要向每个路径添加 fill="black"。
\n
6. 然后，为了确保您的 SVG 具有正确的宽度和高度，请在开始元素中添加\nwidth="20" height="20"
\n

\n

一旦\xe2\x80\x99s完成，我上面的SVG文件现在看起来像这样：

\n

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">\n    <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">\n    </path>\n</svg>\n

\n

步骤3

\n

现在您想要对 SVG 进行 Base64 编码。我的做法是将文件传递到 PHP\xe2\x80\x99s 默认编码机制中，并将路径作为绝对路径复制到我的 PHP 中。您不希望 PHP 读取 SVG 文件，对其进行 base64 编码，然后在用户每次重新加载页面时将其传递到菜单，那样只是浪费资源和时间。使用 PHP 非常简单，如果您是 WordPress 开发人员，那么这应该不是问题。

\n

// load the SVG data by loading the file or including the XML directly.\n$svg = file_get_contents(\'/path/to/icon.svg\');\n// or\n$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>\';\n \n// then encode it and echo it out\necho  base64_encode($svg);\n// will give you a long string that looks like this:\n// PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==\n \n// thats your base64 encoded SVG file! \n

\n

步骤4

\n

在 base64 SVG 前面添加 \xe2\x80\x98data:image/svg+xml;base64,\xe2\x80\x99 ，如下所示：

\n

"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg=="\n

\n

先生，那里有一个完全有效的 $icon_url 字符串。我会将该字符串硬编码为变量，然后每次将其添加到您的插件中。

\n

add_menu_page( \'Plugin page name\', \'Plugin\', \'manage_options\', "slug", \'callback\',\'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==\', );\n

\n

我希望这对其他人有帮助，因为这会节省我今天早上的几个小时！

\n