wordpress建站教程：产品详情页模板制作思路分享

最近wordpress建站课程刚录完，又有个中文企业官网要做，刚刚整体框架完工了，等客户提供内容替换就 OK。这个wordpress建站项目没使用woocommerce，就用自带文章来放产品，但要给产品详情和普通的文 章详情页做个区分，所以悦然给客户做了一个图中的这种简易产品详情页模板。接一来给大家分享一下图中这种产品详情页样式的实现思路吧。

页面拆分

首先我们可以拆分页面，比如它其实可以分上下两个部分，上半部分又分成 了左右两份部分，下半部分也是左右两个部分。

页面拆分好接下来就可以开始制作，下面悦然wordpress建站会给大家分享Elementor和古腾堡现种制作思路。

Elementor制作

1. 用Elemntor的theme builder功能新建一个single post 模板。
2. 制作上半部分。添加一个容器，设置两栏结构，可以等分，容器整体设置背景图，背景图像使用动态标签功能，设置Featured lmage，样式设置覆盖。容器左边加POST标题模块+面包悄导航（这个功能由主题或seo插件提供，比如rank math seo、slim seo等），再加两个按扭。微信按扭还可以设置一个popup弹窗，让它点击弹出二维码。容器右边添加一个Featured Image模块 。
3. 制作下半部分。添加容器，同样分两栏，左边设置75%左右。左边拖入Post Content模块调用文章内容，下面还可以添加一些翻页、分享等模块，自由发挥。右边插入搜索模块、标题，POST调用最近的文章或产品。

以上制作好后直接发布模板，应用到全部文章，或者指定应用到需要的分类就可以了。之所以制作成模板，是因为模板中都是动态调用的内容，当我们设置不同的产品（文章）标题、特色图片、详情描述之后，产品的内容会自动变华，格式固定统一，使用起来更方便。

最好别用elementor直接写文章，插入的Post Content模块就是调用正常的文章内容的，以后我们可 以直接在wordpress后台用古腾堡编辑器写内容就好了。

💡注意事项

古腾堡制作

现在古腾堡编辑器的功能也越来越完善了，如果再配合扩展插件，它的功能也会非常强大，并不输给Elementor。接下来悦然wordpress建站给大家分享两种思路。

思路1：简单

这种方法就跟我们平时写文章一样，不需要制作固定的模板，也不需要插件或主题有模板定制功能。

1. 安装古腾堡增强插 件，kadence block或greenshift等都行。
2. 制作上半部分。新建文章，古腾堡编辑器中添加ROW模块，分两栏，其实和Elementor差不多。左边分别添加标题、面包屑、按扭模块。弹窗按扭可用greenshift的popup模块制作。右边插入wordpress自带的封面模块，设置特色图片。
3. 下半部分。添加一个ROW模块，要注意一下，先看你的主题有没有侧边的功能和模块，如果有，那下半部分的内容就不用手挫侧边栏了，直接写产品内容就OK了。
4. 安装一个复制插件，比如yoast post就可以，添加新产品时，在文章列表中，【产品模板】旁边点clone或快速草稿即可，接下来把修改里面的文字图片就OK了。

这各方法比较简单，看着似乎有点繁琐，但其实配合yoast post插件的快速复制功能是非常方便的，我自己也经常使用。

思路2：高级

这种方法需要使用到主题的HOOKS功能，目前的astra pro、kadence pro、blocksy pro等都支持（免费的不行）。使用主题的HOOKS功能就基本和Elementor操作一样了。

1. 新建一个Hooks模板，指定应用到需要的文章分类。
2. 制作上半部分。新建一个ROW，分两栏，左边添加标题、面包屑导航、按扭；右边添加封面模块设置为特色图片，
3. 制作下半部分。同样可以直接插入Post Content文章内容模块，这个是wordpress自带的。然后侧边栏也是持情况，主题已经有了就不用制作了，如果没有就和Elementor一样的做法，分两栏，右边作为侧边栏就OK。

这个方法也是悦然wordpress建站使用比较频繁的，比如我的另外一个网站：https://www.yrtheme.cn/ 就是这样制作的，不过会更复杂一些。

总结

以上就是今天分享的内容，基本是文字，分享的主思路，具体的操作还得大家自己尝试哦。

wordpress建站学习咨询服务