本文介绍基于WordPress通过CPT UI和ACF实现产品管理的外贸B2B建站方法，相对比通过Woocommerce插件实现产品管理速度回更快，而且基本可以满足外贸B2B建站功能需求。
本站B2B外贸建站模版部分是通过Woocommerce来实现的产品管理，部分是通过本教程的方法来实现的产品管理，通过实际的对比测试，本教程的方法在速度上比Woocommerce实现的要快很多。
说明：如果你的产品2C属性较强，我还是推荐使用Woocommerce来管理产品，如果只是纯展示的2B产品，那么我更推荐本文介绍的方法。
CPT UI和ACF实现产品管理的必备插件：
1、Elementor Pro（付费）
网站构建和页面编辑还是基于Elementor，你需要注册购买Elementor Pro。
本站提供Elementor Pro官方授权49元/年/站点，如有需要可以通过页脚二维码联系购买。
我还写了一篇Elementor教程，对Elementor使用做了详细介绍，以及如何使用Elementor Pro来构建外贸网站，如果你对Elementor还不熟悉，建议先阅读了解。
2、ACF插件（免费）
ACF是自定义字段插件，可以帮助给内容添加一些自定义的额外字段信息。
这个插件有付费版本，目前我只用到免费版本
3、ACF Photo Gallery Field插件（免费）
ACF Photo Gallery Feild插件是用来配合ACF实现相册字段的，免费版本的ACF无法使用相册字段，但是安装这个插件之后就可以使用相册字段，相册字段可以帮助我们实现产品相册的功能。
4、Custom Post Type UI插件（免费）
Custom Post Type UI就是CPT UI，叫自定义内容类型。它可以帮助你划分出一个产品的内容类型来管理产品。
其他的插件如果使用到我会再做说明。
第一步通过CPT UI插件自定义产品内容类型及分类
高清视频请转到B站主页观看👉🏻
1、添加Post Type（产品）
安装激活插件之后，在网站后台左侧菜单CPT UI的子菜单中点击Add/Edit Post Types创建一个新的内容类型。
输入Post Type Slug （全部小写，用于URL结构中），Plural Label （可以大写，复数标签，），Singular Label （可以大写，单数标签），点击【Add Post Type】添加。
你也可以先不点击添加，配置好Additional Labels和Settings再点击添加。
如果你点击了添加，可以进入Edit Post Types标签进行编辑。
选择你创建和要编辑的项目，也就是我们刚刚创建的Products
在Additional Labels中修改一些显示的标签，你可以根据你需要进行设置，这里我通常大部分都是默认。如果你需要重写一些显示标签的内容，可以在Additional Labels中进行设置。
比如Add New项目中你填写【添加新的】，那么在后台产品编辑中，所有的Add New标签将会显示为【添加新的】。
在Setting中，我们需要设置几个项目。
首先是将Has Archive改成True，也就是启用归档。
如果这里不启用的话，你设置在设置面包屑的时候就不会显示产品分类结构。
其他配置，我都是默认不修改，最后滚动到底部点击【Save Post Type】保存
保存之后继续创建对应的产品分类，创建完成分类之后，要返回到这里的Taxonomies设置，勾选上我们创建的对应分类。
2、添加对应的Taxonomies（产品分类）
点击Add/Edit Taxonomies创建
输入Taxonomy Slug （小写字母，分割用连字符）Plural Label （可以大写，复数标签），Singular Label （可以大写，单数标签）。
勾选需要关联的内容类型（Attach to Post Type），这里我们需要关联的是Products（也就是上文我们新创建的），所以勾选产品即可。
点击【Add Taxonomy】创建分类。
这里也可以先不点击添加，先配置好下面的Additional Labels和Settings再点击添加。
如果你点击了添加，切换到Edit taxonomies进行编辑Additional Labels和Settings的内容。
选择你要编辑的taxonomies
这里的Additional Labels设置和上文产品的一样，是用来做标签重写的，我一般不会修改，如果你需要重写，可以按照自己需求进行编辑。
接下来就是需要配置Settings。
如果你的产品需要设置二级分类，则需要将Hierarchical设为True
如果你需要对分类进行排序，就将Sort 设为True
其他设置默认即可，最后点击【Save taxonomy】保存产品分类内容类型。
然后我们返回到我们添加的Post type中去勾选对应的分类，并保存。
注意，这里如果你勾选Categories (WP Core)则代码你创建的Post type和Wordpress的Post共用一个分类，不推荐这种做法。
创建完成之后，我们可以网站后台侧边栏看到Products菜单，通过这个菜单我们就可以添加和管理产品内容。
参照上文中添加Taxonomies的操作方法，你还可以添加类似标签的分类，帮助你从另外一个纬度给产品做划分，但是一般情况下很少会这么多，通常做好产品分类就可以。
上文中添加的Post Type（产品）和Taxonomies（产品分类）之间是有对应关系的：
Post Type我创建一个产品，Taxonomies我创建了一个产品分类；
然后在Post Type（产品）设置里面的Taxonomies勾选了我创建的Taxonomies（产品分类）；
在Taxonomies（产品分类）基础设置里面的Attach to Post Type勾选了我创建的Post Type（产品）。
第二步通过ACF插件给产品添加相册等字段
1、创建一个新的字段组
进入自定义字段菜单，并点击【Add New】创建一个新的字段组
输入字段组名称
2、添加摘要字段
当创建一个新的字段组时，会默认添加一个字段，所以修改第一个字段即可。
添加一个所见即所得编辑器字段类型，输入字段名称，字段名会根据你输入的字段名称自动生成，其他默认即可。
所见即所得编辑器是一个富文本编辑器，在后台的编辑窗口如下所示。
3、添加相册字段
点击字段列表右下角的【Add Field】来添加一个新的字段，同时点击上一个字段下面的【Close Field】可以收起上面的字段编辑。
免费版本的ACF是不可以使用相册字段的，你需要提前安装好ACF Photo Gallery Field插件。安装并启用插件之后就可以在字段类型中选择Gallery字段了。
在字段类型中选择Photo Gallery
输入字段标签，根据标签自动生成字段名，其他参数默认即可。
4、设置字段规则
进入字段组编辑下方的Setting设置中
在Location Rules标签下设置字段内容规则，Post Type is equal to Product，表示这个字段组的字段将和内容类型为产品的内容绑定。
设置完成之后点击右上角的字段组保存按钮
当然你还可以参照上面的方法给产品添加其他的字段，以满足自己管理维护产品的需求。本文就不在扩展介绍。
第三步产品添加和编辑
添加完自定义字段之后进入到产品管理中，在产品编辑页面会出现我们添加的2个新字段。在添加产品时同时录入这两个字段内容即可。
我们来添加一个新的产品。
通过产品列表的【Add New】添加一个新的产品
填写产品名称和编辑产品内容
选择产品分类和添加产品封面图片
输入产品摘要并添加产品相册图片
发布产品
第四步使用Elementor制作产品汇总、目录及详情页面
1、制作产品汇总页面（Page制作）
使用CPT UI和ACF实现产品管理不像Woocommerce，可以设置默认的Shop页面，只需要创建一个Products的静态页面作为产品汇总页面即可。
在Products页面中布局你想要展示的内容。通常在Products页面列表的数据源都是选择全部产品。
需要说明的是，这里表我是使用Elementor 的Loop Item制作的产品列表，他可以实现自定义列表展示内容和结构。我通过Loop Item让列表中展示了产品的封面图，产品名称、产品摘要（ACF字段），以及阅读更多按钮。
在本文的Products页面中的Loop Grid元素，也就是产品列表元素的Query设置中Source设置为Products（这里的Products就是上文中自定义的内容类型）
其他的内容比如侧边栏中，搜索框，产品分类侧边菜单、询盘等内容在我的Elementor教程中都有涉及，我这里就不再赘述。
2、制作产品分类目录页面（Post Archive模版制作）
产品分类目录页我们通过Post Archive模版来制作，如果你已经制作好了Products页面，你可以将Products页面中的元素复制到要制作产品分类目录页面的Post Archive模版中去，并修改Loop Grid元素的Query数据源为Current Query即可。
当然你也可以制作一个不同于Products页面的产品分类目录页面模版，用于展示不用分类的产品列表。
参照下面的步骤操作即可。
进入网站后台Elementor模版菜单下面的Theme Buider，并切换到Archive模版类型
点击添加按钮，添加一个新的Archive模版
在自动弹出的模版库中会提供可选模版，你可以直接导入模版修改编辑，也可以关闭弹出的模版库，自己手动创建，我习惯自动手动创建，所以先点击关闭模板库
我们先修改一下模版的名称，进入模版设置中
修改Title内容，我改成了Product Category Archive，也就是产品分类归档，这样方便我管理。
修改之后返回模版编辑，点击模版中有内容的地方即可返回。
返回之后，我将之前做的Products页面的元素复制粘贴进来，如下：
需要改一下页面标题，原来Products页面的标题是静态的，我们需要改成动态的，自动展示产品分类的名称，通过元素的动态标签，选择Archive Title来获取归档的标题。
接下来还需要修改产品列列表的数据源，原本Products页面的产品列表是包含所有的产品的，但是我们在产品分类目录页面模版中，需要实现，进入不同分类下只显示当前分类下的产品列表，所以我们选中产品列表元素loop Grid，设置Query的Source为Current Query。
设置完成之后可能会发现，在编辑状态下模版显示的数据正确，比如像我下图这样，显示了一个默认文章数据。
这是没有设置预览数据导致，你只需要设置一下预览数据即可，看到一个真实的预览效果。
你可以阅读《如何在Elementor的产品模版中设置预览内容？》了解如何设置预览数据。
完成之后点击发布按钮，发布模版
弹出发布设置，需要设置一下模版的Display Condition
点击 【Add Condition】按钮，添加规则
添加的规则如下，INCLOUD Product Category All，代表包含所有的产品分类都调用这个模版展示。
然后点击【Save & Close】保存和关闭窗口
保存之后我们查看某一个产品分类的结果如下，这分类下面有3个产品，所以只展示了该分类下面的三个产品。
我在做产品列表页面的模版的过程中，还有可以使用ACF给产品分类绑定一些字段，然后通过Archive模版用动态数据调取以展示。
比如，我们可以增加一个产品分类的描述信息字段，或者直接用产品分类的描述，在Archive模版中你想要展示产品分类描述的地方，用一个文本元素通过动态标签来展示出产品分类的描述。
下图中我就在面包屑的下方添加了一段产品分类的简单描述。
3、制作产品详情页面（Single Post模版制作）
产品详情页我们通过Single Post模版来制作，我之前就说过，使用CPT UI创建的产品内容类型本质上还是Post内容，只是做内容的隔离，你可以在一个单独的产品菜单中管理你的产品内容。
所以在制作产品详情页模版时，我们同样是选择Single Post模板类型即可，只是在最后的Display Condition设置模版包含的内容为我们创建的产品内容即可，详细的步骤我在下方会有讲解。
首先，进入Elementor 模版菜单下的Theme Builder，切换到Single Post，点击【Add New】创建一个新的Single Post模版。
弹出的模板库直接关闭（如果你有需要可以导入模版进行修改编辑），我通常都是关闭自己创建。
进入模版设置，修改模版名称（这里可以参照上文Archive模版修改名称的操作，我不在详细说明）
接下来就是根据自己的需求编辑模版的内容布局及风格。
首选在模版上面放一个标题模块，里面放了一个大标题，和一个面包屑
注意这里标题我没有用产品名称，而是直接输入的Products，所以我没有设为H1标签，我是将下面的产品名称设为了H1标签，这么做的目的是优化页面的H标签，我希望H1标签中能够包含产品词。
这里的面包屑我是用RankMath SEO提供的面包屑功能。
模版往下，我划分一个模块，并将模块分为左右部分，左边为产品相册图片，右边为产品名称，摘要、分类信息以及询盘按钮。
产品相册是使用Gallery元素的动态标签获取的ACF字段的内容。
Elementor 或者UAE提供的Gallery元素不支持Thumb，也就是下面没有缩略图，如果你不介意这个功能或者不希望再安装额外的插件，可以使用Gallery的轮播展示产品的相册
我自己购买了UE插件，使用了里面的Thumbnail Gallery来实现了产品相册，显示效果如下：
上图中的相册效果，我还加了一些CSS代码，代码如下：
如果你也是和我使用的相同元素，可以直接复制代码到该元素的Advance下的Custom CSS中
.ug-gallery-wrapper .ug-strip-panel{
background-color: #ffffff !important;
padding-left: 0px !important;
}
.ug-gallery-wrapper .ug-slider-wrapper{
border: solid 1px #dde1e5;
border-radius: 10px;
}
.ug-thumbs-strip{
left: 0px !important;
}右侧的产品名称，使用Post Title元素即可。
产品分类，你可以使用Post info去展示
Post Info的Type里面有个Terms转门用来获取分类目录的
接下来就是询盘按钮，添加按钮后设置按钮连接为Popup（也就是弹出框），然后选择对应Popup模版即可。当然你也可以设置跳转到一个联系页面，或者在页面下方放一个表单，通过锚点链接定位到询盘表单。
如何制作询盘及弹出框，操作方法参照我Elementor 系列教程里面的关于表单和弹出框制作部分。
再往下我放一个产品描述模块，标题我设置为H2，描述正文使用的Post Content元素，在编辑产品描述的时候，由于我模版中产品秒部分已经设置一个H2标题，那么我在编辑产品描述内容的时候如果需要H标签，我应该是从H3开始，才算合理。
产品描述使用的是Post Content元素
继续向下我还做一个相关产品模块，这个标快的标题也是H2标签，所以下面产品列表的产品标题应该设为H3标签或者div、Span标签。
相关产品的列表我使用的Posts元素制作，Query数据源选择为Related，并且限制在产品分类中，以确保每个产品下面推荐的产品和是和当前产品同属的一个分类的，另外Order by我会设为随机，这样用户每次刷新进来看到相关产品不一样。
最后就是细节和风格样式的调整，这里我不再细讲。
制作完成之后点击做下角的发布按钮，发布模板，并且在发布设置中的Display Condition设置为Include Products All，代表模板覆盖到所有的单个产品。
总结
通过CPT UI和ACF实现产品管理的外贸B2B网站，和Woocommerce实现的外贸B2B网站相比，在速度上有一定的提升，CPT UI和ACF实现的产品管理没有多余的用不上的功能，以纯展示为主，相对适合B2B网站。
在操作层面上，CPT UI插件自定义内容类型和ACF插件创建自定义字段并绑定到对应的内容，对于新手来说可能有些不好理解。（需要多花一点时间理解中间的逻辑关系，一旦理解，其实过程也会变得非常简单）。
