{"id":25416,"date":"2021-06-06T17:42:00","date_gmt":"2021-06-06T14:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25416"},"modified":"2021-10-18T02:08:32","modified_gmt":"2021-10-17T23:08:32","slug":"charger-du-contenu-dynamique-sur-bootstrap-modal-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/charger-du-contenu-dynamique-sur-bootstrap-modal-dans-wordpress\/","title":{"rendered":"Charger du contenu dynamique sur Bootstrap Modal dans WordPress"},"content":{"rendered":"

Bootstrap Modal est utilis\u00e9 pour ajouter une bo\u00eete de dialogue \u00e0 votre site Web. Vous pouvez utiliser Bootstrap Modal pour les visionneuses, les notifications et le contenu personnalis\u00e9. R\u00e9cemment, j’ai travaill\u00e9 sur un projet WordPress dans lequel nous voulions charger dynamiquement du contenu personnalis\u00e9 sur Bootstrap Modal. Dans cet article, nous \u00e9tudions comment charger du contenu dynamique dans Bootstrap Modal en utilisant Ajax dans WordPress.<\/p>\n

Il existe de nombreux sc\u00e9narios dans lesquels vous souhaiterez peut-\u00eatre un modal Bootstrap avec un contenu dynamique. Prenons l’exemple des publications WordPress.<\/p>\n

WordPress d\u00e9pend principalement des types de publication pour g\u00e9rer le contenu. Dans WordPress g\u00e9n\u00e9ralement, nous gardons une page d\u00e9taill\u00e9e pour afficher le message. Mais dans certains cas, vous pourriez ne pas avoir assez de contenu pour la publication. Ainsi, au lieu d’afficher le contenu de la publication sur une autre page, vous pr\u00e9f\u00e9rez l’afficher dans une fen\u00eatre contextuelle. Vous pouvez avoir quelques articles et le contenu de chaque article doit donc se charger dynamiquement dans la fen\u00eatre contextuelle.<\/p>\n

Voici le Bootstrap Modal que vous pouvez utiliser pour afficher le contenu par publication aux utilisateurs finaux. Cela vous oblige \u00e0 suivre quelques \u00e9tapes de base, comme indiqu\u00e9 dans la partie suivante d’un didacticiel.<\/p>\n

Mettre en file d’attente le style Bootstrap et JS<\/h3>\n

Pour commencer, vous devriez avoir inclus les fichiers CSS et JS de Bootstrap dans votre projet WordPress. Je vais utiliser la norme WordPress pour inclure les fichiers JS et CSS requis. Outre les fichiers Bootstrap, j’ajoute \u00e9galement custom.js<\/code>o\u00f9 nous \u00e9crirons la logique JavaScript.<\/p>\n

Ouvrez votre functions.php<\/code>fichier et ajoutez-y le code ci-dessous.<\/p>\n

function artisansweb_scripts() {\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( 'bootstrapcss', 'https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css', array(), false, 'all' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_script('bootstrapjs', 'https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('bootstrapjs');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_script('custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\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( 'view_post' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('custom-script');\n}\nadd_action( 'wp_enqueue_scripts', 'artisansweb_scripts' );<\/code><\/pre>\n
Ici, j’inclus les fichiers Bootstrap directement \u00e0 partir du CDN. Vous voudrez peut-\u00eatre l’ajouter localement. Ajustez le chemin en cons\u00e9quence si vous le faites localement. Au custom.js<\/code>fichier, j’ai attribu\u00e9 l’URL Ajax par d\u00e9faut de WordPress et un nonce.<\/p>\n
Charger du contenu dynamique sur Bootstrap Modal dans WordPress<\/h3>\n
Comme dit, je vais charger dynamiquement le contenu d’un article dans Bootstrap Modal. Supposons que vous ayez cr\u00e9\u00e9 un mod\u00e8le dans lequel vous r\u00e9pertoriez les articles. Chaque publication a un bouton ‘Voir plus’. En cliquant sur ce bouton, Bootstrap Modal devrait s’ouvrir avec le contenu.<\/p>\n
Vous devriez avoir votre propre code HTML pour cette liste. Tout ce que vous avez \u00e0 faire est d’ajouter un attribut de donn\u00e9es et une classe commune aux boutons. Cela peut \u00eatre comme les d\u00e9clarations ci-dessous.<\/p>\n
<button data-id=\"YOUR_POST_ID\" class=\"view-post\"><?php _e('View More'); ?><\/button>\n<button data-id=\"YOUR_POST_ID\" class=\"view-post\"><?php _e('View More'); ?><\/button><\/code><\/pre>\n
L’utilisateur doit conserver un identifiant de publication respect\u00e9 pour l’ data-id<\/code>attribut. Le nom de classe que j’ai utilis\u00e9 ici est ‘view-post’. Ensuite, vous devez ajouter un balisage de Bootstrap Modal dans votre fichier mod\u00e8le ou dans le pied de page.<\/p>\n
<!-- Modal -->\n<div class=\"modal fade\" id=\"postModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"postModalLabel\" aria-hidden=\"true\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-dialog\" role=\"document\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-header\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h5 class=\"modal-title\" id=\"postModalLabel\"><\/h5>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span aria-hidden=\"true\">\u00d7<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Si vous le remarquez, j’ai laiss\u00e9 le titre modal et le corps du mod\u00e8le vides que nous chargerons dynamiquement. J’ai attribu\u00e9 l’identifiant ‘postModal’ au modal.<\/p>\n
Lorsque quelqu’un clique sur le bouton \u00ab\u00a0Voir plus\u00a0\u00bb, nous devons envoyer un appel Ajax. Dans la r\u00e9ponse Ajax, nous envoyons le titre de la publication et le contenu de la publication qui s’ajoute ensuite dans Modal \u00e0 l’aide de jQuery. Alors, \u00e9crivez le code jQuery ci-dessous dans le custom.js<\/code>fichier.<\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.view-post', 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_post_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id': $(this).data('id'),\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\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\u00a0response = JSON.parse(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal h5#postModalLabel').text(response.title);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal .modal-body').html(response.content);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal').modal({show:true});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Appel Ajax dans WordPress<\/h4>\n
\u00c0 partir du code jQuery \u00e9crit ci-dessus, il envoie un appel Ajax avec l’action ‘load_post_by_ajax’. Nous devons d\u00e9clarer cette action et lui attacher une m\u00e9thode de rappel. Dans la m\u00e9thode de rappel, notre code r\u00e9el sera \u00e9crit.<\/p>\n
\u00c9crivez le code ci-dessous dans le functions.php<\/code>fichier.<\/p>\n
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');\n\u00a0\nfunction load_post_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('view_post', 'security');\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'p' => $_POST['id'],\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$posts = new WP_Query( $args );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$arr_response = array();\n\u00a0\u00a0\u00a0\u00a0if ($posts->have_posts()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while($posts->have_posts()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$posts->the_post();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_response = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'title' => get_the_title(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'content' => get_the_content(),\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\u00a0\u00a0\u00a0\u00a0wp_reset_postdata();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0echo json_encode($arr_response);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
C’est \u00e7a! Essayez cette solution et vous la verrez charger du contenu dynamique sur Bootstrap Modal. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n