Question

我有一个bootstrap滑块元素的问题，每个滑块都有背景图片，我希望人们可以在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>

非常感谢！

Answer 1

我看到你提到你仍然被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 字段类型：文本/文本区域/ Wysiwig编辑器（您的选择）

第2行（您刚刚在转发器字段中创建）： 字段标签：横幅说明字段名称：homepage_banner_desc 字段类型：文本是/ Wysiwig编辑器（您的选择）

现在向下滚动页面并从章节标题位置中选择，您希望在哪些页面上可以填写横幅字段。由于您使用的是主页，我建议您从下拉列表中进行选择：

页面类型 - 等于 - 首页

如果您打算进行A＆amp; B分割测试，我会创建一个主页模板，而不是使用front-page.php，这样您就可以复制精确的外观。如果你这样做了，你必须从下拉列表中选择：

页面模板 - 等于 - 主页模板（或您为模板命名的任何内容）

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

填充字段

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

只需单击“添加行”并填写每行的字段，这将填充滑块（不带背景图像）。

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

如果您需要进一步说明，请告诉我们。谢谢！

Bootstrap滑块转换为Wordpress主题主页

1 个答案: