提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

自定义内容类型CPT UI插件安装使用教程(附视频)

文章导航

CPT UI全称Custom Post Type UI,是一款开源免费的WordPress插件,可以实现自定义内容类型,本文将介绍CPT UI插件的安装使用教程。

我通常会使用CPT UI来帮助我定义一个Product的内容类型来管理2B站点的管理,由于B2B外贸网站的产品以展示为主,CPT UI插件结合ACF可以实现对产品内容的管理,可以不再使用Woocommerce插件。由于CPT UI定义的内容类型本质上就是Post内容类型,所以它和Elementor编辑器完全兼容,也支持多语言系统。

第一步安装激活CPT UI插件

CPT UI插件是一款免费的插件,直接在网站后台在线安装即可。

CPT UI插件

高清视频请转到B站主页观看👉🏻

第二步添加Post Type(产品)

安装激活插件之后,在网站后台左侧菜单CPT UI的子菜单中点击Add/Edit Post Types创建一个新的内容类型。

image 122 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

输入Post Type Slug (全部小写,用于URL结构中),Plural Label (可以大写,单数标签,),Singular Label (可以大写,复数标签),点击【Add Post Type】添加。

你也可以先不点击添加,配置好Additional Labels和Settings再点击添加。

image 124 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

如果你点击了添加,可以进入Edit Post Types标签进行编辑。

image 125 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

选择你创建和要编辑的项目,也就是我们刚刚创建的Products

image 126 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

在Additional Labels中修改一些显示的标签,你可以根据你需要进行设置,这里我通常大部分都是默认。如果你需要重写一些显示标签的内容,可以在Additional Labels中进行设置。

比如Add New项目中你填写【添加新的】,那么在后台产品编辑中,所有的Add New标签将会显示为【添加新的】。

image 127 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP
在Setting中,我们需要设置几个项目。

首先是将Has Archive改成True,也就是启用归档。

如果这里不启用的话,你设置在设置面包屑的时候就不会显示产品分类结构。

image 128 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

其他配置,我都是默认不修改,最后滚动到底部点击【Save Post Type】保存

image 130 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

保存之后继续创建对应的产品分类,创建完成分类之后,要返回到这里的Taxonomies设置,勾选上我们创建的对应分类。

第三步添加对应的Taxonomies(产品分类)

点击Add/Edit Taxonomies创建

image 131 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

输入Taxonomy Slug (小写字母,分割用连字符)Plural Label (可以大写,单数标签),Singular Label (可以大写,复数标签)。

勾选需要关联的内容类型(Attach to Post Type),这里我们需要关联的是Products(也就是上文我们新创建的),所以勾选产品即可。

点击【Add Taxonomy】创建分类。

这里也可以先不点击添加,先配置好下面的Additional Labels和Settings再点击添加。

image 134 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

如果你点击了添加,切换到Edit taxonomies进行编辑Additional Labels和Settings的内容。

image 135 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

选择你要编辑的taxonomies

image 136 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

这里的Additional Labels设置和上文产品的一样,是用来做标签重写的,我一般不会修改,如果你需要重写,可以按照自己需求进行编辑。

image 137 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

接下来就是需要配置Settings。

如果你的产品需要设置二级分类,则需要将Hierarchical设为True

image 138 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

如果你需要对分类进行排序,就将Sort 设为True

image 139 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

其他设置默认即可,最后点击【Save taxonomy】保存产品分类内容类型。

image 140 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

然后我们返回到我们添加的Post type中去勾选对应的分类,并保存。

注意,这里如果你勾选Categories (WP Core)则代码你创建的Post type和Wordpress的Post共用一个分类,不推荐这种做法。

image 141 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

通过以上第三部添加Taxonomies的方法,你还可以添加类似标签的分类,帮助你另外一个纬度给产品做划分,但是一般情况下很少会这么多,通常做好产品分类就可以。

我在这里添加的Post Type和Taxonomies之间是有对应关系的:

Post Type我创建一个产品,Taxonomies我创建了一个产品分类;

然后在Post Type(产品)设置里面的Taxonomies勾选了我创建的Taxonomies(产品分类);

在Taxonomies(产品分类)基础设置里面的Attach to Post Type勾选了我创建的Post Type(产品)。

第四步添加和管理产品内容

CPTUI设置完成之后,我们刷新网站后台,会看到产品菜单。

image 143 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

在Product Category里面可以添加和管理产品分类

image 144 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

在All Productsl里面可以添加和管理产品

image 145 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

产品详情的编辑界面和Post的编辑是一样的,这里我在上文中也说过,通过CPT UI定义的内容本质上还是Post。

image 146 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

到这里如果你需要给产品添加一些其他字段,比如产品相册,产品摘要等等,就可以通过自定义字段ACF来实现。

CPT UI Tools(导入和导出)

最后再介绍一下CPT UI 的工具导入和导出的功能,这个功能就是方便讲一个网站中配置好的内容类型快速的导入到另外一个网站中。

首先进入到CPT UI的Tools

image 147 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

在Post Type的标签中是操作内容类型的导入与导出,右边的文本框中是本站的Post Type导出脚本,复制之后,粘贴到另外一个网站左边的空白文本框中点击【Import】即可完成导出和导入操作。

image 148 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP

同样,切换到Taxonomies标签下是做Taxonomies的导入和导出操作。

image 149 - 自定义内容类型CPT UI插件安装使用教程(附视频) - NUTSWP
文章分类
文章标签
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!