さて、何をしなければならないことは、ブラウザのを操作するためのHTML5 APIを使用している基本的
友人からの助けのトンで、私はAJAXの魔法でこれを行う方法を発見したようにHTML5アピス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）を追加しました。これは、後に使用されている
$(document).ready(function() {
が実際かどうかを確認するために：
コンテンツセクションでは、新しいクラスに気づくと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、あまりにも変更されましたスライドまたはボタンをクリックしたとき
`var clickedSlide = 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,
}
},]
});`
スライドが応答させるスライドここ
$navslider = $('.slider').slick({ centerMode: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, arrows: true, focusOnSelect: true,
は私のAjax呼び出し
`function slidesAjaxCall(slideID, slideTitle, slideHref, ajaxurl) {`
この部分だけで、コンテンツのロードが少し作るです開始しますそれをフェードアウトさせて滑らかにします。私は、データPOSTメソッドを使用して属性から値を置く場所
`$('.js-slideContainer').animate({
opacity: 0
}, 320);`
私はここで
`history.pushState(null, slideTitle, slideHref);
document.title = slideTitle;`
ブラウザの履歴を操作する場所ですです。 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（ 'はスライドが見つかりません' ）;それは解析され、HTML 'VARデータ= JSON.parse（応答）に挿入されなければならないので
$('.js-slideContainer').animate({
opacity: 1
}, 320);
} else {`
ポストデータは、JSON形式でのAjax機能で収集されます。
$('.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();`
これは、スライドがクリックされたことを言って、これは二回
`clickedSlide = true;`
Ajaxの機能を呼び出すことからそれを維持するデータからすべての値を収集属性：
`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);
});`
この次の部分は、permalinkを使用して適切なスライドとコンテンツを読み込みます。覚えておいてください、問題の1つは、スライドをうまく動かすことができたことでしたが、特定の投稿に移動すると、スライドは最初から開始されます。
`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に感謝します。