2017-08-07 56 views
0

我试图使用光滑滑块作为WordPress单个CPT页面上的上一个和下一个按钮。使用光滑滑块作为WP Post导航

因此,滑块将调用特定CPT的所有帖子,并显示当前帖子的精选图片,并在任一侧显示前一帖和下一帖的精选图片。

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

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

现在,这是我的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,而无需刷新页面与幻灯片一起更新。有什么办法可以做到这一点?

回答

0

好了,一吨的从一个朋友的帮助下,我找到了一种与AJAX和HTML5蜜蜂

基本上,你要做的是使用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函数中调用它。 我添加了一些数据属性(data-ajaxurl,data-titledata-id),我将在ajax函数中使用它们。

内容部分已经改变过,发现新的类和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'); 
     },` 

如果成功: `成功:功能(响应){ 如果(响应=== 0){ 的console.log( '无滑动发现' );

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

      } else {` 

POST数据被收集在JSON格式的Ajax的功能,所以它已被解析并插入到HTML `VAR数据= JSON.parse(响应);

   $('.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); 

}); 

});` 

与此同时,阿贾克斯功能看起来像这样

`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的经验教训。