{"id":28131,"date":"2021-05-20T12:56:00","date_gmt":"2021-05-20T09:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28131"},"modified":"2021-10-18T03:43:32","modified_gmt":"2021-10-18T00:43:32","slug":"jak-zaladowac-posty-wordpress-za-pomoca-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zaladowac-posty-wordpress-za-pomoca-ajax\/","title":{"rendered":"Jak za\u0142adowa\u0107 posty WordPress za pomoc\u0105 AJAX"},"content":{"rendered":"

Prowadz\u0119 kana\u0142 YouTube, na<\/a> kt\u00f3rym zamieszczam filmy zwi\u0105zane z programowaniem i oprogramowaniem. Niedawno jeden z subskrybent\u00f3w zapyta\u0142 mnie, jak za\u0142adowa\u0107 post WordPress za pomoc\u0105 AJAX. W odpowiedzi na jego pytanie postanowi\u0142em napisa\u0107 posta na jego pytanie. W tym artykule dowiemy si\u0119, jak za\u0142adowa\u0107 post WordPress za pomoc\u0105 AJAX za pomoc\u0105 przycisku \u0142adowania wi\u0119cej i przewijania strony.<\/p>\n

R\u00f3\u017cnica mi\u0119dzy \u0142adowaniem wi\u0119cej a przewijaniem strony jest do\u015b\u0107 prosta. Korzystaj\u0105c z przycisku Load more, musisz klikn\u0105\u0107 przycisk, aby zobaczy\u0107 nast\u0119pny zestaw post\u00f3w. A podczas przewijania strony, gdy przewiniesz do ko\u0144ca okienka ekranu, nast\u0119pny zestaw post\u00f3w powinien zosta\u0107 automatycznie za\u0142adowany.<\/p>\n

Za\u0142\u00f3\u017cmy, \u017ce masz kilka post\u00f3w i musisz wy\u015bwietli\u0107 2 posty podczas \u0142adowania strony, a nast\u0119pnie klikaj\u0105c \u201eZa\u0142aduj wi\u0119cej" lub \u201ePrzewijanie strony” powinny wy\u015bwietli\u0107 si\u0119 kolejne 2 posty. Ten proces b\u0119dzie trwa\u0142 do momentu wy\u015bwietlenia wszystkich Twoich post\u00f3w.<\/p>\n

Utw\u00f3rz now\u0105 stron\u0119 o nazwie \u201eBlog”. Aby wy\u015bwietli\u0107 swoje posty na stronie Blog, utw\u00f3rz niestandardowy szablon page-blog.php<\/code>w katalogu aktywnego motywu.<\/p>\n

Teraz, gdy u\u017cytkownicy odwiedzaj\u0105 stron\u0119 Twojego bloga, powinni zobaczy\u0107 2 posty. Dodaj wi\u0119c poni\u017cszy kod do niestandardowego pliku szablonu.<\/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
Tutaj u\u017cy\u0142em klucza \u201epaged” i przekaza\u0142em do niego warto\u015b\u0107 \u201e1″. \u201epaged” to klucz u\u017cywany w WordPressie, je\u015bli chodzi o paginacj\u0119. 'paged’ => 1 oznacza pierwsz\u0105 stron\u0119.<\/p>\n
Zauwa\u017cy\u0142by\u015b element div z klas\u0105 'loadmore’. Po klikni\u0119ciu Load More, zadzwonimy do Ajaxu i otrzymamy nast\u0119pny zestaw post\u00f3w.<\/p>\n
Za\u0142aduj posty WordPress za pomoc\u0105 Ajax za pomoc\u0105 przycisku Za\u0142aduj wi\u0119cej<\/h3>\n
Aby wykona\u0107 wywo\u0142anie Ajax, musisz do\u0142\u0105czy\u0107 plik JS do \u015brodowiska WordPress. Utw\u00f3rz custom.js<\/code>plik w js<\/code>katalogu, a nast\u0119pnie dodaj poni\u017cszy kod w functions.php<\/code>pliku.<\/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
Nast\u0119pnie napiszmy troch\u0119 jQuery i dajmy wywo\u0142anie Ajax, kt\u00f3re w zamian da kolejne posty.<\/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
To, co tutaj robimy, to wzi\u0105\u0142em zmienn\u0105 javascript 'page’ z pocz\u0105tkow\u0105 warto\u015bci\u0105 2, poniewa\u017c zaczniemy od paginacji drugiej strony. Zwi\u0119kszam t\u0119 zmienn\u0105 \u201estrony” po otrzymaniu odpowiedzi Ajax. Po otrzymaniu odpowiedzi do\u0142\u0105czam j\u0105 do istniej\u0105cej listy post\u00f3w.<\/p>\n
U\u017cy\u0142em r\u00f3wnie\u017c parametru akcji jako 'load_posts_by_ajax’ do wywo\u0142ania Ajax, kt\u00f3re musi by\u0107 zmapowane z akcjami WordPressa. Otw\u00f3rz functions.php<\/code>plik i dodaj poni\u017cszy kod do pliku.<\/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
W powy\u017cszych akcjach WordPressa wywo\u0142ujemy funkcj\u0119 callback, load_posts_by_ajax_callback<\/code>kt\u00f3r\u0105 zdefiniuj\u0119 w nast\u0119pnym kroku. Mo\u017cesz zdefiniowa\u0107 t\u0119 funkcj\u0119 w swoim 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
Teraz, gdy klikniesz przycisk \u201eZa\u0142aduj wi\u0119cej”, za\u0142aduje nast\u0119pne posty przez Ajax i zwr\u00f3ci je w odpowiedzi. Napisany powy\u017cej kod JavaScript poradzi\u0142by sobie z reszt\u0105.<\/p>\n
Za\u0142aduj posty WordPress za pomoc\u0105 Ajax na przewijaniu strony<\/h3>\n
Niekt\u00f3rzy u\u017cytkownicy mog\u0105 nie chcie\u0107 przycisku \u0142adowania wi\u0119cej do wy\u015bwietlania post\u00f3w za pomoc\u0105 Ajax. Zamiast tego wol\u0105, aby posty by\u0142y wy\u015bwietlane, gdy u\u017cytkownik dotrze do ko\u0144ca widocznego obszaru.<\/p>\n
Aby to osi\u0105gn\u0105\u0107, musisz napisa\u0107 logik\u0119, kt\u00f3ra przechwytuje zdarzenie na ko\u0144cu rzutni, reszta kodu jest taka sama, jak przycisk \u201eZa\u0142aduj wi\u0119cej”. Poni\u017cej znajduje si\u0119 kod jQuery do przewijania strony.<\/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
Ot\u00f3\u017c \u200b\u200bto! Mo\u017cesz \u015bmia\u0142o spr\u00f3bowa\u0107. Chcia\u0142abym pozna\u0107 Wasze przemy\u015blenia i sugestie w komentarzach poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n