小工具      在线工具  汉语词典  dos游戏  css  js  c++  java

如何在WordPress中为自定义帖子类型添加图标

java,python,wordpress,php,css 额外说明

收录于:23天前

Ever wondered how you could add custom icons for your 自定义帖子类型 in WordPress? If so, then you’re in the right place. In this article, we will show you how to add icons for custom post types in WordPress.

是否曾经想过如何在WordPress中为自定义帖子类型添加自定义图标? 如果是这样,那么您来对地方了。 在本文中,我们将向您展示如何在WordPress中为自定义帖子类型添加图标。

WordPress started using an icon font called Dashicons since WordPress 3.8. These font icons look great on any device or screen size. Well, you can leverage these icons to assign custom icons to your post types.

WordPress 3.8起,WordPress就开始使用名为Dashicons的图标字体。 这些字体图标在任何设备或屏幕尺寸上都很好看。 好了,您可以利用这些图标为您的帖子类型分配自定义图标。

影片教学 Video Tutorial

演示地址

如果您不喜欢该视频或需要更多说明,请继续阅读。

如果您不喜欢该视频或需要更多说明,请继续阅读。

使用插件添加自定义帖子类型图标 Adding Custom Post Type Icons using a Plugin

First thing you need to do is install and activate the CPT 自定义图标 plugin. Upon activation, simply go to 设置 » CPT 自定义图标设置 where you will see your custom post types listed. Next, click on the ‘Choose icon’ button next to a custom post type and then select a font from the menu.

您需要做的第一件事是安装并激活CPT 自定义图标插件。 激活后,只需转到设置»CPT 自定义图标设置 ,您将在其中看到自定义帖子类型。 接下来,点击自定义帖子类型旁边的“选择图标”按钮,然后从菜单中选择一种字体。

Choosing a font for your custom post type using a plugin
使用自定义帖子类型UI插件添加图标 Adding Icons using Custom Post Type UI Plugin

If you’re new to registering a custom post type, then we recommend that you use 自定义帖子类型 UI plugin to 创建和管理自定义帖子类型 and 分类法.

如果您不熟悉注册自定义帖子类型,那么我们建议您使用“ 自定义帖子类型”UI插件来创建和管理自定义帖子类型分类

Adding an icon to a custom post type created with CPT UI plugin is very simple. It supports Dashicons by default, so first you need to visit the 大石图标网站 and select the icon you want to use for your post type.

将图标添加到使用CPT UI插件创建的自定义帖子类型非常简单。 默认情况下,它支持Dashicons,因此首先您需要访问大石图标网站并选择要用于帖子类型的图标。

Copying an icon class from Dashicons website

Clicking on an icon in the list will show a larger version of the icon on the top. Next to it, you will see the icon’s CSS class. It will be something like dashicons-groups, dashicons-calendar, dashicons-cart, etc. You need to copy the CSS class and edit the custom post type you want to edit in CPT UI. All you need to do is click on the 高级选项 link and scroll down to the Menu Icon section, then paste the CSS class and save your changes.

单击列表中的图标将在顶部显示该图标的较大版本。 在它旁边,您将看到该图标CSS类。 它将类似于dashicons-groups,dashicons-calendar,dashicons-cart等。您需要复制CSS类并编辑要在CPT UI中编辑的自定义帖子类型。 您需要做的就是单击“ 高级选项”链接并向下滚动到“菜单图标”部分,然后粘贴CSS类并保存您的更改。

Adding font icon in custom post type UI plugin

You can also create an image icon yourself and upload it by clicking 媒体 » 添加新内容. After the upload, click on the Edit link and copy the image file URL. Now simply paste this URL in the menu icon field in CPT UI settings.

您也可以自己创建图像图标并通过单击媒体 » 添加新内容图标将其上传。 上传后,单击“编辑”链接并复制图像文件URL。 现在,只需将此URL粘贴到CPT UI设置的菜单图标字段中即可。

手动将图标添加到自定义帖子类型 Manually Adding Icon to a Custom Post Type

如果您通过将代码放置在站点特定的插件或functions.php 文件中来创建自定义帖子类型,那么您可以手动添加菜单图标。再次访问 Dashicons 网站选择一个图标并复制 CSS 类即可。之后将其添加到您的自定义帖子类型代码中,如下所示:

如果您通过将代码放置在特定于站点的插件或functions.php 文件中来创建自定义帖子类型,则可以手动添加菜单图标。再次访问 Dashicons 网站选择一个图标并复制 CSS 类即可。之后,将其添加到您的自定义帖子类型代码中,如下所示:


'menu_icon'           => 'dashicons-cart',

您还可以添加要显示为图标的图像文件的完整 URL,如下所示:

您还可以添加要显示为图标的图像文件的完整 URL,如下所示:


'menu_icon'           => 'http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png',

下面是一个完整的代码片段,它创建一个名为 products 的自定义帖子类型,并带有菜单图标:

以下是创建带有名为“产品”的菜单图标的自定义帖子类型的完整代码片段:


// Register Custom Post Type
function custom_post_type() {

	$labels = array(
		'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
		'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'           => __( 'Products', 'text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
		'all_items'           => __( 'All Items', 'text_domain' ),
		'view_item'           => __( 'View Item', 'text_domain' ),
		'add_new_item'        => __( 'Add New Item', 'text_domain' ),
		'add_new'             => __( 'Add New', 'text_domain' ),
		'edit_item'           => __( 'Edit Item', 'text_domain' ),
		'update_item'         => __( 'Update Item', 'text_domain' ),
		'search_items'        => __( 'Search Item', 'text_domain' ),
		'not_found'           => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
	);
	$args = array(
		'label'               => __( 'Products', 'text_domain' ),
		'description'         => __( 'Post Type Description', 'text_domain' ),
		'labels'              => $labels,
		'supports'            => array( ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'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-cart',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	register_post_type( 'Products', $args );

}

// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

We hope this article helped you add icons for your custom post types in WordPress. You may also want to check out how to 在 WordPress 帖子编辑器中使用图标字体.

我们希望本文能帮助您在WordPress中为自定义帖子类型添加图标。 您可能还想了解如何在 WordPress 帖子编辑器中使用图标字体

If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and 谷歌+.

如果您喜欢这篇文章,请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特谷歌+上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-icons-for-custom-post-types-in-wordpress/

. . .

相关推荐

额外说明

mui框架之经纬度信息获取回调

plus.geolocation.getCurrentPosition(function(p) { console.log('Geolocation\nLatitude:' + p.coords.latitude + '\nLon

额外说明

>> 和 >>>> 之间的区别

1、>>:右移运算符,num >> 1,相当于num除以2。 按二进制形式把所有的数字向右移动对应位数,低位移出并舍弃,高位的空位补符号位,即正数补零,负数补1,符号位不变。 如:-1在32位二进制中表示为:11111111 11111111 11111

额外说明

深度学习应用篇-元学习[16]:基于模型的元学习-Learning to Learn优化策略、Meta-Learner LSTM

【深度学习入门到进阶】必看系列,含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍:【深度学习入门到进阶】必看系列,含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、

额外说明

Shiro学习之SpringBoot整合(2)

登录认证整合 1.0 登录认证整合之实现前端页面 1.1 Shiro整合Thymeleaf 1.1.1 pom新增 1.1.2 创建登录页面(复制即可) 1.1.3 创建登录成功跳转页面(复制即可) 1.1.4 修改控制台 1.1.5 需要确认的配置文件

额外说明

flex 自定义事件

EventTest.mxml   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="abso

额外说明

微服务应用程序总结

1  代码库--所有的应用程序代码和服务器供应信息都应该处于版本控制中。每个微服务都应该在源代码控制系统中有自己独立的代码存储库。 2  依赖---通过构建工具,如Marven(java) ,明确的生命应用程序使用的依赖项。应该使用期特定版本号声明第三方

额外说明

多语言打印字符实心钻石

文章目录 一、提出任务 二、用Scala语言实现 (一)采用双重循环 (二)不用循环用算子 三、用Python语言实现 四、用Java语言实现 五、用C语言实现 一、提出任务 当row = 15时,打印15行实心钻石 二、用Scala语言实现 (一)采用

额外说明

Java字节流和字符流详解

文章目录 IO概述 什么是IO IO的分类 IO的流向说明图解 顶级父类们 字节流 一切皆为字节 字节输出流【OutputStream】 FileOutputStream类 构造方法 写出字节数据 数据追加续写 写出换行 字节输入流【InputStrea

额外说明

CSDN如何快速转载他人优质文章(超级详细)

如何快速转载CSDN文章 在看到一篇很优质的文章之后,十分想转载。但却不知道怎么转载,不急!下面很快将会学会! 参考博文: http://blog.csdn.net/bolu1234/article/details/51867099 一、在你喜欢的博文页

额外说明

Windows系统丢失spp.dll文件导致程序异常问题

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个spp.dll文件(挑选合适

ads via 小工具