Laden Sie dynamische Inhalte auf Bootstrap Modal in WordPress

Last updated 18. Oktober 2021

Bootstrap Modal wird verwendet, um Ihrer Website einen Dialog hinzuzufügen. Sie können Bootstrap Modal für Leuchtkästen, Benachrichtigungen und benutzerdefinierten Inhalt verwenden. Kürzlich 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.

Es gibt viele Szenarien, in denen Sie möglicherweise ein Bootstrap-Modal mit dynamischem Inhalt wünschen. Nehmen wir das Beispiel von WordPress-Beiträgen.

WordPress hängt hauptsächlich von Beitragstypen ab, um den Inhalt zu verwalten. In WordPress führen wir normalerweise eine detaillierte Seite, um den Beitrag anzuzeigen. In einigen Fällen haben Sie jedoch möglicherweise nicht genügend Inhalt für den Beitrag. Anstatt also Post-Inhalte auf einer anderen Seite anzuzeigen, ziehen Sie es vor, sie in einem Pop-up anzuzeigen. Möglicherweise haben Sie mehrere Beiträge und daher sollte der Inhalt jedes Beitrags dynamisch im Popup geladen werden.

Hier kommt das Bootstrap Modal, mit dem Sie den Endbenutzern Inhalte per Post anzeigen können. Dazu müssen Sie einige grundlegende Schritte ausführen, die im nächsten Teil eines Tutorials gezeigt werden.

Enqueue-Bootstrap-Stil und JS

Für 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üge ich auch hinzu, custom.jswo wir die JavaScript-Logik schreiben werden.

Öffnen Sie Ihre functions.phpDatei und fügen Sie den unten stehenden Code ein.

function artisansweb_scripts() {
    wp_enqueue_style( 'bootstrapcss', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', array(), false, 'all' );
     
    wp_register_script('bootstrapjs', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), false, true);
    wp_enqueue_script('bootstrapjs');
 
    wp_register_script('custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'view_post' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
    wp_enqueue_script('custom-script');
}
add_action( 'wp_enqueue_scripts', 'artisansweb_scripts' );

Hier füge ich Bootstrap-Dateien direkt aus dem CDN ein. Sie können es lokal hinzufügen. Passen Sie den Pfad entsprechend an, wenn Sie dies lokal tun. Der custom.jsDatei habe ich die Standard-Ajax-URL von WordPress und eine Nonce zugewiesen.

Laden Sie dynamische Inhalte auf Bootstrap Modal in WordPress

Wie gesagt, ich werde einen Beitragsinhalt dynamisch in Bootstrap Modal laden. Angenommen, Sie haben eine Vorlage erstellt, in der Sie Beiträge auflisten. Jeder Beitrag hat eine Schaltfläche "Mehr anzeigen". Wenn Sie auf diese Schaltfläche klicken, sollte sich Bootstrap Modal mit dem Inhalt öffnen.

Sie sollten Ihren eigenen HTML-Code für diese Auflistung haben. Sie müssen lediglich ein Datenattribut und eine gemeinsame Klasse zu den Schaltflächen hinzufügen. Es kann wie die folgenden Aussagen sein.

<button data-id="YOUR_POST_ID" class="view-post"><?php _e('View More'); ?></button>
<button data-id="YOUR_POST_ID" class="view-post"><?php _e('View More'); ?></button>

Der Benutzer muss eine respektierte Beitrags-ID für das data-idAttribut beibehalten. Der Klassenname, den ich hier verwendet habe, ist ‘view-post’. Als nächstes müssen Sie entweder in Ihrer Vorlagendatei oder in der Fußzeile ein Markup von Bootstrap Modal hinzufügen.

<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="postModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                 
              </div>
        </div>
      </div>
</div>

Wenn Sie bemerken, habe ich den modalen Titel und den Modellkörper leer gelassen, die wir dynamisch laden. Ich habe dem Modal die ID ‘postModal’ zugewiesen.

Wenn jemand auf die Schaltfläche "Mehr anzeigen" klickt, müssen wir einen Ajax-Anruf senden. In der Ajax-Antwort senden wir Beitragstitel und Beitragsinhalt, die dann in Modal mit jQuery angehängt werden. Schreiben Sie also den folgenden jQuery-Code in die custom.jsDatei.

jQuery(function($) {
    $('body').on('click', '.view-post', function() {
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };
  
        $.post(blog.ajaxurl, data, function(response) {
            response = JSON.parse(response);
            $('#postModal h5#postModalLabel').text(response.title);
            $('#postModal .modal-body').html(response.content);
 
            $('#postModal').modal({show:true});
        });
    });
});

Ajax-Aufruf in WordPress

Aus dem oben geschriebenen jQuery-Code sendet es einen Ajax-Aufruf mit der Aktion ‘load_post_by_ajax’. Wir müssen diese Aktion deklarieren und ihr eine Callback-Methode anhängen. In der Callback-Methode wird unser eigentlicher Code geschrieben.

Schreiben Sie den folgenden Code in die functions.phpDatei.

add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');
 
function load_post_by_ajax_callback() {
    check_ajax_referer('view_post', 'security');
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'p' => $_POST['id'],
    );
 
    $posts = new WP_Query( $args );
 
    $arr_response = array();
    if ($posts->have_posts()) {
 
        while($posts->have_posts()) {
 
            $posts->the_post();
 
            $arr_response = array(
                'title' => get_the_title(),
                'content' => get_the_content(),
            );
        }
        wp_reset_postdata();
    }
 
    echo json_encode($arr_response);
 
    wp_die();
}

Das ist es! Probieren Sie diese Lösung aus und Sie werden sehen, dass dynamische Inhalte auf Bootstrap Modal geladen werden. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net