引导滑块转换为 WordPress 主题主页



我有一个关于引导滑块元素的问题,每个滑块都有背景图像,我希望人们可以从 Wordpress 的主页自定义他们的背景图像和文本内容自定义工具。

我查看了很多教程,但其中大多数都是拉出帖子图像和标题来显示,这不是我想要的。我希望它是该网站的功能滑块,他们可以上传到他们的自定义工具中。

不确定我可以使用哪个 wp PHP 代码,我下载了高级自定义字段插件,并阅读了他们的文档,仍然有点困惑。

感谢您的帮助!

这是我的 HTML 代码

<div class="w-slider-mask">
<div class="slide w-slide">
<div class="div-block slider-wrapper">
<div class="div-block-2">
<h1 class="heading">start fresh of day</h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo
cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
</div>
</div>
</div>
<!--   slider 2-->
<div class="slide-2 w-slide">
<div class="div-block slider-wrapper">
<div class="div-block-2">
<h1 class="heading">Deslicious</h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo
cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
</div>
</div>
</div>
<!--  slider 3 -->
<div class="slide-3 w-slide">
<div class="div-block slider-wrapper">
<div class="div-block-2">
<h1 class="heading">Desert time</h1>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo
cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
</div>
</div>
</div>
</div>
</div>

非常感谢!

我看到你提到你仍然对ACF感到困惑。下面是模拟您正在寻找的确切内容的代码。虽然您从未在代码中提到添加背景图像的位置,所以我无法添加它,但这很容易做到。

粘贴下面的代码并删除您之前使用的长 html 代码。

<div class="w-slider-mask">
<?php if( have_rows('homepage_banner') ): ?>
<?php $i = 1; ?>
<?php while( have_rows('homepage_banner') ): the_row(); ?>
<div class="slide<?php $a = $i++; if($a !== 1): ?>-<?php echo $a; endif;?> w-slide">
<div class="div-block slider-wrapper">
<div class="div-block-2">
<h1 class="heading"><?php the_sub_field('homepage_banner_headline');></h1>
<p class="paragraph"><?php the_sub_field('homepage_banner_desc');?></p>
</div>
</div>
</div>
<?php endwhile :
endif;?>
</div>

获得此代码后,您将看到它不起作用。这是因为您需要添加一个字段才能使其正常工作。

您将需要安装以下内容:- ACF(高级自定义字段) - ACF中继器领域

然后,您需要创建一个称为转发器字段的新自定义字段。并像这样填写字段:

制作中继器字段:

字段标签:主页横幅 字段名称:homepage_banner 字段类型:中继器 转发器字段:添加 2 行

第 1 行(您刚刚在转发器字段中创建的):字段标签:横幅标题 字段名称:homepage_banner_headline 字段类型:文本/文本区域/所见即所得编辑器(可选)

第 2 行(您刚刚在转发器字段中创建的):字段标签:横幅说明 字段名称:homepage_banner_desc 字段类型:文本是/所见即所得编辑器(您的选择)

现在进一步向下滚动页面,然后从标题"位置"部分中进行选择,您希望在哪些页面上填写横幅字段。由于您使用的是主页,因此我建议您从下拉列表中选择:

页面类型 - 等于 - 首页

如果您打算进行 A&B 拆分测试,我会创建一个主页模板而不是使用首页.php这样您就可以复制确切的外观。如果您确实这样做了,则必须从下拉列表中选择:

页面模板 - 等于 - 主页模板(或任何您命名的模板)

现在单击保存或更新,具体取决于您是创建新字段集还是更新现有字段集。

填充字段

导航到主页,现在您应该在主内容框下方看到一些额外的框和任何其他插件,例如 Yoast SEO 元框。

只需单击添加行并填写每行的字段,这将填充滑块(没有背景图像)。

如果您能为我提供显示图像的代码,我可以解释如何制作此 ACF。

如果您需要任何进一步的澄清,请告诉我。谢谢!

最新更新