{"id":25363,"date":"2021-06-06T17:44:00","date_gmt":"2021-06-06T14:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25363"},"modified":"2021-10-18T02:33:47","modified_gmt":"2021-10-17T23:33:47","slug":"laden-sie-dynamische-inhalte-auf-bootstrap-modal-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/laden-sie-dynamische-inhalte-auf-bootstrap-modal-in-wordpress\/","title":{"rendered":"Laden Sie dynamische Inhalte auf Bootstrap Modal in WordPress"},"content":{"rendered":"

Bootstrap Modal wird verwendet, um Ihrer Website einen Dialog hinzuzuf\u00fcgen. Sie k\u00f6nnen Bootstrap Modal f\u00fcr Leuchtk\u00e4sten, Benachrichtigungen und benutzerdefinierten Inhalt verwenden. K\u00fcrzlich habe ich an einem WordPress-Projekt gearbeitet, bei dem wir benutzerdefinierten Inhalt dynamisch auf Bootstrap Modal laden wollten. In diesem Artikel untersuchen wir, wie dynamische Inhalte in Bootstrap Modal mit Ajax in WordPress geladen werden.<\/p>\n

Es gibt viele Szenarien, in denen Sie m\u00f6glicherweise ein Bootstrap-Modal mit dynamischem Inhalt w\u00fcnschen. Nehmen wir das Beispiel von WordPress-Beitr\u00e4gen.<\/p>\n

WordPress h\u00e4ngt haupts\u00e4chlich von Beitragstypen ab, um den Inhalt zu verwalten. In WordPress f\u00fchren wir normalerweise eine detaillierte Seite, um den Beitrag anzuzeigen. In einigen F\u00e4llen haben Sie jedoch m\u00f6glicherweise nicht gen\u00fcgend Inhalt f\u00fcr den Beitrag. Anstatt also Post-Inhalte auf einer anderen Seite anzuzeigen, ziehen Sie es vor, sie in einem Pop-up anzuzeigen. M\u00f6glicherweise haben Sie mehrere Beitr\u00e4ge und daher sollte der Inhalt jedes Beitrags dynamisch im Popup geladen werden.<\/p>\n

Hier kommt das Bootstrap Modal, mit dem Sie den Endbenutzern Inhalte per Post anzeigen k\u00f6nnen. Dazu m\u00fcssen Sie einige grundlegende Schritte ausf\u00fchren, die im n\u00e4chsten Teil eines Tutorials gezeigt werden.<\/p>\n

Enqueue-Bootstrap-Stil und JS<\/h3>\n

F\u00fcr den Einstieg sollten Sie die CSS- und JS-Datei von Bootstrap in Ihr WordPress-Projekt eingebunden haben. Ich werde den WordPress-Standard verwenden, um erforderliche JS- und CSS-Dateien einzubinden. Abgesehen von Bootstrap-Dateien f\u00fcge ich auch hinzu, custom.js<\/code>wo wir die JavaScript-Logik schreiben werden.<\/p>\n

\u00d6ffnen Sie Ihre functions.php<\/code>Datei und f\u00fcgen Sie den unten stehenden Code ein.<\/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
Hier f\u00fcge ich Bootstrap-Dateien direkt aus dem CDN ein. Sie k\u00f6nnen es lokal hinzuf\u00fcgen. Passen Sie den Pfad entsprechend an, wenn Sie dies lokal tun. Der custom.js<\/code>Datei habe ich die Standard-Ajax-URL von WordPress und eine Nonce zugewiesen.<\/p>\n
Laden Sie dynamische Inhalte auf Bootstrap Modal in WordPress<\/h3>\n
Wie gesagt, ich werde einen Beitragsinhalt dynamisch in Bootstrap Modal laden. Angenommen, Sie haben eine Vorlage erstellt, in der Sie Beitr\u00e4ge auflisten. Jeder Beitrag hat eine Schaltfl\u00e4che "Mehr anzeigen". Wenn Sie auf diese Schaltfl\u00e4che klicken, sollte sich Bootstrap Modal mit dem Inhalt \u00f6ffnen.<\/p>\n
Sie sollten Ihren eigenen HTML-Code f\u00fcr diese Auflistung haben. Sie m\u00fcssen lediglich ein Datenattribut und eine gemeinsame Klasse zu den Schaltfl\u00e4chen hinzuf\u00fcgen. Es kann wie die folgenden Aussagen sein.<\/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
Der Benutzer muss eine respektierte Beitrags-ID f\u00fcr das data-id<\/code>Attribut beibehalten. Der Klassenname, den ich hier verwendet habe, ist ‚view-post‘. Als n\u00e4chstes m\u00fcssen Sie entweder in Ihrer Vorlagendatei oder in der Fu\u00dfzeile ein Markup von Bootstrap Modal hinzuf\u00fcgen.<\/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
Wenn Sie bemerken, habe ich den modalen Titel und den Modellk\u00f6rper leer gelassen, die wir dynamisch laden. Ich habe dem Modal die ID ‚postModal‘ zugewiesen.<\/p>\n
Wenn jemand auf die Schaltfl\u00e4che "Mehr anzeigen" klickt, m\u00fcssen wir einen Ajax-Anruf senden. In der Ajax-Antwort senden wir Beitragstitel und Beitragsinhalt, die dann in Modal mit jQuery angeh\u00e4ngt werden. Schreiben Sie also den folgenden jQuery-Code in die custom.js<\/code>Datei.<\/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
Ajax-Aufruf in WordPress<\/h4>\n
Aus dem oben geschriebenen jQuery-Code sendet es einen Ajax-Aufruf mit der Aktion ‚load_post_by_ajax‘. Wir m\u00fcssen diese Aktion deklarieren und ihr eine Callback-Methode anh\u00e4ngen. In der Callback-Methode wird unser eigentlicher Code geschrieben.<\/p>\n
Schreiben Sie den folgenden Code in die functions.php<\/code>Datei.<\/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
Das ist es! Probieren Sie diese L\u00f6sung aus und Sie werden sehen, dass dynamische Inhalte auf Bootstrap Modal geladen werden. Ich w\u00fcrde gerne Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h4>\n