当前位置:首页文章笔记建站教程给WordPress的dashicons添加自定义图标

给WordPress的dashicons添加自定义图标

Dashicon 是 WordPress 本身自带的一套图标系统,它满足了 WordPress 后台对小图标的需求,但也仅仅是满足了 WP 自身的后台使用而已。为了避免不必要的冗余,WordPress 官方也并没有打算把它打造成一套丰富的图标,而是把这个空间留给了开发者和设计师。如果你开发的插件需要在 WP 的后台新建菜单,或者你的网站有着各种自定义的 Post 类型,那么你可能就需要添加自己的图标了,毕竟,WP 自带的图标库中,去掉 WP 正在使用的那些,可选的真是不多。

生成新的 Dashicon,可以借助一个网站 – Glyphter。网站本身就提供了一些图标给你添加,这些图标都是开源的,可以免费使用,其中就包含了 Font Awesome 以及众多其他有名的图标库:
给WordPress的dashicons添加自定义图标
使用方法也很简单,打开网站,从右侧直接拖图标到左侧的格子中。你也可以点击左侧空白的红色格子,从本地电脑里选择 svg 格式的图片上传。图中前四个图标是网站提供的,后三个图标是我本地上传的:
给WordPress的dashicons添加自定义图标
点击左上角的齿轮图标,设定 Font Name 和 Class Prefix,这里的 Class Prefix 必须填写“dashicons-”,这是因为在 WordPress 后台调用图标的时候,一些后台接口参数中系统只会把“dashicons-”前缀的样式认作图标。
给WordPress的dashicons添加自定义图标
依次选定每个图标,在左侧的设置栏中填写每个图标的 Class Name,每个图标对应一个不同的 Class Name。建议要检查下 WordPress 现有的 dashicon 库,不要填写已有的名字。在这里你可能已经发现了:我上传的这个 svg 图片原本是蓝色的,这个网站会自动去掉颜色值,显示为白色。那是因为接下来要导出的图标文件是一个字体库,只需要矢量的字体轮廓信息即可,这个网站会帮你自动去除颜色信息。
给WordPress的dashicons添加自定义图标
图标准备完成后,点击上面的保存按钮,可以直接下载。当然如果你注册了账号并登录,这个网站可以保存你自定义的图标库以便多次使用修改。为了简化说明,我这里选择 Just Download。
给WordPress的dashicons添加自定义图标
下载完毕后,在自己的主题目录下新建一个“dashicons”目录,然后把下载的文件解压到这个目录下,注意 css 文件的位置后面要用到。
给WordPress的dashicons添加自定义图标
打开 css 文件,修改圈出来的几行:
给WordPress的dashicons添加自定义图标
改为:

  1. .dashicons-calculator:before,
  2. .dashicons-camara:before,
  3. .dashicons-thumb:before,
  4. .dashicons-key:before,
  5. .dashicons-cfg:before,
  6. .dashicons-ble:before,
  7. .dashicons-flight:before{
  8. display: inline-block;
  9. font-family: ‘icn jennystudio’!important;
  10. font-style: normal;
  11. font-weight: normal;
  12. line-height: 1;
  13. -webkit-font-smoothing: antialiased;
  14. -moz-osx-font-smoothing: grayscale
  15. }

这个修改的意义是限定这些自定义图标加载下载的字体文件,如果不做这个修改,系统原先的 dashicons 会显示不出来。

打开主题的 function.php 文件,添加如下代码,注意检查上传的 icn-jennystudio.css 文件路径必须正确

  1. function brain1981_add_customized_dashicons() {
  2. wp_register_style(‘my_plugin_name_dashicons’, get_template_directory_uri().‘/dashicons/css/icn-jennystudio.css’);
  3. wp_enqueue_style(‘my_plugin_name_dashicons’);
  4. }
  5. //在网站前台加载图标字体
  6. add_filter( ‘wp_head’, ‘brain1981_add_customized_dashicons’ );
  7. //在网站后台加载图标字体
  8. add_action( ‘admin_print_styles’, ‘brain1981_add_customized_dashicons’ );

自此,准备工作已经完成,下面举例如何调用这些图标。

给自定义文章类型指定图标举例:

  1. //注册自定义类型product
  2. register_post_type(‘product’, array(
  3. ‘label’ => ‘Product’,
  4. ‘public’ => true,
  5. ‘show_ui => true,
  6. ‘show_in_menu’ => true,
  7. ‘capability_type’ => ‘post’,
  8. ….
  9. ‘menu_icon’ => ‘dashicons-cfg’, //这里就是我指定的图标
  10. )
  11. );

给WordPress的dashicons添加自定义图标
自定义的管理页面,比如自己开发的插件或主题的设定页面

  1. add_action(‘admin_menu’, ‘options_admin_menu_b’);
  2. function options_admin_menu_b(){
  3. //注意最后的参数名称为自定义的图标
  4. add_menu_page(‘My Plugin Settings’, ‘My Plugin Name’, ‘administrator’, ‘my-plugin-slug’, ‘my_plugin_settings_page’, ‘dashicons-key’);
  5. }

总结:本文主要是依靠 Glyphter 这个网站生成了图标字体文件,并在 WordPress 站点追加引用这个字体,从而实现添加自定义 dashicon 的目的。Glyphter 是个很不错的辅助工具,当然如果你有其他更好用的 SVG 转字体工具,也可以作为替代,本文只是抛砖引玉,记录一下自定义 dashicon 的思路。

温馨提示:

文章标题:给WordPress的dashicons添加自定义图标

文章链接:https://www.wuyanshuo.cn/1319.html

更新时间:2022年09月13日

本站资源均为两层压缩,第一层7z(后缀若为wys,请自行修改为7z)有解压密码;第二层zip或cbz,无解压密码,可直接使用漫画类软件程序查看;详情可参考解压教程

本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@wuyanshuo.cn我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读无言说网络服务协议

给TA打赏
共{{data.count}}人
人已打赏
建站教程

如何给WordPress登录页面添加验证码等自定义表单项

2022-9-13 17:04:05

建站教程

如何自定义WordPress登录页面?

2022-9-13 23:06:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
'