Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Lorsque mon abonné au blog m’a posé des questions sur un tel tutoriel, je me suis demandé s’il y avait d’autres tutoriels analogiques sur Internet. Et ce que j’ai trouvé sur Google m’a surpris.

En lisant tous ces tutoriels, une chose me devient claire: AJAX n’est pas du tout facile. Mais ce n’est pas vrai!

Étape 1. Chargez le bouton Plus

Sautez simplement cette étape si vous souhaitez charger plus de publications au fur et à mesure que vous faites défiler.

Nous allons commencer par le bouton HTML. Voici juste une règle principale: ne pas afficher le bouton s’il n’y a pas assez de messages. Nous vérifierons avec vous $wp_query->max_num_pages.

<?php
global $wp_query; // you can remove this line if everything works for you
 
// don't display the button if there are not enough posts
if (  $wp_query->max_num_pages > 1 )
	echo '<div class="misha_loadmore">More posts</div>'; // you can use <a> as well
?>

Dans l’image ci-dessous, vous pouvez voir que j’ai choisi le thème Twenty Seventeen car il est bien conçu et assez simple.

WordPress charge plus d'articles avec AJAX
Le bouton Charger plus a été conçu pour le thème WordPress Twenty Seventeen.

J’ai ajouté le bouton juste en dessous de la pagination standard (pour TwentySeventeen – index.php Ligne 55), mais vous pouvez également le supprimer. Pour styliser le bouton en conséquence, utilisez le CSS ci-dessous.

.misha_loadmore{
	background-color: #ddd;
	border-radius: 2px;
	display: block;
	text-align: center;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing:1px;
	cursor:pointer;
	text-transform: uppercase;
	padding: 10px 0;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;  
}
.misha_loadmore:hover{
	background-color: #767676;
	color: #fff;
}

Étape 2. Mettez en file d’attente jQuery et myloadmore.js. Transmettez les paramètres de requête au script.

Eh bien, c’est là que la magie opère. Avec ce petit code, vous pouvez passer les paramètres appropriés au script. Pour cette raison, le bouton peut être utilisé sur toutes les pages – balises, catégories, archives de type de publication personnalisées, recherches, etc. Vous pouvez également l’utiliser pour WooCommerce pour charger plus de produits.

function misha_my_load_more_scripts() {
 
	global $wp_query; 
 
	// In most cases it is already included on the page and this line can be removed
	wp_enqueue_script('jquery');
 
	// register our main script but do not enqueue it yet
	wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
 
	// now the most interesting part
	// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
	// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
	wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
		'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
		'max_page' => $wp_query->max_num_pages
	) );
 
 	wp_enqueue_script( 'my_loadmore' );
}
 
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );

Si vous ne savez toujours pas, le code ci-dessus est pour vous functions.php. Et veuillez noter que mon bouton « Charger plus » n’est personnalisé que pour la boucle principale. Si vous en avez besoin pour une boucle personnalisée, demandez-moi dans les commentaires.

Ils peuvent arriver aussi ajaxurl comme ça admin_url( 'admin-ajax.php' ). Beaucoup de gens oublient ce paramètre et ont reçu l’erreur « Ajaxurl n’est pas défini ».

Étape 3. myloadmore.js – qu’y a-t-il à l’intérieur?

C’est un petit fichier JS, en fait vous pouvez le mettre où vous voulez. Pour simplifier, j’ai décidé de les mettre simplement dans un répertoire de sujets (ligne 9 du code précédent).

Je pense aussi que je devrais vous donner un choix – un bouton pour charger plus d’articles ou simplement faire défiler vers le bas pour charger les articles.

Option 1. Charger plus de bouton

Si vous choisissez l’option 1, vous sautez l’option 2 et vice versa.

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
	$('.misha_loadmore').click(function(){
 
		var button = $(this),
		    data = {
			'action': 'loadmore',
			'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
			'page' : misha_loadmore_params.current_page
		};
 
		$.ajax({ // you can also use $.post here
			url : misha_loadmore_params.ajaxurl, // AJAX handler
			data : data,
			type : 'POST',
			beforeSend : function ( xhr ) {
				button.text('Loading...'); // change the button text, you can also add a preloader image
			},
			success : function( data ){
				if( data ) { 
					button.text( 'More posts' ).prev().before(data); // insert new posts
					misha_loadmore_params.current_page++;
 
					if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
						button.remove(); // if last page, remove the button
 
					// you can also fire the "post-load" event here if you use a plugin that requires it
					// $( document.body ).trigger( 'post-load' );
				} else {
					button.remove(); // if no data, remove the button as well
				}
			}
		});
	});
});

Veuillez noter cette ligne 23 peut être différent pour votre sujet, cela dépend de la structure de votre document HTML. Je pense que vous devriez connaître quelques méthodes de base de traversée DOM jQuery – prev(), next(), parent() etc.

Option 2. Pas de bouton, il suffit de charger les articles pour faire défiler (chargement différé)

jQuery(function($){
	var canBeLoaded = true, // this param allows to initiate the AJAX call only if necessary
	    bottomOffset = 2000; // the distance (in px) from the page bottom when you want to load more posts
 
	$(window).scroll(function(){
		var data = {
			'action': 'loadmore',
			'query': misha_loadmore_params.posts,
			'page' : misha_loadmore_params.current_page
		};
		if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) &amp;&amp; canBeLoaded == true ){
			$.ajax({
				url : misha_loadmore_params.ajaxurl,
				data:data,
				type:'POST',
				beforeSend: function( xhr ){
					// you can also add your own preloader here
					// you see, the AJAX call is in process, we shouldn't run it again until complete
					canBeLoaded = false; 
				},
				success:function(data){
					if( data ) {
						$('#main').find('article:last-of-type').after( data ); // where to insert posts
						canBeLoaded = true; // the ajax is completed, now we can run it again
						misha_loadmore_params.current_page++;
					}
				}
			});
		}
	});
});

Étape 4. wp_ajax_

Il s’agit de la fonction de gestionnaire AJAX. Collez-le dans le vôtre functions.php Déposer.

function misha_loadmore_ajax_handler(){
 
	// prepare our arguments for the query
	$args = json_decode( stripslashes( $_POST['query'] ), true );
	$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
	$args['post_status'] = 'publish';
 
	// it is always better to use WP_Query but not here
	query_posts( $args );
 
	if( have_posts() ) :
 
		// run the loop
		while( have_posts() ): the_post();
 
			// look into your theme code how the posts are inserted, but you can use your own HTML of course
			// do you remember? - my example is adapted for Twenty Seventeen theme
			get_template_part( 'template-parts/post/content', get_post_format() );
			// for the test purposes comment the line above and uncomment the below one
			// the_title();
 
 
		endwhile;
 
	endif;
	die; // here we exit the script and even no wp_reset_query() required!
}
 
 
 
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

Si vous avez des questions, veuillez vérifier Remarques au dessous de.

Plus de tutoriels WordPress AJAX

Misha Rudrastyh

Misha Rudrastyh

J’aime tellement WordPress, WooCommerce et Gutenberg. 12 ans d’expérience.

Avez-vous besoin de l’aide de développeurs personnalisés? Entrer en contact



Source link

Recent Posts