如何在 WordPress 中创建响应式图像轮播和幻灯片自定义帖子类型内容

Posted 2023-05-09

【中文标题】如何在 WordPress 中创建响应式图像轮播和幻灯片自定义帖子类型内容

【英文标题】：How I can create a responsive image carousel and slides custom post type content in WordPress

【发布时间】：2020-05-19 03:40:10

【问题描述】：

我想创建一个响应式图片轮播和幻灯片自定义帖子类型内容，如特色图片、标题等。

我通过以下方式创建了自定义帖子类型作为横幅：

function create_banners_post_type() 
    $labels = array(
        'name' => __( 'Banners' ),
        'singular_name' => __( 'banner' ),
        'add_new' => __( 'New banner' ),
        'add_new_item' => __( 'Add New banner' ),
        'edit_item' => __( 'Edit banner' ),
        'new_item' => __( 'New banner' ),
        'view_item' => __( 'View banner' ),
        'search_items' => __( 'Search banners' ),
        'not_found' =>  __( 'No banners Found' ),
        'not_found_in_trash' => __( 'No banners found in Trash' ),
    );
    $args = array(
        'labels' => $labels,
        'has_archive' => true,
        'public' => true,
        'hierarchical' => false,
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'custom-fields',
            'thumbnail',
            'page-attributes'
        ),
        'taxonomies' => array( 'post_tag', 'category'),
    );


    register_post_type( 'banner', $args );

 
add_action( 'init', 'create_banners_post_type' );

并在首页显示输出：

// function to show home page banner using a query of banner post type

    function home_page_banner() ?>


    <?php   
$query = new WP_Query( array(
            'post_type' => 'banner',
        ));

        if ( $query->have_posts() )  ?>

        <ul> 
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>

            <li> 
                <div>
                    <div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
                    <div class="content-wrap">
                    <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
                    <a href="#section-b" class="btn">Read More</a>
                    </div>
                </div>
            </li> 


            <?php 
            endwhile;?> 
        </ul> 
            </div>
            <?php

       
        wp_reset_postdata();

    

我在首页插入了这段代码：

<header id="showcase" class="grid">

<?php 
if ( is_front_page() ) 
    home_page_banner();

?>

</header>

正在创建一个 ul 列表，在 ul 列表中，每个帖子都在 li 中，以下是检查元素截图：

【问题讨论】：

你用的是哪个slider js？

我曾尝试使用 owl carousel 但 cud 不明白如何使用 WordPress

你能给我看看猫头鹰轮播的html代码吗？

或者你能建议我的任何其他方式...？

【参考方案1】：

试试这个代码

// function to show home page banner using a query of banner post type

function home_page_banner() ?>
 <div class="carousel" data-transition="slide">
<?php   
    $query = new WP_Query( array(
        'post_type' => 'banner',
    ));

    if ( $query->have_posts() )  ?>

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

            <div>
                <div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
                <div class="content-wrap">
                <h1><?php the_title(); ?></h1>
                <?php the_content(); ?>
                <a href="#section-b" class="btn">Read More</a>
                </div>
            </div>
        <?php 
        endwhile;?> 
         </div> 
        <?php

   
    wp_reset_postdata();

【参考方案2】：

我以前从未使用过 Owl Carousel，但任何时候我必须做一个旋转木马，我都会去 Slick 或 Flickity - 基本上有你可能需要的一切。

Flickity JS Carousel

---

以下是如何将您的帖子内容包含在轮播中的示例。

创建初始查询：

<?php 
  // the query
  $recent_posts = new WP_Query( array(
    'category_name' => 'posts',
    'posts_per_page' => 3,
  )); 
?>

创建您的滑块

<div class="posts-slider"> <? // this is your wrapper div ?>
  <?php if ( $recent_posts->have_posts() ) : ?>
    <?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>

      <div class="recent-post-slide">
        <div class="recent-post-content">
          <div class="row">
            <div class="col-12">

              <div>
                <div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
                  <div class="content-wrap">
                  <h1><?php the_title(); ?></h1>
                  <?php the_content(); ?>
                  <a href="#section-b" class="btn">Read More</a>
                </div>
            </div>

            </div>
          </div>
        </div>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  <?php endif; ?>
</div>

添加一些 jQuery 以使 Flickity 工作：

<script>
  jQuery(document).ready(function() 
    var slider = jQuery('.posts-slider'); // The class name of the wrapper div

    slider.flickity(
      cellAlign: 'left',
      contain: true
    );
  );
</script>