时间戳

首页 > 解决方案 > 如何在 WordPress 中创建响应式图像轮播和幻灯片自定义帖子类型内容

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

问题描述

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

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

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 中，以下是检查元素截图：检查元素屏幕截图

标签： javascriptphpjquerywordpresswordpress-theming

解决方案

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

Flickity JS 轮播

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

创建初始查询：

<?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>

推荐阅读