{"id":24545,"date":"2021-05-20T12:47:00","date_gmt":"2021-05-20T09:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24545"},"modified":"2021-10-17T20:47:58","modified_gmt":"2021-10-17T17:47:58","slug":"kuinka-ladata-wordpress-viesteja-ajax-lla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-wordpress-viesteja-ajax-lla\/","title":{"rendered":"Kuinka ladata WordPress-viestej\u00e4 AJAX: lla"},"content":{"rendered":"

K\u00e4yt\u00e4n YouTube-kanavaa,<\/a> johon l\u00e4het\u00e4n ohjelmointiin ja ohjelmistoihin liittyvi\u00e4 videoita. \u00c4skett\u00e4in yksi tilaaja kysyi minulta, kuinka WordPress-viesti ladataan AJAX: lla. Vastauksena h\u00e4nelle p\u00e4\u00e4tin kirjoittaa viestin h\u00e4nen kysymyksest\u00e4\u00e4n. Joten t\u00e4ss\u00e4 artikkelissa tutkitaan, miten WordPress-viesti ladataan AJAX: lla k\u00e4ytt\u00e4m\u00e4ll\u00e4 lis\u00e4\u00e4 latauspainiketta ja sivun vierityst\u00e4.<\/p>\n

Latauksen lis\u00e4\u00e4misen ja sivun vierityksen v\u00e4linen ero on melko yksinkertainen. Kun k\u00e4yt\u00e4t Lataa lis\u00e4\u00e4 -painiketta, sinun on napsautettava painiketta n\u00e4hd\u00e4ksesi seuraavan joukon viestej\u00e4. Ja kun vierit\u00e4t n\u00e4kym\u00e4n loppuun, vieritys sivun vieress\u00e4 seuraavan postitusjoukon pit\u00e4isi latautua automaattisesti.<\/p>\n

Oletetaan, ett\u00e4 sinulla on pari viesti\u00e4 ja sinun on n\u00e4ytett\u00e4v\u00e4 2 viesti\u00e4 sivulatauksessa ja napsauttamalla sitten Lataa lis\u00e4\u00e4 tai Sivun vieritys tulee n\u00e4kyviin seuraavat 2 viesti\u00e4. T\u00e4t\u00e4 prosessia jatkettaisiin, kunnes kaikki viestisi n\u00e4ytet\u00e4\u00e4n.<\/p>\n

Luo uusi sivu nimelt\u00e4 Blogi. Jos haluat n\u00e4ytt\u00e4\u00e4 viestej\u00e4si Blogi-sivulla, luo mukautettu malli page-blog.php<\/code>aktiivisen teeman hakemistoon.<\/p>\n

Nyt kun k\u00e4ytt\u00e4j\u00e4t vierailevat blogisivullasi, heid\u00e4n pit\u00e4isi n\u00e4hd\u00e4 2 viesti\u00e4. Lis\u00e4\u00e4 siis alla oleva koodi mukautettuun mallitiedostoon.<\/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
T\u00e4ss\u00e4 k\u00e4ytin ’paged’ -avainta ja v\u00e4litin sille arvon ’1’. ’paged’ on avain, jota k\u00e4ytet\u00e4\u00e4n WordPressiss\u00e4 sivutettaessa. ’paged’ => 1 tarkoittaa ensimm\u00e4ist\u00e4 sivua.<\/p>\n
Huomaa div-elementin, jonka luokka on ’loadmore’. Napsauttamalla Lataa lis\u00e4\u00e4, soitamme Ajax-puhelun ja saamme seuraavan joukon viestej\u00e4.<\/p>\n
Lataa WordPress-viestej\u00e4 Ajaxilla Lis\u00e4\u00e4 painiketta<\/h3>\n
Ajax-puhelun soittamiseksi sinun on sis\u00e4llytett\u00e4v\u00e4 JS-tiedosto WordPress-ymp\u00e4rist\u00f6\u00f6n. Luo custom.js<\/code>tiedosto js<\/code>hakemistoon ja lis\u00e4\u00e4 sitten alla oleva koodi functions.php<\/code>tiedostoon.<\/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
Seuraavaksi kirjoitetaan v\u00e4h\u00e4n jQuery\u00e4 ja annetaan Ajax-kutsu, joka vastineeksi antaa seuraavat viestit.<\/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
Mit\u00e4 teemme t\u00e4\u00e4ll\u00e4, otin javascript-muuttujan "sivu", jonka alkuarvo oli 2, koska aloitamme toisen sivun sivutuksella. Lis\u00e4\u00e4n t\u00e4t\u00e4 ’sivu’ -muuttujaa saatuani Ajax-vastauksen. Saatuani vastauksen liit\u00e4n sen olemassa oleviin viesteihin.<\/p>\n
K\u00e4ytin my\u00f6s toimintoparametria nimell\u00e4 ’load_posts_by_ajax’ Ajax-puheluun, joka on kartoitettava WordPress-toiminnoilla. Avaa functions.php<\/code>tiedosto ja lis\u00e4\u00e4 alla oleva koodi tiedostoon.<\/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
Edell\u00e4 mainituissa WordPress-toiminnoissa kutsumme takaisinsoittotoimintoa, load_posts_by_ajax_callback<\/code>jonka aion m\u00e4\u00e4ritt\u00e4\u00e4 seuraavassa vaiheessa. Voit m\u00e4\u00e4ritt\u00e4\u00e4 t\u00e4m\u00e4n toiminnon omassa 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
Nyt kun napsautat Lataa lis\u00e4\u00e4 -painiketta, se lataa seuraavat viestit Ajaxin kautta ja palauttaa sen vastauksena. Yll\u00e4 kirjoitettu JavaScript-koodi k\u00e4sittelee loput tavarat.<\/p>\n
Lataa WordPress-viestej\u00e4 Ajaxilla sivun vieritykseen<\/h3>\n
Jotkut k\u00e4ytt\u00e4j\u00e4t eiv\u00e4t ehk\u00e4 halua ladata lis\u00e4\u00e4 -painiketta n\u00e4ytt\u00e4\u00e4ksesi viestit Ajaxilla. Sen sijaan he haluavat, ett\u00e4 viestit n\u00e4kyv\u00e4t, kun k\u00e4ytt\u00e4j\u00e4 saavuttaa n\u00e4kym\u00e4n loppuun.<\/p>\n
T\u00e4m\u00e4n saavuttamiseksi sinun on kirjoitettava logiikka, joka tallentaa tapahtuman n\u00e4kym\u00e4n loppuun, loppuosa koodi on sama kuin Lataa lis\u00e4\u00e4 -painike. Alla on jQuery-koodi sivun vieritykseen.<\/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
Se siit\u00e4! Voit menn\u00e4 eteenp\u00e4in ja kokeilla sit\u00e4. Haluaisin tiet\u00e4\u00e4 ajatuksesi ja ehdotuksesi alla olevissa kommenteissa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n