Hur man laddar WordPress-inlägg med AJAX
Jag driver en YouTube-kanal där jag lägger upp videor relaterade till programmering och programvara. Nyligen frågade en av prenumeranterna mig hur man laddar WordPress-inlägg med AJAX. Som svar till honom bestämde jag mig för att skriva ett inlägg på hans fråga. Så i den här artikeln studerar vi hur man laddar WordPress-inlägg med AJAX med hjälp av en laddningsknapp och sidrullning.
Skillnaden mellan belastningen mer och en sidrullning är ganska enkel. När du använder ladda mer-knappen måste du klicka på en knapp för att se nästa uppsättning inlägg. Och på sidrullning, när du bläddrar till slutet av en visningsport, ska nästa uppsättning inlägg automatiskt laddas.
Låt oss anta att du har ett par inlägg och att du måste visa två inlägg vid sidläsning och sedan klicka på "Ladda mer" eller på "Sidrullning" nästa 2 inlägg ska visas. Denna process fortsätter tills alla dina inlägg visas.
Skapa en ny sida som heter "Blogg". För att visa dina inlägg på bloggsidan skapar du en anpassad mall page-blog.phpi ditt aktiva temas katalog.
Nu när användare besöker din bloggsida bör de se två inlägg. Så lägg till koden nedan i din anpassade mallfil.
<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>Här använde jag tangenten ‘paged’ och skickade värdet ‘1’ till den. ‘paged’ är en nyckel som används i WordPress när det gäller pagination. ‘paged’ => 1 betyder första sidan.
Du skulle märka div-elementet med klassen ‘loadmore’. När vi klickar på Ladda mer kommer vi att ringa Ajax och få nästa uppsättning inlägg.
Ladda WordPress-inlägg med Ajax på Load More-knappen
För att ringa ett Ajax-samtal måste du inkludera JS-filen i WordPress-miljön. Skapa en custom.jsfil i jskatalogen och lägg sedan till koden nedan i functions.phpfilen.
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' );Låt oss sedan skriva lite jQuery och ge ett Ajax-samtal som i gengäld ger nästa inlägg.
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();
}
});
});
});Vad vi gör här är att jag tog en javascript-variabel ‘sida’ med initialvärde 2 eftersom vi kommer att börja med andra sidan sidor. Jag ökar den här "sidans" variabel efter att jag fått Ajax-svaret. Efter att ha fått svaret lägger jag till det i den befintliga inläggslistan.
Jag använde också åtgärdsparametern som ‘load_posts_by_ajax’ till ett Ajax-samtal som måste kartläggas med WordPress-åtgärder. Öppna din functions.phpfil och lägg till koden nedan i en fil.
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');I ovanstående WordPress-åtgärder kallar vi återuppringningsfunktionen load_posts_by_ajax_callbacksom jag ska definiera i nästa steg. Du kan definiera den här funktionen i din 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();
}Nu när du klickar på "Load More" -knappen laddas nästa inlägg via Ajax och returneras tillbaka som svar. JavaScript-koden skriven ovan skulle hantera de återstående grejerna.
Ladda WordPress-inlägg med Ajax på sidrullning
Vissa användare kanske inte vill ha en laddningsknapp för att visa inläggen med Ajax. Istället föredrar de att inläggen ska visas när användaren når slutet av en visningsport.
För att uppnå detta måste du skriva logik som fångar händelsen i slutet av en visningsport, resten av koden är densamma som knappen ‘Load More’. Nedan finns jQuery-koden för sidrullning.
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();
}
});
}
});Det är allt! Du kan fortsätta och prova det. Jag skulle vilja veta dina tankar och förslag i kommentarerna nedan.