Załaduj dynamiczną zawartość na Bootstrap Modal w WordPress

Ostatnia aktualizacja paź 18, 2021

Bootstrap Modal służy do dodawania okna dialogowego do Twojej witryny. Możesz użyć Bootstrap Modal do lightboxów, powiadomień i niestandardowych treści. Ostatnio pracowałem nad projektem WordPress, w którym chcieliśmy dynamicznie ładować niestandardowe treści na Bootstrap Modal. W tym artykule dowiemy się, jak załadować dynamiczną zawartość w Bootstrap Modal za pomocą Ajax w WordPress.

Istnieje wiele scenariuszy, w których możesz potrzebować modu Bootstrap z zawartością dynamiczną. Weźmy przykład postów WordPress.

WordPress w większości zależy od typów postów do zarządzania treścią. W WordPress zwykle prowadzimy szczegółową stronę, aby wyświetlić post. Ale w niektórych przypadkach możesz nie mieć wystarczającej ilości treści dla posta. Dlatego zamiast pokazywać treść posta na innej stronie, wolisz pokazać ją w wyskakującym okienku. Możesz mieć kilka postów, więc treść każdego posta powinna ładować się dynamicznie w wyskakującym okienku.

Oto Bootstrap Modal, którego możesz użyć do wyświetlania treści na post użytkownikom końcowym. Wymaga wykonania kilku podstawowych kroków, jak pokazano w następnej części samouczka.

Enqueue Bootstrap Style i JS

Na początek powinieneś dołączyć plik CSS i JS Bootstrap do swojego projektu WordPress. Użyję standardu WordPress do dołączania wymaganych plików JS i CSS. Oprócz plików Bootstrap dodaję też, custom.jsgdzie napiszemy logikę JavaScript.

Otwórz swój functions.phpplik i dodaj do niego poniższy kod.


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' );

Tutaj dołączam pliki Bootstrap bezpośrednio z CDN. Możesz dodać go lokalnie. Dostosuj odpowiednio ścieżkę, jeśli robisz to lokalnie. Do custom.jspliku przypisałem domyślny adres URL Ajax WordPressa i jednorazowy.

Załaduj dynamiczną zawartość na Bootstrap Modal w WordPress

Jak powiedziałem, zamierzam dynamicznie ładować treść posta w Bootstrap Modal. Załóżmy, że utworzyłeś szablon, w którym wystawiasz posty. Każdy post ma przycisk „Wyświetl więcej". Po kliknięciu tego przycisku powinien otworzyć się Bootstrap Modal z zawartością.

Powinieneś mieć własny kod HTML dla tego wpisu. Wszystko, co musisz zrobić, to dodać jeden atrybut danych i wspólną klasę do przycisków. To może być jak poniższe stwierdzenia.


<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>

Użytkownik musi zachować szanowany identyfikator posta dla data-idatrybutu. Nazwa klasy, której tutaj użyłem, to „view-post”. Następnie musisz dodać znacznik Bootstrap Modal w pliku szablonu lub w stopce.


<!-- 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>

Jeśli zauważysz, pozostawiłem tytuł modalny i treść modelu puste, które będziemy ładować dynamicznie. Do Modalu przypisałem id 'postModal’.

Gdy ktoś kliknie przycisk „Wyświetl więcej”, musimy wysłać wywołanie Ajax. W odpowiedzi Ajax wysyłamy tytuł posta oraz treść posta, która następnie dołączana jest w Modalu za pomocą jQuery. Zapisz więc poniższy kod jQuery w custom.jspliku.


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 Call w WordPressie

Z kodu jQuery napisanego powyżej, wysyła wywołanie Ajax z akcją 'load_post_by_ajax’. Musimy zadeklarować tę akcję i dołączyć do niej metodę wywołania zwrotnego. W metodzie wywołania zwrotnego zostanie zapisany nasz rzeczywisty kod.

Zapisz poniższy kod w functions.phppliku.


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();
}

Otóż to! Wypróbuj to rozwiązanie, a zobaczysz, że ładuje dynamiczną zawartość na Bootstrap Modal. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net