{"id":24563,"date":"2021-05-20T12:20:00","date_gmt":"2021-05-20T09:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24563"},"modified":"2021-10-18T02:15:08","modified_gmt":"2021-10-17T23:15:08","slug":"comment-charger-des-articles-wordpress-avec-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-charger-des-articles-wordpress-avec-ajax\/","title":{"rendered":"Comment charger des articles WordPress avec AJAX"},"content":{"rendered":"

Je dirige une cha\u00eene YouTube<\/a> o\u00f9 je publie des vid\u00e9os li\u00e9es \u00e0 la programmation et aux logiciels. R\u00e9cemment, l’un des abonn\u00e9s m’a demand\u00e9 comment charger un article WordPress avec AJAX. En r\u00e9ponse \u00e0 lui, j’ai d\u00e9cid\u00e9 d’\u00e9crire un article sur sa question. Donc, dans cet article, nous \u00e9tudions comment charger un article WordPress avec AJAX en utilisant un bouton Charger plus et un d\u00e9filement de page.<\/p>\n

La diff\u00e9rence entre le chargement de plus et un d\u00e9filement de page est assez simple. Lorsque vous utilisez le bouton Charger plus, vous devez cliquer sur un bouton pour voir la prochaine s\u00e9rie de messages. Et lors du d\u00e9filement de la page, lorsque vous faites d\u00e9filer jusqu’\u00e0 la fin d’une fen\u00eatre d’affichage, la prochaine s\u00e9rie de publications devrait \u00eatre automatiquement charg\u00e9e.<\/p>\n

Supposons que vous ayez quelques articles et que vous deviez afficher 2 articles au chargement de la page, puis en cliquant sur \u00ab\u00a0Charger plus\u00a0\u00bb ou sur \u00ab\u00a0D\u00e9filement de la page\u00a0\u00bb, les 2 articles suivants devraient s’afficher. Ce processus se poursuivra jusqu’\u00e0 ce que tous vos messages soient affich\u00e9s.<\/p>\n

Cr\u00e9ez une nouvelle page appel\u00e9e ‘Blog’. Pour afficher vos articles sur la page Blog, cr\u00e9ez un mod\u00e8le personnalis\u00e9 page-blog.php<\/code>dans le r\u00e9pertoire de votre th\u00e8me actif.<\/p>\n

D\u00e9sormais, lorsque les utilisateurs visitent votre page de blog, ils devraient voir 2 articles. Alors, ajoutez le code ci-dessous dans votre fichier de mod\u00e8le personnalis\u00e9.<\/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
Ici, j’ai utilis\u00e9 la cl\u00e9 " pagin\u00e9e " et lui ai pass\u00e9 la valeur " 1 ". ‘pagin\u00e9’ est une cl\u00e9 utilis\u00e9e dans WordPress lorsqu’il s’agit de pagination. ‘paged’ => 1 signifie la premi\u00e8re page.<\/p>\n
Vous remarquerez l’\u00e9l\u00e9ment div avec la classe ‘loadmore’. En cliquant sur Charger plus, nous passerons un appel Ajax et obtiendrons la prochaine s\u00e9rie de messages.<\/p>\n
Charger des articles WordPress avec Ajax sur le bouton Charger plus<\/h3>\n
Pour donner un appel Ajax, vous devez inclure le fichier JS dans l’environnement WordPress. Cr\u00e9ez un custom.js<\/code>fichier dans le js<\/code>r\u00e9pertoire, puis ajoutez le code ci-dessous dans le functions.php<\/code>fichier.<\/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
Ensuite, \u00e9crivons un peu de jQuery et donnons un appel Ajax qui en retour donnera les prochains messages.<\/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
Ce que nous faisons ici, c’est que j’ai pris une variable javascript ‘page’ avec la valeur initiale 2 car nous allons commencer par la pagination de la deuxi\u00e8me page. J’incr\u00e9mente cette variable ‘page’ apr\u00e8s avoir re\u00e7u la r\u00e9ponse Ajax. Apr\u00e8s avoir re\u00e7u la r\u00e9ponse, je l’ajoute \u00e0 la liste des messages existants.<\/p>\n
J’ai \u00e9galement utilis\u00e9 le param\u00e8tre d’action en tant que ‘load_posts_by_ajax’ pour un appel Ajax qui doit \u00eatre mapp\u00e9 avec les actions WordPress. Ouvrez votre functions.php<\/code>fichier et ajoutez le code ci-dessous \u00e0 un fichier.<\/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
Dans les actions WordPress ci-dessus, nous appelons la fonction de rappel load_posts_by_ajax_callback<\/code>que je vais d\u00e9finir \u00e0 l’\u00e9tape suivante. Vous pouvez d\u00e9finir cette fonction dans votre 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
Maintenant, lorsque vous cliquez sur le bouton \u00ab\u00a0Charger plus\u00a0\u00bb, il chargera les prochains messages via Ajax et les renverra en r\u00e9ponse. Le code JavaScript \u00e9crit ci-dessus g\u00e9rerait le reste.<\/p>\n
Charger des articles WordPress avec Ajax sur le d\u00e9filement de la page<\/h3>\n
Certains utilisateurs peuvent ne pas vouloir de bouton Charger plus pour afficher les publications avec Ajax. Au lieu de cela, ils pr\u00e9f\u00e8rent que les publications s’affichent une fois que l’utilisateur atteint la fin d’une fen\u00eatre d’affichage.<\/p>\n
Pour y parvenir, vous devez \u00e9crire une logique qui capture l’\u00e9v\u00e9nement \u00e0 la fin d’une fen\u00eatre, le reste du code est le m\u00eame que le bouton \u00ab\u00a0Charger plus\u00a0\u00bb. Vous trouverez ci-dessous le code jQuery pour le d\u00e9filement de page.<\/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
C’est \u00e7a! Vous pouvez aller de l’avant et l’essayer. J’aimerais conna\u00eetre vos pens\u00e9es et suggestions dans les commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n