Как я могу создать отзывчивую карусель изображений и слайды пользовательского контента типа поста в WordPress

Question

Я хочу создать отзывчивую карусель изображений и слайды с пользовательским типом записей, такими как избранные изображения, заголовки и т. Д. c.

Я создал пользовательский тип записей в виде баннера следующим образом:

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, скриншот элемента inspect следующий:

Answer 1

Я никогда раньше не использовал Карусель для сов, но каждый раз, когда мне приходится делать карусель, которую я go делаю для 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>

Answer 2

Попробуйте этот код

// 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();
}