2017-08-07 85 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的經驗教訓。