Người Viết : ViKiMi Editor

Hướng dẫn hiển thị bài Post bằng Bootstrap Modal + Ajax, hiệu ứng Popup đẹp mắt 100 %
Việc hiển thị nội dung bài Post trên một trang single.php của WordPress đã trở nên vô cùng đơn giản và dễ sử dụng. Nhưng như vậy chắc hẳn không thể đáp ứng trong các nhu cầu khác nhau. Để tăng khả năng hiển thị chắc hẳn có rất nhiều các để hiển thị nội dung cho phép người dùng cảm thấy đẹp mắt, hài lòng với những gì tìm kiếm.
Vậy với sự kết hợp giữa thiết kế mà Bootstrap và AJAX chúng ta có thể làm gì?
Chắc chắn rằng chúng ta sẽ có những cách thể hiển mới mẻ hơn. Với cách thể hiện mới hơn. Chúng ta chắc chắn sẽ có những hiển thị mới như lightboxes, notifications, nội dung hiển thị tuỳ chỉnh… Những cách này cho phép chúng ta hiển thị thông tin của một bài Post rất đẹp mắt.
Đặc biệt, với những Post ngắn và cần tạo một hiệu ứng khiển người dùng cảm thấy yêu thích. Đây chính là một sự kết hợp hoàn hảo.
Lưu ý : Bootstrap Modal sẽ giúp chúng ta thêm Dialog/ Pop-up vào thiết kế Website.
Chúng ta sẽ sử dụng Bootstrap Modal + jQuery AJAX cho thiết kế này.
(Tương tự, với các thiết kế khác của Bootstrap chúng ta cũng có thể tạo ra nhiều tuỳ chỉnh theo ý muốn.)
Chúng ta sẽ có những bước thiết kế như sau :
BƯỚC 1 : Tạo một WordPress template ( Đây là nơi bạn có danh sách các bài viết sẽ được hiển thị chi tiết bằng Bootstrap Modal ). Template này bạn có thể sử dụng trong cách trường hợp khác nhau.
Nội Dung Code :
<?php if ( $myposts->have_posts() ) : ?> <?php while ( $myposts->have_posts() ) : $myposts->the_post(); ?> <div> <?php the_title(); ?> <button data-id="<?php the_ID(); ?>" class="view-post"><?php _e('View More'); ?></button> </div> <?php endwhile; ?> <?php endif; ?>
Thiết kế này cho phép người dùng có thể xem nội dung bài viết bằng cách Click vào nút “View More”. Chúng ta cũng cần chú ý rằng luôn bảo đảm mã ID của bài Post khi thực hiện các xử lý phải được bảo vệ, chính vì vậy data-id sẽ luôn được bảo vệ nhằm tránh những tấn công không mong muốn.
BƯỚC 2 : Thực hiện tạo Bootstrap Modal để hiển thị chi tiết bài Post.
Bạn có thể để Bootstrap Modal trong Tệp mẫu bên trên hoặc bạn cũng có thể thêm vào Footer. Thông thường thì bạn có thể để ở Footer theo ý đồ thiết kế.
Cũng lưu ý chúng ta sẽ tạo Modal Title và Modal Body là trống, vì chúng ta sẽ Load các thông tin từ Bài Post trong Database.
<div class="modal" id="postModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="postModalLabel"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"></div> </div> </div> </div>
Khi khách truy cập nhấn vào nút “View More”, Lệnh AJAX sẽ được thực thi. Chúng ta sẽ hiển thị thông tin tiêu đề bài viết và nội dung bài viết vào Bootstrap Modal. Tất nhiên, tại đây chúng ta sử dụng jQuery AJAX.
BƯỚC 3 : Tạo jQuery AJAX trong file postmodal.js
Nội dung xử lý Ajax :
jQuery(function($) {
$('body').on('click', '.view-post', function() {
var data = {
'action': 'load_post_by_ajax',
'id': $(this).data('id'), /* id của button view more */
'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);
var postModal = new bootstrap.Modal(document.getElementById('postModal'));
postModal.show();
});
});
});
Chúng ta thấy rằng, lệnh được thực thi thành công. Phản hồi Ajax sẽ được hiển thị vào Bootstrap Modal như bên trên. Chúng ta sẽ thêm thông tin vào các phần tử truy vấn phù hợp.
Và công việc tiếp đến là hiển thị Bootstrap Modal.
Lưu ý : Bạn có thể sử dụng get Element By Id hoặc truy vấn phần tử của jQuery.
BƯỚC 4 : Tạo nội dung Action phù hợp với action ở bước 3 + Khai báo postmodal.js
+ Khai báo postmodal.js tại file function.php của WordPress
Tại đây có tạo một nonce phù hợp với Button “View More” ở bước 1 / Class = “view – post”. Để tránh những tấn công không mong muốn
function postmodal_scripts() {
wp_register_script('postmodal-script', get_stylesheet_directory_uri(). '/js/postmodal.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( 'postmodal-script', 'blog', $script_data_array );
wp_enqueue_script('postmodal-script');
}
add_action('wp_enqueue_scripts', 'postmodal_scripts');
+ Nội dung Action sẽ thêm tại file function.php của WordPress
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',
'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();
}
Xử lý này sẽ trả về title và content của bài viết và phản hồi chúng dưới dạng jSON data. Khi đó Bootstrap Modal sẽ show những gì cần thiết cho khách truy cập.
Bạn có thể xem ở những bài xử lý jQuery AJAX trước đây để hiểu về cách xử lý này.
Như vậy đã tạo thành công hiển thị Post / Bài viết bằng Bootstrap Modal + jQuery AJAX.