wordpress后台有许多精致的图标,这些图标是由一个名为dashicons的图标库实现的,目前这套图标大约包含300多个icon。即便将之应用于前端,也是绰绰有余。
官方的图标总览页面
https://developer.wordpress.org/resource/dashicons/#admin-home
文件地址
通过以下路径可以访问到这个文件,下载后的大小大约为40多kb,对于不需要大量图标符号的站点来说,这个体积还是有点大了。
https://站点域名/wp-includes/css/dashicons.min.css
前台使用这套图标
在functions.php文件末尾添加如下语句:
function load_dashicons(){
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'load_dashicons');
利用wp_head()函数输出之后会在head部分发现如下语句,因为版本不同,图标库的版本号会有不同,请忽略:
<link rel='stylesheet' id='dashicons-css' href='https://站点域名/wp-includes/css/dashicons.min.css?ver=4.5.28' type='text/css' media='all' />
获取了文件的真实地址,当然也可以直接自行组装文件地址,以避免使用wp_head()。
前端图标的调用
图标的类名可以参考官方的图标总览页面,例如可以用下列语句实现一个地球图标:
<span class="dashicons dashicons-admin-site"></span>
后台管理菜单项
管理菜单项可以添加register_post_type()和add_menu_page(),这两个选项都可以设置图标。要显示当前图标,您应该传入'dashicons-admin-home'。
register_post_type示例
在register_post_type()中,在arguments数组中设置menu_icon。
<?php
/**
* Register the Product post type with a Dashicon.
*
* @see register_post_type()
*/
function wpdocs_create_post_type() {
register_post_type( 'acme_product',
array(
'labels' => array(
'name' => __( 'Products', 'textdomain' ),
'singular_name' => __( 'Product', 'textdomain' )
),
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-products',
)
);
}
add_action( 'init', 'wpdocs_create_post_type', 0 );
add_menu_page示例
函数add_menu_page()在图标URL的回调函数之后接受一个参数,它也可以接受一个dashicons类。
<?php
/**
* Register a menu page with a Dashicon.
*
* @see add_menu_page()
*/
function wpdocs_add_my_custom_menu() {
// Add an item to the menu.
add_menu_page(
__( 'My Page', 'textdomain' ),
__( 'My Title', 'textdomain' ),
'manage_options',
'my-page',
'my_admin_page_function',
'dashicons-admin-media'
);
}