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 Apis的魔力来做到这一点

基本上你要做的就是使用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只是自定义的post类型，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（＆＃39;找不到幻灯片＆＃39;）;

                $( '.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（函数（）{

                    $( '.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（＆＃39; wp_ajax_nopriv_hc_load_slide＆＃39;，＆＃39; hc_load_slide＆＃39;）; add_action（＆＃39; wp_ajax_hc_load_slide＆＃39;，＆＃39; hc_load_slide＆＃39;）;

function 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上课。

使用Slick Slider作为WP Post Navigation

1 个答案: