Okay, also mit einer Tonne Hilfe von einem Freund, fand ich einen Weg, dies mit der Magie von AJAX und HTML5 Apis
Grundsätzlich zu tun, was Sie tun müssen, ist den HTML5-API zu verwenden, das Browser zu manipulieren Verlauf und verwenden Sie AJAX, um den gewünschten Inhalt ohne Aktualisierung zu laden. Hier ist, was es am Ende aussehen wie:
Die einzelne Post-Vorlage ziemlich gleich geblieben, außer ich die Folie Abfrageausgabe ein wenig von
geändert
<a href="<?php echo $link; ?>">
zu
<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(); ?>">
Ich habe die Klasse js-switchSlide hinzugefügt, um sie später in meinen JS- und AJAX-Funktionen aufrufen zu können. Ich habe einige Datenattribute (data-ajaxurl, data-title und data-id) hinzugefügt, die ich in der Ajax-Funktion verwenden werde.auch geändert worden ist, bemerken die neuen Klassen und Ids
<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>
Hier ist die JS
Der Inhalt Abschnitt hat:
$(document).ready(function() {
Dieses später verwendet wird, ob die tatsächliche zu sehen Folie oder die Taste wurde geklickt
`var clickedSlide = true;`
Initiieren der Schieber
$navslider = $('.slider').slick({ centerMode: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, arrows: true, focusOnSelect: true,
Hier mache ich die Rutsche ansprechende
`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,
}
},]
});`
Hier ist meine Ajax
`function slidesAjaxCall(slideID, slideTitle, slideHref, ajaxurl) {`
Dieser Teil nennen macht nur das Laden des Inhalts ein wenig glatter durch Ein- und Ausblenden.
`$('.js-slideContainer').animate({
opacity: 0
}, 320);`
Dies ist, wo ich den Browser-History
`history.pushState(null, slideTitle, slideHref);
document.title = slideTitle;`
Hier manipulieren ist, wo ich die Werte aus den Daten platzieren Attribute POST-Methode. Type ist nur der benutzerdefinierte Post-Typ und action ist der Name der Ajax-Funktion.
$.ajax({ url : ajaxurl, method: 'POST', data: { id: slideID, type : 'CPT', action: 'hc_load_slide' },
Selbsterklärend
`error : function(response){
console.log('error');
},`
Bei Erfolg: `Erfolg: function (Antwort) { if (Antwort === 0) { console.log ('kein Dia gefunden');
$('.js-slideContainer').animate({
opacity: 1
}, 320);
} else {`
Das Postdaten werden in der Ajax-Funktion in JSON Format gesammelt, so hat es sich in den HTML `var data = JSON.parse (response) geparst und eingeführt werden;
$('.js-slideTitle').text(data.title);
$('.js-slideContent').html(data.content);`
es schön `setTimeout (function() {
$('.js-slideContainer').animate({
opacity: 1
}, 320);
}, 100);
}
}
});
}`
.js-switchSlide ist die Klasse, in der a Tag Machen Sie sich verhalten, damit ich es aus gehen die Seite aktualisieren verhindern, wenn darauf geklickt.
`$('.js-switcSlide').click(function(e){
e.preventDefault();`
Diese besagt, dass der Schieber geklickt wurde, wird diese halten sie von der Ajax-Funktion zweimal aufrufen
`clickedSlide = true;`
alle sammeln die Werte aus der Datenattribute:
`var babyID = e.currentTarget.dataset.id;
var babyTitle = e.currentTarget.dataset.title;
var babyHref = e.currentTarget.href;
var ajaxurl = e.currentTarget.dataset.ajaxurl;`
Rufen Sie die Funktion
`babiesAjaxCall(babyID, babyTitle, babyHref, ajaxurl);
});`
Okay, dieser nächste Teil lädt die entsprechende Folie und den Inhalt mit dem Permalink. Denken Sie daran, dass eines der Probleme darin bestand, dass die Folie einwandfrei funktioniert, aber wenn ich zu einem bestimmten Post navigierte, würde die Folie von Anfang an beginnen.
`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);
});
});`
Inzwischen hat die Ajax-Funktion sieht wie folgt aus
`add_action ('wp_ajax_nopriv_hc_load_slide', 'hc_load_slide'); add_action ('wp_ajax_hc_load_slide', 'hc_load_slide');
Funktion 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();
}`
Ich weiß, es ist eine lange Antwort, aber ich hoffe, das macht Sinn. Es erfüllt genau das, was ich wollte. Danke alecaddd für den Unterricht.