17713433920 info@mac163.com
如何在WordPress中使用Dashicons
如何在WordPress中使用Dashicons

Dashicons是WordPress中内置的一组核心字体图标,当WordPress 3.8重新设计了大型后端UI时便在WordPress 3.8中引入它们,默认情况下,这些图标用于左侧管理栏上的各种链接。这些图标是为核心构建的,它们不仅可以用于定义自定义帖子类型或创建自定义管理面板,还可以用于您自己的自定义插件和主题中,并且可以根据需要在前端主题设计中使用。最重要的是,这非常容易!

将Dashicons用于自定义帖子类型

当您在WordPress中注册新的自定义帖子类型时,只需将menu_icon参数设置为您想要使用的Dashicon的CSS类名,此图标将被定义为左侧显示的图标WordPress管理面板中自定义帖子类型名称的名称。只需访问  Dashicons登陆页面,然后单击您要使用的任何图标,您将在该图标旁边的顶部看到类名,以便您可以复制和粘贴它。

例:

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
	'public' => true,
	'menu_icon' => 'dashicons-portfolio',
	'label' => __( 'Portfolio', 'local' ),
);

屏幕截图:

以下是屏幕截图,显示了投资组合帖子类型的Dashicon图标的外观。我不知道您是否记得,但是在Dashicons之前,您必须为帖子类型图标设置自定义图像URL,并且当您在网站上使用许多插件时,通常图标不匹配并且管理员看起来很糟糕。现在,您的帖子类型图标将与默认的WP UI匹配并且看起来不错。

wordpress-dashicons-screenshot
wordpress-dashicons-screenshot

在前端主题设计上使用Dashicons

如今,许多主题都在前端使用了图标,例如发布元(日期,类别,标签,作者)以及标题图标(例如用户,搜索和商店图标)。尽管其中使用最广泛且最受欢迎的字体图标是FontAwesome,并且在大多数项目中都很好用,但它还是一个非常大的图标集,其中包括许多您可能永远不会使用的图标。您可以使用诸如Fontello之类的字体生成器网站 来创建仅包含所需图标的样式表,但是另一种替代方法是使用WordPress安装中已包含的Dashicons,您所要做的就是在前端加载脚本。

只需将以下内容添加到主题的functions.php中,即可在前端加载Dashicons(如果要自定义现有主题而不是自己创建主题,则可以通过子主题插入)。

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

现在,您可以像这样通过HTML插入图标:

<span class="dashicons dashicons-menu"></span>

只需更改要使用的图标说“菜单”的位置即可。可以将HTML粘贴到主题中要显示图标的任何位置。您甚至可以将HTML粘贴到菜单项的“标签”字段中,从而将HTML插入菜单项中。

如何创建Dashicons简码

在前端使用Dashicons的另一种解决方案是创建一个短代码,您可以在网站的任何地方使用它。如果您要为客户创建网站,并希望使他们更容易在网站上插入图标,这样他们就不必弄乱HTML,那么这是一个不错的选择。以下是该代码的外观示例,只需将代码添加到您的functions.php文件(或由functions.php加载的其他非模板文件)中

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( array(
		'icon' => 'menu',
	), $atts, 'bartag' );
	if ( ! empty( $atts[ 'icon' ] ) ) {
		return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
	}
} );

简码用法:

[dashicon icon="chart-pie"]

注意:上面的短代码假定您已经按照上一步进行操作,并在前端加载了Dashicons样式表。如果您还没有这样做,则可以简单地将右上方代码段中的“ wp_enqueue_style”功能添加到短代码中,仅在使用图标时才加载样式表。但是,建议全局加载脚本,否则dashicon样式表将加载到网站的页脚中,因此图标将在网站呈现后呈现,并会引起轻微的“闪烁”。


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部