WordPress 主题开发添加图片文字混排【Advanced Custom Fields自定义字段插件系列教程】

本节主要讲解使用 Advanced Custom Fields  (自定义字段插件)进行网站首页图文混排功能开发,可用于企业网站,博客网站等。通过后台控制网站前台的模块标题、描述图片和按钮的链接及文字。

如果你有html和css基础会更加容易理解,如果没有也没关系,只要细心,相信你也一定可以完成。

自己开发的好处

节省资源,无多余代码,不依赖elementor插件,使网站加载速度快,可定制性高。

准备工作

建议使用Advanced Custom Fields PRO版本,当然如果需要免费的,WordPress后台搜索并安装启用自定义字段插件Advanced Custom Fields 。

1.添加自定义字段

(点击图片放大对照设置)

2.首页文件中的代码

以下代码添加到主题根目录下的:page-home.php,你想展示的任何位置(通常在content或者container标签内插入)

<h1><?php the_field('box_title_1'); ?></h1>
<p><?php the_field('box_text_1'); ?></p>
<img src="<?php the_field('box_img_1'); ?>">
<a href="<?php the_field('box_link_1'); ?>"><?php the_field('box_btn_text_1'); ?></a>

3.文章图片调整

以下代码添加到主题根目录下的:style.css(注:可能你用不到。因为教程中的主题自带bug才需调整)

#content img{
	max-width: 100%;
	height: auto
}

 

发表评论

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

上一篇

WordPress 网站轮播图开发教程【Advanced Custom Fields PRO自定义字段插件系列教程】

下一篇

WordPress 外贸网站如何修改网站文字颜色

相关文章