Wordpress 中的 bxSlider jquery 插件实现

Question

我正在做我的第一步编码。我在网上做了一些课程，现在我正在制作一个 wordpress 主题以继续从实践中学习。

问题是我正在寻找一个制作图像滑块的插件，我知道安装 wordpress 插件非常简单，但我想更加努力并安装一个 jquery 插件。

我发现 bxSlider 非常实用且完整：http://bxslider.com/。网站上有一个教程，在其他 wordpress 教程的帮助下，我想也许我会安装它。

在 bxSlider 网站上，他们说我必须创建这个 html 标记：

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

但是我可以在 wordpress 中做什么？假设我将创建一个里面有画廊的页面？我想做的是将该画廊转换为幻灯片。

Answer 1

获取高级自定义字段插件和高级自定义字段中继器插件。

将您的转发器字段命名为“滑块”。在转发器字段中添加一个图像字段，将此字段命名为slider_image，并选择图像类型作为图像url。

显示它的代码是

<?php $sliders=get_field("slider");?>
<ul class="bxslider">
    <?php foreach($sliders as $slider):?>
        <?php $slider=$gallery['slider_image']; ?>
        <li>
            <img src="<?php echo $slider['url'];?>"/>
        </li>
    <?php endforeach;?>
</ul>

确保您在此处阅读高级自定义字段的文档

https://www.advancedcustomfields.com/resources/ https://www.advancedcustomfields.com/resources/repeater/

设置您希望字段显示的位置。例如。特定页面，每个页面，每个帖子，同时让您的领域找到选项。

保存您的字段并转到页面或发布您设置该字段出现的页面。然后您就可以在滑块中添加任意数量的图像