PHP Wordpress 画廊

Question

我正在尝试获取一个 slider 来展示我在帖子中的图片。我目前已设置好所有内容，但我只有一个 li 元素显示所有三张图片。我很想拥有三个 li 元素，每个元素显示一张图片，但我不知道如何自动隔离每张图片。任何帮助将不胜感激!

你可以在这里看到当前状态: http://mksgear.com/shop/test-product/

我的代码是这样的:

<ul class="slides">

  <li class="slide">

<?php if ( has_post_thumbnail() ) : ?>

    <?php echo do_shortcode('[gallery option1="value1"]'); ?>


<?php else : ?>

    <img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />

<?php endif; ?>

  </li>
</ul>

Answer 1

我不确定我是否正确理解了您的问题，但我会给出一个答案。如果我误解了您要尝试做的事情，请为我澄清，我会更新我的答案。

您可以在图库短代码中使用 itemtag="li" 将每张图片包装在 li 中。您需要删除 <li class="slide"> 代码行，并可能使用 jQuery 将“幻灯片”类添加回生成的 li 标记。所以你可以这样做:

此外，当在 if/else 语句中使用 : 时，您的代码是否会呈现图库？

<script>
jQuery(document).ready(function() {
    jQuery("#slides li").addClass("slide");
});
</script>

<ul class="slides">

    <?php if ( has_post_thumbnail() ) { ?>

        <?php echo do_shortcode('[gallery itemtag="li" option1="value1"]'); ?>

    <?php } else { ?>

        <img src="<?php get_bloginfo( 'stylesheet_directory' ); ?>/images/thumbnail-default.jpg" />

    <?php } ?>

</ul>

将此添加到您的页脚中，您可以将其添加到同一个文档中。准备好使用 jQuery 添加类幻灯片。只需将其复制并粘贴到 jQuery("slides li").addClass("slide"); 之后的新行中。如果需要，您可以在此调用中调整高度、宽度或任何其他选项。这有望奏效。

jQuery("#slides").advancedSlider({
width: 900, 
height: 460, 
responsive: 1, 
skin: 'light-round'
});