php - 带有最近发布循环的光滑滑块轮播不起作用

Question

我正在尝试使用 Slick Slider 和 ACF 实现最近的帖子轮播。

我找到了一个很棒的教程并按照这里的说明进行操作：

https://imranhsayed.medium.com/slick-slider-wordpress-without-plugin-slick-carousel-ef2394c737ef

经过多次试验和错误后，我可以使用如下的一些基本测试内容使其按预期工作：

<div class="posts-carousel">
    <div>test</div>
    <div>test</div>
    <div>test</div>
</div>

但是当我尝试实现最近的帖子循环的代码时，我只是得到一个白屏。我不擅长 php，但我试图解决这个问题，但我看不到它。

给出的另一个代码示例在复制和粘贴时完美运行：

<div class="posts-carousel px-5">
   <!--Slide One-->
   <div class="card">
      <img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
      <div class="card-body">
         <h3 class="card-title">Your Post heading</h3>
         <p>Your Post Excerpt</p>
         <a href="#" class="btn btn-primary">View More</a>
      </div>
   </div>
   <!--Slide Two-->
   <div class="card">
      <img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
      <div class="card-body">
         <h3 class="card-title">Your Post heading</h3>
         <p>Your Post Excerpt</p>
         <a href="#" class="btn btn-primary">View More</a>
      </div>
   </div>
</div>

但是包含后循环的代码示例没有

<?php
/**
 * Posts Carousel
 *
 * @package aquila
 */

$args = [
    'posts_per_page'         => 5,
    'post_type'              => 'post',
    'update_post_meta_cache' => false,
    'update_post_term_cache' => false,
];

$post_query = new \WP_Query( $args );
?>
<div class="posts-carousel px-5">
    <?php
    if ( $post_query->have_posts() ) :
        while ( $post_query->have_posts() ) :
            $post_query->the_post();
            ?>
            <div class="card">
                <?php
                if ( has_post_thumbnail() ) {
                    the_post_custom_thumbnail(
                        get_the_ID(),
                        'featured-thumbnail',
                        [
                            'sizes' => '(max-width: 350px) 350px, 233px',
                            'class' => 'w-100',
                        ]
                    );
                } else {
                    ?>
                    <img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
                    <?php
                }
                ?>
                <div class="card-body">
                    <?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
                    <?php aquila_the_excerpt(); ?>
                    <a href="<?php echo esc_url( get_the_permalink() ); ?>" class="btn btn-primary">
                        <?php esc_html_e( 'View More', 'aquila' ); ?>
                    </a>
                </div>
            </div>
        <?php
        endwhile;
    endif;
    wp_reset_postdata();
    ?>
</div>

我尝试编辑或删除对“aquila”的引用，我认为这是帖子作者使用的主题，但它不起作用

我目前有这个：

<?php

$args = [
    'posts_per_page'         => 2,
    'post_type'              => 'post',

];

$post_query = new WP_Query( $args );
?>
<div class="posts-carousel px-5">
    <?php
    if ( $post_query->have_posts() ) :
        while ( $post_query->have_posts() ) :
            $post_query->the_post();
            ?>
            <div class="card">
                <?php
                if ( has_post_thumbnail() ) {
                    the_post_custom_thumbnail(
                        get_the_ID(),
                        'featured-thumbnail',
                        [
                            'sizes' => '(max-width: 350px) 350px, 233px',
                            'class' => 'w-100',
                        ]
                    );
                } else {
                    ?>
                    <img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
                    <?php
                }
                ?>
                <div class="card-body">
                    <?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
                </div>
            </div>
        <?php
        endwhile;
    endif;
    wp_reset_postdata();
    ?>
</div>

我实际上找到了一个可以为我做的插件，但我觉得我离让它工作很近，我就是做不出来。

任何帮助都会很棒

标签： phppost