Kuinka ladata WordPress-viestejä AJAX: lla
Käytän YouTube-kanavaa, johon lähetän ohjelmointiin ja ohjelmistoihin liittyviä videoita. Äskettäin yksi tilaaja kysyi minulta, kuinka WordPress-viesti ladataan AJAX: lla. Vastauksena hänelle päätin kirjoittaa viestin hänen kysymyksestään. Joten tässä artikkelissa tutkitaan, miten WordPress-viesti ladataan AJAX: lla käyttämällä lisää latauspainiketta ja sivun vieritystä.
Latauksen lisäämisen ja sivun vierityksen välinen ero on melko yksinkertainen. Kun käytät Lataa lisää -painiketta, sinun on napsautettava painiketta nähdäksesi seuraavan joukon viestejä. Ja kun vierität näkymän loppuun, vieritys sivun vieressä seuraavan postitusjoukon pitäisi latautua automaattisesti.
Oletetaan, että sinulla on pari viestiä ja sinun on näytettävä 2 viestiä sivulatauksessa ja napsauttamalla sitten Lataa lisää tai Sivun vieritys tulee näkyviin seuraavat 2 viestiä. Tätä prosessia jatkettaisiin, kunnes kaikki viestisi näytetään.
Luo uusi sivu nimeltä Blogi. Jos haluat näyttää viestejäsi Blogi-sivulla, luo mukautettu malli page-blog.phpaktiivisen teeman hakemistoon.
Nyt kun käyttäjät vierailevat blogisivullasi, heidän pitäisi nähdä 2 viestiä. Lisää siis alla oleva koodi mukautettuun mallitiedostoon.
<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>Tässä käytin ‘paged’ -avainta ja välitin sille arvon ‘1’. ‘paged’ on avain, jota käytetään WordPressissä sivutettaessa. ‘paged’ => 1 tarkoittaa ensimmäistä sivua.
Huomaa div-elementin, jonka luokka on ‘loadmore’. Napsauttamalla Lataa lisää, soitamme Ajax-puhelun ja saamme seuraavan joukon viestejä.
Lataa WordPress-viestejä Ajaxilla Lisää painiketta
Ajax-puhelun soittamiseksi sinun on sisällytettävä JS-tiedosto WordPress-ympäristöön. Luo custom.jstiedosto jshakemistoon ja lisää sitten alla oleva koodi functions.phptiedostoon.
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' );Seuraavaksi kirjoitetaan vähän jQueryä ja annetaan Ajax-kutsu, joka vastineeksi antaa seuraavat viestit.
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();
}
});
});
});Mitä teemme täällä, otin javascript-muuttujan "sivu", jonka alkuarvo oli 2, koska aloitamme toisen sivun sivutuksella. Lisään tätä ‘sivu’ -muuttujaa saatuani Ajax-vastauksen. Saatuani vastauksen liitän sen olemassa oleviin viesteihin.
Käytin myös toimintoparametria nimellä ‘load_posts_by_ajax’ Ajax-puheluun, joka on kartoitettava WordPress-toiminnoilla. Avaa functions.phptiedosto ja lisää alla oleva koodi tiedostoon.
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');Edellä mainituissa WordPress-toiminnoissa kutsumme takaisinsoittotoimintoa, load_posts_by_ajax_callbackjonka aion määrittää seuraavassa vaiheessa. Voit määrittää tämän toiminnon omassa 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();
}Nyt kun napsautat Lataa lisää -painiketta, se lataa seuraavat viestit Ajaxin kautta ja palauttaa sen vastauksena. Yllä kirjoitettu JavaScript-koodi käsittelee loput tavarat.
Lataa WordPress-viestejä Ajaxilla sivun vieritykseen
Jotkut käyttäjät eivät ehkä halua ladata lisää -painiketta näyttääksesi viestit Ajaxilla. Sen sijaan he haluavat, että viestit näkyvät, kun käyttäjä saavuttaa näkymän loppuun.
Tämän saavuttamiseksi sinun on kirjoitettava logiikka, joka tallentaa tapahtuman näkymän loppuun, loppuosa koodi on sama kuin Lataa lisää -painike. Alla on jQuery-koodi sivun vieritykseen.
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();
}
});
}
});Se siitä! Voit mennä eteenpäin ja kokeilla sitä. Haluaisin tietää ajatuksesi ja ehdotuksesi alla olevissa kommenteissa.