文章post是WordPress网站中使用最多的内容类型,并且内置在WordPress程序中,在使用WordPress做网站的时候,偶尔需要对文章详情页post-single做自定义设计和开发。

一般的WordPress主题开发者都是通过撰写php文件来实现自定义文章post详情页的功能。

但是如果您使用的是divi正版主题,就可以在不写代码的情况下,自定义修改文章详情页的设计样式和内容布局。

有朋友会会问“为何要修改文章详情页的内容布局呢?”

通常来说,

一般的网站是不用修改WordPress的文章详情页内容布局的。

但是有些内容比较多,规模比较大的网站,往往就会有这种WordPress定制开发的需求。

举个例子,有一个网站,在文章Post中有3个分类:公司新闻、产品信息、行业动态。

然后客户的需求是:

  • 公司新闻用右边栏,带特色图片
  • 产品信息用左边栏,不带特色图片
  • 行业动态不用边栏,带特色图片

这种基于文章分类的不同,选择不同的【文章详情页】的样式。

这种定制化需求,使用divi主题的主题生成器,能够很方便地做到。

在这篇文章中,WP花园将会教大家如何设计文章的详情页。

在使用Divi主题模块之前,你需要购买正版的Divi主题,这里是我们WP花园的Divi主题70%折扣购买通道。

真实案例分析

WordPress建站的网站中,客户需要调整页面中的文章展示效果,在某些文章类型中,取消右侧栏。

那么我们使用DIVI主题中,便可以快速的设置文章展示效果。

文章详情页设置步骤(不带侧边栏)

首先我们需要在DIVI主题的仪表盘中选择【DIVI/主题生成器】

如何使用Divi主题自定义编辑WordPress文章post详情页?

进入页面编辑,点击添加新模板。

如何使用Divi主题自定义编辑WordPress文章post详情页?

在模块【设置中/使用于】勾选你所需要设置的文章类型

(如果不设置这里的内容,那么您建立的模板会套用到所有的WordPress页面中),

点击建立范本。

如何使用Divi主题自定义编辑WordPress文章post详情页?

创建好了编辑页面,

在对应的模块编辑中点击“添加自定义主体”选择建立自定义主体。 如何使用Divi主题自定义编辑WordPress文章post详情页?

如何使用Divi主题自定义编辑WordPress文章post详情页?

进入页面设置后选择“从头开始构建”

如何使用Divi主题自定义编辑WordPress文章post详情页?

插入行。

注意这个行不带侧边栏样式。

如何使用Divi主题自定义编辑WordPress文章post详情页?

添加文章字段相关的divi模块

当你安装好divi主题之后,会默认生成2个文章相关的模块:文章标题、帖子内容。

这2个模块仅仅是用于文章详情页里面的。不适用于文章列表页。

那么我们开始一一介绍如何设置这些divi模块。

文章标题模块设置

选择插入“文章标题”模块

如何使用Divi主题自定义编辑WordPress文章post详情页?

点击进入“文章标题”设置在内容—元素里可以对标题进行效果样式设计。

如何使用Divi主题自定义编辑WordPress文章post详情页?

点击进入点击进入“文章标题”设置在设计里可以对标题样式进行设置调整。

如何使用Divi主题自定义编辑WordPress文章post详情页?

在【设计/标题】文本里可以对文章的标题进行编辑设置。

如何使用Divi主题自定义编辑WordPress文章post详情页?

设计/Meta文本中可以对文章的分类文字进行编辑设置。

如何使用Divi主题自定义编辑WordPress文章post详情页?

帖子内容模块设置

设置完成后在下方,在行内添加“帖子内容”模块

如何使用Divi主题自定义编辑WordPress文章post详情页?

添加成功后在模块设置中—设计里可对文章内容进行图像、文本、间距大小等编辑设置。

如何使用Divi主题自定义编辑WordPress文章post详情页?

设置完成后点击右下方的保存按钮,

保存成功后再点击右上方的“X”退出编辑页面。

如何使用Divi主题自定义编辑WordPress文章post详情页?

点击左下方的线框视图,可以查看在页面中创建的模块。

如何使用Divi主题自定义编辑WordPress文章post详情页?

模板的全局设置

按照上述方式创建好了divi的一个自定义模板后,还可以对这个模板进行其他编辑。

点击上方可对模块页面进行编辑“删除,设置等”,

点击画笔可进入编辑页面。

如何使用Divi主题自定义编辑WordPress文章post详情页?

一个页面模块中可添加多多个文章类型的选项。

后期若需要添加新的页面或者文章时,点击对应页面上方的设置按钮。

如何使用Divi主题自定义编辑WordPress文章post详情页?

在使用于中将加入页面中的前方打钩保存即可。

如何使用Divi主题自定义编辑WordPress文章post详情页?

最后点击“保存更改”便完成了本次的文章展示设计效果。

如何使用Divi主题自定义编辑WordPress文章post详情页?

注意,这个绿色按钮非常重要!

设置完成后可在对应的前台对应的页面中查看展示效果。

如何使用Divi主题自定义编辑WordPress文章post详情页?

这个效果是不带侧边栏sidebar的文章详情页样式。

想要为文章添加侧边栏的情况

若是需要为文章详情页添加侧边栏,可以选择第四行的行设置。

点击灰色按钮添加侧边栏。

若是不需要展示侧边栏便选择第一行样式,或者直接删除即可。

如何使用Divi主题自定义编辑WordPress文章post详情页?

如何使用Divi主题自定义编辑WordPress文章post详情页?

在侧边栏【设置/内容】中小部件区域选择所要插入的测边框展示效果。

如何使用Divi主题自定义编辑WordPress文章post详情页?

如何使用Divi主题自定义编辑WordPress文章post详情页?

WP花园结语

如果你想使用本文中的Divi模块,可以从这里购买Divi正版主题,享受70%的折扣。

在使用WordPress为的divi主题开发网站的时候,通常需要对文章详情页进行定制化设计。

那么使用DIVI主题的“主题生成器”就可以方便的对文章页面进行编辑设置,

可以更好传达文章资讯,能够让您的网站更加丰富,提升谷歌SEO优化排名

如果你还想知道其他divi使用小技巧,欢迎给我们留言!

Google广告官方大中华地区官方合作谷歌广告开户 送WordPress网站

预充30000元广告(15%服务费),立刻送您WordPress外贸独立站!

WordPress客服二维码