1. David Wu首页
  2. WordPress
  3. WordPress安装教程

Elementor动态字段配合ACF 创建更强大的WordPress站点

[db:摘要]

在之前我们曾介绍了Elementor的主题编辑,可以随意修改网站主题的布局样式,非常的强大,在本文中我们将分享Elementor动态字段与ACF插件配合使用的案例,为WordPress增加更多功能

 

开始前的准备

这里我会对WordPress的文章模版进行改造,制作一个简单的主题介绍页面,其中包括主题缩略图、主题文字介绍以及演示站按钮

因为需要对模版进行改造以及使用动态字段,所以需要用到Elementor专业版,以及ACF插件,确保你的WP已经安装了这2款插件

 

使用ACF插件创建自定义字段

首先,我们先使用ACF创建需要用到的自定义字段,第一项确定文章的范围,因为这里并没有使用新类型的文章,所以要通过分类筛选,确保只会修改对应分类下的文章模版

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

设置自定义字段的Location,设置Post Category 为主题分类,这里你可以根据实际需要,通过分类、标签、模版等进行筛选

然后就是添加字段了,根据前边的需求这里最少需要3个字段,主题缩略图、主题文字介绍、主题演示站地址,在ACF内创建好他们后保存

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

这样自定义字段就完成了

 

填充数据

为了方便在Elementor中设计,我们需要填充一些数据,打开一篇演示文章,填充好对应的数据

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

因为是演示数据不需要多,填充一篇即可,接下来我们将在Elementor中设计这个模版

 

使用Elementor设计模版

在Elementor中添加一个新的模版,选择文章类型

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

打开编辑器后,先不用着急设计,我们需要先做一件事情,演示页面调整为刚刚添加了数据的文章

点击左下角的齿轮设置按钮,设置 – Preview Settings – 选择对应文章 – 应用,你会发现Elementor已经显示成你想要的文章,接下来我们就可以对它进行设置了

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

这里我插入了3个Elementor小工具,他们是图片、文字、按钮,接下来我们就要配置它们的动态字段,依次对接字段中的缩略图、介绍以及演示站

打开图像编辑,在图像上传区域的右上角有一个叫做动态字段的按钮,点击它,然后选择最后一个 ACF Image Field

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

点击图像选择的区域会消失,替代的是一个ACF 的设置,继续点击 ACF Image Field

选择对应的主题缩略图字段,这个时候就会看到刚刚在后台上传的图片了

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

然后循环该操作,继续为文字和按钮设置动态字段,基本的操作步骤都是相同的

预览的效果下图,其他的一些样式可以根据自己的实际情况进行调整

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

最后还有一点非常重要的就是不要忘了设置筛选,Condition的设置和ACF中的筛选同步

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

这样我们的模版就设计好了,剩余的文章只需要在后台上传数据,前台会自动按照我们的设计进行排版,再也不用进行重复设计了

 

Elementor动态字段配合ACF 创建更强大的WordPress站点Elementor动态字段配合ACF 创建更强大的WordPress站点

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/106470

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注