{"id":24895,"date":"2021-05-20T12:19:00","date_gmt":"2021-05-20T09:19:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24895"},"modified":"2021-10-17T19:01:18","modified_gmt":"2021-10-17T16:01:18","slug":"kuidas-laadida-wordpressi-postitusi-ajax-iga","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-laadida-wordpressi-postitusi-ajax-iga\/","title":{"rendered":"Kuidas laadida WordPressi postitusi AJAX-iga"},"content":{"rendered":"

Mul on YouTube’i kanal,<\/a> kuhu postitan programmeerimise ja tarkvaraga seotud videoid. Hiljuti k\u00fcsis \u00fcks tellija minult, kuidas WordPressi postitust AJAX-iga laadida. Vastuseks talle otsustasin kirjutada tema k\u00fcsimusele postituse. Nii et selles artiklis uurime, kuidas WordPressi postitust AJAX-iga laadida, kasutades nuppu ja lehek\u00fclje kerimist rohkem koormusi.<\/p>\n

Erinevus suurema koormuse ja lehe kerimise vahel on \u00fcsna lihtne. Kui kasutate nuppu Laadi rohkem, peate j\u00e4rgmise postituskomplekti n\u00e4gemiseks kl\u00f5psama nupul. Ja sirvimise korral peaks vaateakna l\u00f5ppu kerides j\u00e4rgmine postituste komplekt automaatselt laadima.<\/p>\n

Oletame, et teil on paar postitust ja peate lehe laadimisel kuvama 2 postitust ja seej\u00e4rel kl\u00f5psates nuppu ‘Laadi rohkem’ v\u00f5i ‘Lehek\u00fclje kerimine’, peaksid j\u00e4rgmised 2 postitust kuvama. See protsess j\u00e4tkub seni, kuni kuvatakse k\u00f5ik teie postitused.<\/p>\n

Looge uus leht nimega "Blogi". Postituste kuvamiseks lehel Blogi looge page-blog.php<\/code>oma aktiivse teema kataloogis kohandatud mall .<\/p>\n

N\u00fc\u00fcd, kui kasutajad k\u00fclastavad teie ajaveebi lehte, peaksid nad n\u00e4gema kahte postitust. Niisiis, lisage allpool olev kood oma kohandatud mallifaili.<\/p>\n

<div class=\"entry-content\">\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => 1,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"blog-posts\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"loadmore\">Load More...<\/div>\n\u00a0\u00a0\u00a0\u00a0<?php endif; ?>\n<\/div><\/code><\/pre>\n
Siin kasutasin v\u00f5tit ‘paged’ ja andsin sellele v\u00e4\u00e4rtuse ‘1’. ‘paged’ on v\u00f5ti, mida WordPressis kasutatakse lehek\u00fclgede otsimisel. ‘paged’ => 1 t\u00e4hendab esimest lehte.<\/p>\n
M\u00e4rkaksite div-elementi klassiga ‘loadmore’. Kl\u00f5psates nupul Laadi rohkem, helistame Ajaxile ja saame j\u00e4rgmise postituste komplekti.<\/p>\n
Laadige WordPressi postitused Ajaxiga nupule Load More<\/h3>\n
Ajaxi k\u00f5ne tegemiseks peate lisama JS-faili WordPressi keskkonda. Looge kataloogis custom.js<\/code>fail js<\/code>ja lisage seej\u00e4rel functions.php<\/code>faili alla kood .<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_more_posts' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
J\u00e4rgmisena kirjutame natuke jQuery ja helistame Ajaxi k\u00f5ne, mis vastutasuks annab j\u00e4rgmised postitused.<\/p>\n
custom.js<\/strong><\/p>\n
var page = 2;\njQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.loadmore', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Mida me siin teeme, v\u00f5tsin javascripti muutuja ‘page’ algv\u00e4\u00e4rtusega 2, kuna alustame teise lehe lehitsemist. Ma suurendan seda ‘lehe’ muutujat p\u00e4rast Ajaxi vastuse saamist. P\u00e4rast vastuse saamist lisan selle olemasolevate postituste loendisse.<\/p>\n
Samuti kasutasin toimingu parameetrit Ajaxi k\u00f5ne jaoks ‘load_posts_by_ajax’, mis peab kaardistama WordPressi toimingutega. Avage oma functions.php<\/code>fail ja lisage allolev kood faili.<\/p>\n
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');<\/code><\/pre>\n
\u00dclaltoodud WordPressi toimingute korral nimetame tagasihelistamisfunktsiooni, load_posts_by_ajax_callback<\/code>mille kavatsen j\u00e4rgmises etapis m\u00e4\u00e4ratleda. Selle funktsiooni saate m\u00e4\u00e4ratleda oma functions.php<\/code>.<\/p>\n
function load_posts_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_more_posts', 'security');\n\u00a0\u00a0\u00a0\u00a0$paged = $_POST['page'];\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => $paged,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0endif;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
N\u00fc\u00fcd, kui kl\u00f5psate nupul "Laadi rohkem", laadib j\u00e4rgmised postitused Ajaxi kaudu ja tagastab selle vastuseks. Eespool kirjutatud JavaScripti kood k\u00e4sitleb \u00fclej\u00e4\u00e4nud asju.<\/p>\n
Laadige WordPressi postitused Ajaxiga lehel kerimine<\/h3>\n
M\u00f5ni kasutaja ei pruugi soovida Ajaxiga postituste kuvamiseks rohkem nuppu. Selle asemel eelistavad nad, et postitused kuvatakse siis, kui kasutaja j\u00f5uab vaateava l\u00f5ppu.<\/p>\n
Selle saavutamiseks peate kirjutama loogika, mis fikseerib s\u00fcndmuse vaateava l\u00f5pus, \u00fclej\u00e4\u00e4nud kood on sama mis nupul "Laadi rohkem". Allpool on lehe kerimise jQuery kood.<\/p>\n
jQuery(window).scroll(function($) {\n\u00a0\u00a0\u00a0\u00a0if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
See selleks! V\u00f5ite proovida. Tahaksin teada teie m\u00f5tteid ja ettepanekuid allpool toodud kommentaarides.<\/p>\n
seotud artiklid<\/h4>\n