使用 Slick Slider 作为 WP Post Navigation

Question

我正在尝试使用光滑的滑块作为 WordPress 单个 CPT 页面上的上一个和下一个按钮。

因此，滑块将调用特定 CPT 的所有帖子并显示当前帖子的特色图片，并且在任一侧将显示上一个和下一个帖子的特色图片。

当您浏览幻灯片时，会出现相应的内容。

问题是，当您滑过时，您将获得正确的图像和内容，但 URL 保持不变。 此外，您无法链接到特定帖子，因为它只会转到幻灯片的开头。

现在，这就是我的single-CPT.php样子

<?php
get_header();
rewind_posts();
if (have_posts()) {
while ( have_posts() ) : the_post();

$post_id = get_the_ID();

?>
 // BEGIN SLIDER (WHERE FEATURED IMAGES ARE THE SLIDES)//
<section class="slider center">

<?php

    $index = 0;
    $carousel_args = array(
        'post_type' => 'CPT',
        'posts_per_page' => -1,


    );
    $carousel_query = new WP_Query( $carousel_args );
    if ( $carousel_query->have_posts() ) {
        while ( $carousel_query->have_posts() ) {
            $carousel_query->the_post();
            $title = get_the_title();
            $link = get_permalink();

            if ( has_post_thumbnail() ) {
                $post_thumbnail_id = get_post_thumbnail_id();
                $post_thumbnail_image = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
                $post_thumb = $post_thumbnail_image[0];
            } else {
                $post_thumb = '';
            }
            $content = get_the_content();
            $excerpt = get_the_excerpt();

            // output//
            ?>

                <div class="wow slide-in slide">
                    <div class="active">

                       <a href="<?php echo $link; ?>">
                       <img src="<?php echo $post_thumb; ?>" />
                       </a>                 
                    </div>
                </div>

<?php   $index++;
        }
    }
    wp_reset_postdata();
    endwhile;
?>
</section>
//END SLIDER - BEGIN CONTENT//      
<div id="archive-post">
    <div class="row">
        <div class="columns small-12 medium-10 medium-offset-1 large-offset-0 large-8">
            <article id="post-<?php the_ID(); ?>" role="article">
                    <div class="post-title">
                        <div class="row">
                            <div class="columns">
                                <h3><?php the_title(); ?></h3>
                            </div>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="row">
                            <div class="columns">
                                <?php the_content(); ?>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
      </div>
 </div> 

基本上我需要 URL 与幻灯片一起更新而不刷新页面。 有什么办法可以做到这一点吗？

Answer 1

好的，在朋友的大量帮助下，我找到了一种利用 AJAX 和 HTML5 API 的魔力来做到这一点的方法

基本上你要做的就是使用 HTML5 Api 来操纵浏览器的历史记录，并使用 AJAX 加载所需的内容而无需刷新。 这是它最终的样子：

除了我稍微改变了幻灯片查询输出之外，单个帖子模板几乎保持不变

<a href="<?php echo $link; ?>">

到

<a href="<?php echo $link; ?>" class="js-switchSlide" data-ajaxurl="<?php echo admin_url('admin-ajax.php'); ?>" data-title="<?php echo get_the_title(); ?>" data-id="<?php echo get_the_ID(); ?>">

我添加了js-switchSlide类，以便稍后在我的 JS 和 AJAX 函数中调用它。 我添加了几个将在 ajax 函数中使用的数据属性（ data-ajaxurl 、 data-title和data-id ）。

内容部分也已更改，请注意新的类和 ID

<div id="archive-post"> <div class="row"> <div class="columns small-12 medium-10 medium-offset-1 large-offset-0 large-8"> <article id="post-<?php the_ID(); ?>" <?php post_class( array('post-page', 'js-slideContainer') ); ?> role="article"> <input type="hidden" id="currentSlide" value="<?php the_ID(); ?>"> <div class="post-title"> <div class="row"> <div class="columns"> <h3 class="js-slideTitle"><?php the_title(); ?></h3> </div> </div> </div> <div class="post-content"> <div class="row"> <div class="columns js-slideContent"> <?php the_content(); ?> </div> </div> </div> </article> </div> </div> </div>

这是JS：

$(document).ready(function() {

稍后用于查看是否单击了实际幻灯片或按钮

`var clickedSlide = true;` 

启动幻灯片

$navslider = $('.slider').slick({ centerMode: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, arrows: true, focusOnSelect: true,

在这里，我使幻灯片响应

        `responsive: [
          {
        breakpoint: 1068,
            settings: {
            initialSlide: 0,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
          }
        },
          {
        breakpoint: 768,
            settings: {
            initialSlide: 0,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
          }
        },
            {
        breakpoint: 480,
            settings: {
            initialSlide: 0,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            }
        },]
});`

这是我的 Ajax 调用

`function slidesAjaxCall(slideID, slideTitle, slideHref, ajaxurl) {`

这部分只是通过淡入淡出使内容的加载更加平滑。

    `$( '.js-slideContainer' ).animate({
        opacity: 0
    }, 320);`

这是我操纵浏览器历史记录的地方

    `history.pushState(null, slideTitle, slideHref);
    document.title = slideTitle;`

这是我使用 POST 方法放置来自数据属性的值的地方。 Type 只是自定义的帖子类型，而 action 是 Ajax 函数的名称。

$.ajax({ url : ajaxurl, method: 'POST', data: { id: slideID, type : 'CPT', action: 'hc_load_slide' },

不言自明

        `error : function( response ){
            console.log('error');
        },`

如果成功：`success : function( response ){ if( response === 0 ){ console.log('no slide found');

                $( '.js-slideContainer' ).animate({
                    opacity: 1
                }, 320);

            } else {`

帖子数据以 JSON 格式在 Ajax 函数中收集，因此必须对其进行解析并插入到 html `var data = JSON.parse(response);

                $( '.js-slideTitle' ).text(data.title);
                $( '.js-slideContent' ).html(data.content);`

让它表现得很好`setTimeout(function(){

                    $( '.js-slideContainer' ).animate({
                        opacity: 1
                    }, 320);

                }, 100);
            }
        }
    });

}`

.js-switchSlide是a标签中的类，所以我防止它在点击时刷新页面。

`$('.js-switcSlide').click(function(e){
    e.preventDefault();`

这表示单击了幻灯片，这将防止它两次调用 ajax 函数

    `clickedSlide = true;`

从数据属性中收集所有值：

    `var babyID = e.currentTarget.dataset.id;
    var babyTitle = e.currentTarget.dataset.title;
    var babyHref = e.currentTarget.href;
    var ajaxurl = e.currentTarget.dataset.ajaxurl;`

调用函数

    `babiesAjaxCall(babyID, babyTitle, babyHref, ajaxurl);

});`

好的，下一部分使用固定链接加载适当的幻灯片和内容。 请记住，其中一个问题是我可以让幻灯片正常工作，但是当我导航到特定帖子时，幻灯片将从头开始。

`var currentSlideID = $( '#currentSlide' ).val();
var $slide = $(".slider [data-id='" + currentSlide + "']");
var slideIndex = $slide.parents('.slide').data("slick-index");
$babyslider.slick("goTo", slideIndex);

/* Trigger Ajax call if Chevron is clicked and not Slide */
$slider.on('afterChange', function(event, slick, currentSlide, nextSlide){

    // Stop if clieckedSlide === true;
    if (clickedSlide) {
        clickedSlide = false;
        return;
    }

    var slideIndex = $('[data-slick-index="' + currentSlide + '"]').find('.js-switchSlide');

    var slideID = slideIndex.data('id');
    var slideTitle = slideIndex.data('title');
    var slideHref = slideIndex.attr('href');
    var ajaxurl = slideIndex.data('ajaxurl');

    babiesAjaxCall(babyID, babyTitle, babyHref, ajaxurl);

});

});`

同时，Ajax 函数看起来像这样

`add_action('wp_ajax_nopriv_hc_load_slide', 'hc_load_slide'); add_action('wp_ajax_hc_load_slide', 'hc_load_slide');

函数 hc_load_baby() {

$id = $_POST["id"];
$type = $_POST["type"];

// echo $id . ' - ' . $type;

$args = array(
    'post_type' => $type,
    'p' => $id,
);

$slide = new WP_Query( $args );

if ( $slide->have_posts() ) :

    while ( $slide ->have_posts() ) : $slide->the_post();

        $title = get_the_title();
        $content = apply_filters('the_content', get_the_content() );

    endwhile;

endif;

echo json_encode([ 'title' => $title, 'content' => $content ]);

die();
}`

我知道这是一个很长的答案，但我希望这是有道理的。 它完全实现了我想要的。 感谢 alecaddd 的课程。