如何在WordPress中为自定义文章类型添加图标
当您登录到您的WordPress网站时,您会在侧边栏中看到文章、页面和所有自定义文章类型的条目。默认情况下,自定义文章类型会使用与文章相同的图标,这可能使得快速查找变得困难。
在本文中,我们将向您展示如何在WordPress中为自定义文章类型添加不同的图标。
为什么要在WordPress中为自定义文章类型添加图标?
大多数时候,当使用您的WordPress网站时,您会使用文章或页面。然而,您还可以使用自定义文章类型来创建其他类型的内容。例如,WooCommerce使用名为‘产品’的自定义文章类型来库存您的商店。
自定义文章类型会在WordPress管理区域的左侧菜单中与文章和页面一起列出。每个菜单项旁边都有一个图标,这些图标来自名为Dashicons的图标字体。
问题在于,所有自定义文章类型将使用与文章相同的图标。因此,如果您有多个自定义文章类型,那么如果它们都有不同的图标,您将更容易找到正确的那个。
如何在WordPress中添加自定义文章类型图标
有两种方法可以在WordPress中添加自定义文章类型图标:
通过插件添加自定义文章类型图标
如果您是注册自定义文章类型的新手或不熟悉代码,那么我们建议您使用Custom Post Type UI插件来创建文章类型和分类法。
使用插件创建自定义文章类型
首先,您需要创建一个自定义文章类型。如果您已经完成此操作,则可以跳过到‘通过插件为自定义文章类型添加图标’部分。
安装并激活插件后,您需要前往CPT UI » 添加/编辑文章类型以创建新的自定义文章类型。确保您在‘添加新文章类型’选项卡上。
您需要为您的自定义文章类型提供一个别名,例如‘movies’。 在此之下,您输入复数和单数名称,例如‘books’和‘book’。
然后,点击‘基于选择的标签填充其他标签’链接。这将自动填写下面的其他标签字段,通常会为您节省时间。或者,您可以在‘其他标签’部分中手动添加标签。
接下来,您可以向下滚动到设置部分并设置文章类型的不同属性。每个选项都有简要说明解释它的作用。
例如,您可以选择如何对文章类型进行排序以及是否使其分层。
最后,点击‘添加文章类型’按钮以保存并创建您的自定义文章类型。
通过插件为自定义文章类型添加图标
创建自定义文章类型后,您可以选择图标。这非常简单,因为Custom Post Type UI插件默认支持Dashicons。
首先,前往CPT UI » 添加/编辑文章类型,并点击页面顶部的‘编辑文章类型’选项卡。确保从下拉菜单中选择了正确的文章类型。
完成后,向下滚动到相同页面底部附近的设置,并找到‘菜单图标’部分。您现在应该会看到两个添加图标的选项。’选择dashicon按钮’让您选择任何Dashicon,而’选择图像图标’允许您上传或从媒体库中选择图像图标。
在本教程中,我们将点击’选择dashicon按钮’。您可以使用弹出窗口顶部的箭头浏览数百个图标。
您还可以搜索Dashicon。在本教程中,我们将搜索‘book’。显示四个匹配的图标,两个‘Facebook’图标和两个‘book’图标。只需点击您希望使用的图标。
选定图标的CSS类将自动输入到‘菜单图标’字段中。确保向下滚动并点击‘保存文章类型’按钮以保存您的设置。
现在,返回您的管理仪表盘,并在左侧边栏中找到自定义文章类型。您应该会在文章类型旁边看到新的图标。
手动添加自定义文章类型图标
如果您使用代码手动创建了自定义文章类型,那么您也必须手动添加图标。
首先,您需要访问Dashicons网站,以便找到您想要用于文章类型的图标。在本教程中,我们将滚动到“Miscellaneous”部分并点击‘book’图标。
您将被带到一个页面,其中包含有关图标的更多信息,例如类别名称和图标的CSS类。例如,在以下截图中,类别是‘Miscellaneous’,CSS类是‘dashicons-book’。
您需要将CSS类复制到剪贴板。现在,您需要将一些代码添加到您创建自定义文章类型的相同位置。可能是您的主题的functions.php文件,或者您可能使用了代码片段插件,例如WPCode。要看这个的实际效果,下面的代码片段创建了一个名为‘Books’的自定义文章类型,并通过在第45行添加Dashicons CSS类来添加菜单图标。
/* 创建我们的CPT的函数 */
function custom_post_type() { // 为自定义文章类型设置 UI 标签 $labels = array( ‘name’ => _x( ‘Books’, ‘文章类型通用名称’, ‘twentytwentyone’ ), ‘singular_name’ => _x( ‘书籍’, ‘文章类型单一名称’, ‘twentytwentyone’ ), ‘menu_name’ => __( ‘图书’, ‘twentytwentyone’ ), ‘parent_item_colon’ => __( ‘父项图书’, ‘twentytwentyone’ ), ‘all_items’ => __( ‘所有图书’, ‘twentytwentyone’ ), ‘view_item’ => __( ‘查看图书’, ‘twentytwentyone’ ), ‘add_new_item’ => __( ‘添加新图书’, ‘twentytwentyone’ ), ‘add_new’ => __( ‘添加新’, ‘twentytwentyone’ ), ‘edit_item’ => __( ‘编辑图书’, ‘twentytwentyone’ ), ‘update_item’ => __( ‘更新图书’, ‘twentytwentyone’ ), ‘search_items’ => __( ‘搜索图书’, ‘twentytwentyone’ ), ‘not_found’ => __( ‘未找到’, ‘twentytwentyone’ ), ‘not_found_in_trash’ => __( ‘垃圾桶中未找到’, ‘twentytwentyone’ ), ); // 为自定义文章类型设置其他选项 $args = array( ‘label’ => __( ‘图书’, ‘twentytwentyone’ ), ‘description’ => __( ‘图书评论’, ‘twentytwentyone’ ), ‘labels’ => $labels, 支持的编辑器特性 ‘supports’ => array( ‘title’, ‘editor’, ‘excerpt’, ‘author’, ‘thumbnail’, ‘comments’, ‘revisions’, ‘custom-fields’, ), 可以与分类或自定义分类关联 ‘taxonomies’ => array( ‘类别’ ), 分层 CPT 类似页面,可有父子项。非层级化CPT类似文章。 ‘hierarchical’ => false, ‘public’ => true, ‘show_ui’ => true, ‘show_in_menu’ => true, ‘show_in_nav_menus’ => true, ‘show_in_admin_bar’ => true, ‘menu_position’ => 5, ‘menu_icon’ => ‘dashicons-book’, ‘can_export’ => true, ‘has_archive’ => true, ‘exclude_from_search’ => false, ‘publicly_queryable’ => true, ‘capability_type’ => ‘post’, ‘show_in_rest’ => true, ); // 注册自定义文章类型 register_post_type( ‘图书’, $args ); } /* 钩到‘init’动作中,以便包含文章类型注册的函数不会被不必要地执行。 */ add_action( ‘init’, ‘custom_post_type’, 0 );
要在注册自定义文章类型时自定义图标,只需将以下代码片段之一添加到第45行。
‘menu_icon’ => ‘dashicons-book’,
或者,您可以将图像图标添加到媒体库,并使用图标的URL替代CSS类:
‘menu_icon’ => ‘http://www.example.com/wp-content/uploads/2022/08/your-cpt-icon.png’,
这些代码片段中的额外空格是故意的,当您将其粘贴到上面的代码块中时,它们将确保代码整齐对齐。请记住,在使用此代码时,您需要替换为您自己的Dashicon CSS类或图像图标URL。
我们希望本教程帮助您了解如何在WordPress中为自定义文章类型添加图标。您可能还想了解如何保持网站安全,或查看我们列出的常见WordPress错误及其修复方法。
如果您喜欢这篇文章,请订阅我们的YouTube频道以观看更多WordPress视频教程。您还可以在Twitter和Facebook上找到我们。