Comment afficher le contenu de la publication WordPress dans plusieurs éléments de bloc sans actualisation de la page

Vous pouvez le faire en utilisant jQuery ajax , eh bien, suivez mes instructions étape par étape.

1. Créez un dossier dans votre dossier de thème js , supposons que votre dossier de thème soit vingttwelve, donc il devrait être

 http://yourDomain.com/wp-content/themes/twentytwelve/js 

2. Créez un fichier dans votre js folder et nommez-le myScript.js

3. Dans votre fichier functions.php , ajouter

 add_action('wp_enqueue_scripts','my_theme_scripts_function'); function my_theme_scripts_function() { wp_enqueue_script('myScriptHandler', get_stylesheet_directory_uri() . '/js/myScript.js'); wp_localize_script( 'myScriptHandler', 'myAjax', array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ) ) ); } 

4. Ajoutez également le code suivant dans vos functions.php

 function do_myAjaxFunction() { $post_id = url_to_postid($_POST['post_url']); $post = get_post( $post_id, OBJECT); $response = apply_filters( 'the_content', $post->post_content ); echo $response; die(); } add_action( 'wp_ajax_nopriv_myAjaxHandler', 'do_myAjaxFunction' ); add_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' ); 

5. Maintenant, dans le fichier myScript.js , ajouter le code suivant

 $('.your_post-entry a').click(function(e){ e.preventDefault(); var currentUrl = $(this).attr('href'); $.ajax({ type : 'post', url : myAjax.ajaxUrl, data: { action: 'myAjaxHandler', post_url: currentUrl }, success: function(data){ $('#ajax_post').html(data); } }); }); 

Placez le code ci-dessus dans jQuery(function($){...}); Fonction (l'événement prêt de jQuery). C'est fait! Maintenant, vous pouvez récupérer votre contenu de publication en utilisant ajax .

Explication:

Lorsque vous cliquez sur n'importe quel lien à l'intérieur de l'élément (supposons un div) avec le nom de la classe votre your_post-entry , l'événement de clic déclenchera (Vous le savez) et il enverra une demande de publication à http://yourDomain.com/wp-admin/admin-ajax.php car myAjax.ajaxUrl contient cette url et c'est (objet myAjax) disponible pour notre script via wp_localize_script que nous avons dans nos functions.php . La requête ajax enverra également des variables au tableau $_POST et celles-ci sont action et post_url , le post_url contient le permalink de la publication et admin-ajax.php exécutera notre do_myAjaxFunction qui récupérera le contenu de la publication et l'enverra Au navigateur car nous avons ajouté des actions à l'aide de add_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' ) , ce qui indique au WordPree que chaque fois que vous recevez une requête ajax pour l'action myAjaxHandler , exécutez la fonction do_myAjaxFunction . Le premier add_action est wp_ajax_nopriv_myAjaxHandler , requis pour que la requête ajax fonctionne même lorsque l'utilisateur ne se connecte pas dans le backend wordpress, sans wp_ajax_nopriv_myAjaxHandler la demande ajax ne fonctionnera pas si l'utilisateur n'est pas connecté. Notez la ligne $('#ajax_post').html(data); Dans le rappel de success , il insérez les données renvoyées dans l' element/div avec un id de ajax_post , alors assurez-vous d'utiliser l' id approprié et le nom de la class dans l'événement de clic.

Si vous ne souhaitez pas utiliser ajax pour chaque publication, vous pouvez ajouter / générer une class pour les post links que vous souhaitez utiliser ajax, par exemple, ajaxPost et dans l'événement de clic que vous pouvez utiliser

 $('.your_post-entry a.ajaxPost').click(function(e){ ... }); 

Maintenant, vous savez comment le faire, donc je pense que vous pouvez le faire en utilisant mouseenter au lieu de click si vous devez faire de cette façon (vous avez donné un exemple de mouseenter).

Quelques liens utiles: wp_ajax_ et how-to-use-ajax-in-wordpress