Cách thêm lightbox trong WordPress

Bài viết chia sẻ cách thêm lightbox trong WordPress, bạn có thể sử dụng các plugin hoặc sử dụng thủ công để dễ dàng kích hoạt và hiển thị nội dung trong lightbox, chẳng hạn như hình ảnh, video, hoặc thậm chí là các biểu mẫu.

Mục lục bài viết

1. Sử dụng Plugin để Thêm Lightbox

Một trong những cách dễ nhất để thêm lightbox là sử dụng một plugin. Dưới đây là một số plugin phổ biến:

1.1. Sử dụng Plugin Simple Lightbox

Bước 1: Cài đặt và Kích hoạt Plugin Simple Lightbox

Truy cập vào Dashboard của WordPress.
Vào Plugins > Add New.
Tìm kiếm “Simple Lightbox” và nhấn Install Now.
Sau khi cài đặt xong, nhấn Activate để kích hoạt plugin.

Bước 2: Tự động Kích hoạt Lightbox

Simple Lightbox tự động kích hoạt cho tất cả các liên kết hình ảnh trên trang web của bạn. Bạn không cần phải làm gì thêm nếu chỉ muốn lightbox cho hình ảnh.

Bước 3: Tùy chỉnh Lightbox

Vào Appearance > Lightbox để tùy chỉnh các thiết lập như hiệu ứng chuyển động, kích thước, màu sắc nền, và nhiều hơn nữa.

1.2. Sử dụng Plugin WP Featherlight

Bước 1: Cài đặt và Kích hoạt Plugin WP Featherlight

Truy cập vào Dashboard của WordPress.
Vào Plugins > Add New.
Tìm kiếm “WP Featherlight” và nhấn Install Now.
Sau khi cài đặt xong, nhấn Activate để kích hoạt plugin.

Bước 2: Sử dụng WP Featherlight

WP Featherlight sẽ tự động kích hoạt lightbox cho tất cả các liên kết hình ảnh và các nội dung được hỗ trợ (như video).
Nếu bạn muốn kích hoạt lightbox cho một liên kết cụ thể, bạn có thể thêm class="featherlight" vào liên kết đó.

<a href="path/to/your-image.jpg" class="featherlight">Mở hình ảnh trong Lightbox</a>

1.3. Sử dụng Plugin Responsive Lightbox & Gallery

Bước 1: Cài đặt và Kích hoạt Plugin

Truy cập vào Dashboard của WordPress.
Vào Plugins > Add New.
Tìm kiếm “Responsive Lightbox & Gallery” và nhấn Install Now.
Sau khi cài đặt xong, nhấn Activate.

Bước 2: Thiết lập Lightbox

Sau khi kích hoạt, bạn sẽ thấy một mục Lightbox trong bảng điều khiển.
Tại đây, bạn có thể thiết lập loại lightbox mà bạn muốn sử dụng (PrettyPhoto, FancyBox, SwipeBox, v.v.) và tùy chỉnh các thiết lập khác như hiệu ứng, tốc độ, và tùy chọn mở lightbox.

Bước 3: Sử dụng Lightbox

Plugin này sẽ tự động áp dụng lightbox cho các hình ảnh trong bài viết hoặc trang của bạn.
Bạn cũng có thể sử dụng các shortcode để chèn gallery hoặc nội dung khác vào trong lightbox.

2. Thêm Lightbox Thủ Công bằng jQuery (Dành cho developer)

Nếu bạn muốn có nhiều tùy biến hơn và biết lập trình, bạn có thể thêm lightbox bằng cách tự tải jQuery lightbox library như Magnific Popup hoặc FancyBox.

Bước 1: Tải Library jQuery

Tải về library từ trang web chính thức của Magnific Popup hoặc FancyBox.
Tải lên các tệp tin này vào thư mục theme của bạn (thường là trong thư mục js và css).

Bước 2: Thêm jQuery và CSS vào Theme

Thêm đoạn mã sau vào file functions.php của theme

function enqueue_lightbox_scripts() {
    wp_enqueue_style('lightbox-css', get_template_directory_uri() . '/css/magnific-popup.css');
    wp_enqueue_script('lightbox-js', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_lightbox_scripts');

Bước 3: Kích Hoạt Lightbox

Sử dụng jQuery để kích hoạt lightbox cho các liên kết hoặc phần tử mà bạn muốn. Thêm đoạn mã này vào trong footer.php hoặc tệp JS tùy chỉnh của bạn

jQuery(document).ready(function($) {
    $('.your-selector').magnificPopup({
        type: 'image',
        gallery: {
            enabled: true
        }
    });
});

Thay .your-selector bằng class hoặc ID của phần tử mà bạn muốn kích hoạt lightbox.

3. Kiểm Tra và Điều Chỉnh

Sau khi thiết lập, hãy kiểm tra trang web để đảm bảo rằng lightbox hoạt động đúng cách.
Tùy chỉnh thêm dựa trên yêu cầu của bạn.

Kết lại

Hy vọng với hướng dẫn trên, bạn đã có thể dễ dàng thêm lightbox vào trang WordPress của mình. Dù bạn chọn sử dụng plugin đơn giản hay tích hợp thủ công, lightbox chắc chắn sẽ giúp nội dung của bạn trở nên sinh động và thu hút hơn.

5/5 - (1 bình chọn)

285