Kuidas laadida WordPressi postitusi AJAX-iga
Mul on YouTube’i kanal, kuhu postitan programmeerimise ja tarkvaraga seotud videoid. Hiljuti küsis üks tellija minult, kuidas WordPressi postitust AJAX-iga laadida. Vastuseks talle otsustasin kirjutada tema küsimusele postituse. Nii et selles artiklis uurime, kuidas WordPressi postitust AJAX-iga laadida, kasutades nuppu ja lehekülje kerimist rohkem koormusi.
Erinevus suurema koormuse ja lehe kerimise vahel on üsna lihtne. Kui kasutate nuppu Laadi rohkem, peate järgmise postituskomplekti nägemiseks klõpsama nupul. Ja sirvimise korral peaks vaateakna lõppu kerides järgmine postituste komplekt automaatselt laadima.
Oletame, et teil on paar postitust ja peate lehe laadimisel kuvama 2 postitust ja seejärel klõpsates nuppu ‘Laadi rohkem’ või ‘Lehekülje kerimine’, peaksid järgmised 2 postitust kuvama. See protsess jätkub seni, kuni kuvatakse kõik teie postitused.
Looge uus leht nimega "Blogi". Postituste kuvamiseks lehel Blogi looge page-blog.phpoma aktiivse teema kataloogis kohandatud mall .
Nüüd, kui kasutajad külastavad teie ajaveebi lehte, peaksid nad nägema kahte postitust. Niisiis, lisage allpool olev kood oma kohandatud mallifaili.
<div class="entry-content">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<div class="blog-posts">
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<div class="loadmore">Load More...</div>
<?php endif; ?>
</div>Siin kasutasin võtit ‘paged’ ja andsin sellele väärtuse ‘1’. ‘paged’ on võti, mida WordPressis kasutatakse lehekülgede otsimisel. ‘paged’ => 1 tähendab esimest lehte.
Märkaksite div-elementi klassiga ‘loadmore’. Klõpsates nupul Laadi rohkem, helistame Ajaxile ja saame järgmise postituste komplekti.
Laadige WordPressi postitused Ajaxiga nupule Load More
Ajaxi kõne tegemiseks peate lisama JS-faili WordPressi keskkonda. Looge kataloogis custom.jsfail jsja lisage seejärel functions.phpfaili alla kood .
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_more_posts' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );Järgmisena kirjutame natuke jQuery ja helistame Ajaxi kõne, mis vastutasuks annab järgmised postitused.
custom.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
});
});Mida me siin teeme, võtsin javascripti muutuja ‘page’ algväärtusega 2, kuna alustame teise lehe lehitsemist. Ma suurendan seda ‘lehe’ muutujat pärast Ajaxi vastuse saamist. Pärast vastuse saamist lisan selle olemasolevate postituste loendisse.
Samuti kasutasin toimingu parameetrit Ajaxi kõne jaoks ‘load_posts_by_ajax’, mis peab kaardistama WordPressi toimingutega. Avage oma functions.phpfail ja lisage allolev kood faili.
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');Ülaltoodud WordPressi toimingute korral nimetame tagasihelistamisfunktsiooni, load_posts_by_ajax_callbackmille kavatsen järgmises etapis määratleda. Selle funktsiooni saate määratleda oma functions.php.
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => $paged,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}Nüüd, kui klõpsate nupul "Laadi rohkem", laadib järgmised postitused Ajaxi kaudu ja tagastab selle vastuseks. Eespool kirjutatud JavaScripti kood käsitleb ülejäänud asju.
Laadige WordPressi postitused Ajaxiga lehel kerimine
Mõni kasutaja ei pruugi soovida Ajaxiga postituste kuvamiseks rohkem nuppu. Selle asemel eelistavad nad, et postitused kuvatakse siis, kui kasutaja jõuab vaateava lõppu.
Selle saavutamiseks peate kirjutama loogika, mis fikseerib sündmuse vaateava lõpus, ülejäänud kood on sama mis nupul "Laadi rohkem". Allpool on lehe kerimise jQuery kood.
jQuery(window).scroll(function($) {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
}
});See selleks! Võite proovida. Tahaksin teada teie mõtteid ja ettepanekuid allpool toodud kommentaarides.