Biến bất kỳ khối thư viện hoặc hình ảnh WordPress tiêu chuẩn nào thành một hộp đèn đáp ứng đầy đủ, với thao tác vuốt sang trái / phải và chế độ toàn màn hình. Chỉ có một lượng mã sao chép và dán tối thiểu và đó là một cách tuyệt vời để nâng cao trang web WordPress của bạn mà không cần phải cài đặt thêm một plugin khác.
Theo mặc định, khi bạn thêm thư viện hoặc khối hình ảnh vào nội dung WordPress và đặt tệp phương tiện “Liên kết tới”… khi ai đó nhấp vào hình ảnh trong giao diện người dùng, hình ảnh đó sẽ mở ra và người xem phải nhấp vào nút quay lại để quay lại đến trang web / nội dung của bạn. Nó hơi… lỗi thời.
Hộp đèn làm gọn gàng điều này bằng cách làm cho điều hướng trực quan hơn nhiều, đặc biệt là trên thiết bị di động. Hãy dùng thử trên thư viện này để xem hộp đèn hoạt động.
Trước khi bắt đầu hướng dẫn này, hãy đảm bảo rằng bạn đang sử dụng một chủ đề con tùy chỉnh để chúng tôi có thể thêm một số mã vào functions.php .
Nếu bạn sử dụng Headwall Hosting để lưu trữ trang web WordPress của mình, bạn không cần hướng dẫn này, bạn có thể chỉ cần kích hoạt biểu mẫu chức năng Auto-Lightbox WP Admin Dashboard
Hợp lý
Đối với hướng dẫn này, Logic cho phần mở rộng chủ đề nhỏ của chúng tôi rất hay và đơn giản:-
Khi trang web của chúng tôi tải một trang, hãy xếp hàng các tệp nội dung của chúng tôi:
- Thư viện JavaScript fslightbox.js
- Một chút JavaScript của riêng chúng tôi để liên kết nó với nhau.
-
Khi trang đã được tải trong trình duyệt, hãy chạy JavaScript của chúng tôi
- Quét trang để tìm các khối hình ảnh và khối thư viện, nơi các hình ảnh được liên kết với các tệp phương tiện nguồn.
-
Sửa đổi các khối này (chúng chỉ là
<div>các phần tử) để chúng có đánh dấu cần thiết để fslightbox.js hoạt động.
- Khởi tạo fslightbox.js
Mật mã
Trong thư mục chính của chủ đề con tùy chỉnh của bạn, hãy tạo một tệp trống có tên “ wpt-lightbox.php ” và một thư mục mới có tên “ wpt-lightbox ”. Trong thư mục này, hãy tạo một tệp văn bản mới / trống có tên là “ wpt-lightbox-frontend.js “. Chúng tôi sẽ đưa một số mã vào đó sau - hiện tại, nó chỉ cần tồn tại.Tiếp theo, tải xuống phiên bản mới nhất của fslightbox.js . Có một phiên bản cơ bản / miễn phí và một phiên bản trả phí / Pro. Phiên bản cơ bản sẽ hoạt động tốt cho trang web này, nhưng bạn có thể sử dụng phiên bản Pro nếu bạn muốn các tính năng bổ sung.
Giải nén tệp zip và sao chép “ fslightbox.js ” vào thư mục “ wpt-lightbox ” trong chủ đề con tùy chỉnh của bạn. Bố cục thư mục của chủ đề con tùy chỉnh của bạn bây giờ sẽ trông giống như sau:
-
my-custom-child-theme /
- functions.php
- style.css
-
wpt-lightbox /
- fslightbox.js
- wpt-lightbox-frontend.js
- wpt-lightbox.php
Bit PHP
Chỉnh sửa wpt-lightbox.php và dán đoạn mã sau vào đó - mã này sẽ bắt khi WordPress đang hiển thị tiêu đề trang và chèn hai tệp JavaScript của chúng tôi vào đó./*
* WP Tutorials :: Lightbox (WPTL)
*
* https://wp-tutorials.tech/refine-wordpress/turn-wordpress-image-gallery-blocks-into-responsive-lightbox/
*
* fslightbox.js : https://fslightbox.com/
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
const WPTL_FSLIGHTBOX_VERSION = '3.2.3';
function wptl_enqueue_scripts() {
$theme_version = wp_get_theme()->get('Version');
$base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
// The main fslightbox.js code.
// null means it doesn't depend on any other scripts.
// The last parameter (true) means it can be safeuly enqueued in the site's footer.
// Better for page-load speed.
wp_enqueue_script('fslightbox', $base_url . 'fslightbox.js', null, WPTL_FSLIGHTBOX_VERSION, true);
// Our custom code to initialise fslightbox.js
// The array( 'lightbox' ) parameter tells WordPress that the fslightbox
// script must be loaded before our wpt-lightbox-frontend script.
wp_enqueue_script('wpt-lightbox-frontend', $base_url . 'wpt-lightbox-frontend.js', array('fslightbox'), WPT_FSLIGHTBOX_VERSION, true);
}
add_action('wp_enqueue_scripts', 'wptl_enqueue_scripts');
Bit JavaScript giao diện người dùng
Mở tệp wpt-lightbox / wpt-lightbox-frontend.js và dán thông tin sau vào đó. Logic phải dễ làm theo chỉ bằng cách lướt qua mã.// When the document has finished loading...
document.addEventListener('DOMContentLoaded', function() {
'use strict';
// Diagnostics to show that our script has loaded correctly.
console.log('fslightbox : load');
var lightboxImageCount = 0;
// Scan the DOM for single image blocks that have a link <a> element.
var elements = document.querySelectorAll('.wp-block-image a');
for (var index = 0; index < elements.length; ++index) {
var element = elements[index];
if (element.href) {
element.setAttribute('data-fslightbox', `Image ${index + 1}`);
++lightboxImageCount;
}
}
// Scan the DOM for gallery blocks...
var galleryElements = document.querySelectorAll('.wp-block-gallery');
for (var galleryIndex = 0; galleryIndex < galleryElements.length; ++galleryIndex) { var galleryElement = galleryElements[galleryIndex]; // Each gallery on the page should have a unique name. var galleryName = `Gallery ${galleryIndex + 1}`; // Within the gallery, scan for images that have a link. elements = galleryElement.querySelectorAll('.blocks-gallery-item figure > a');
for (var index = 0; index < elements.length; ++index) { var element = elements[index]; if (element.href) { element.setAttribute('data-fslightbox', galleryName); ++lightboxImageCount; } } } // Only initialise fslightbox.js if we found one-or-more images with links. if (lightboxImageCount > 0) {
console.log(`Lightbox images: ${lightboxImageCount} : Init FsLightbox now`);
refreshFsLightbox();
}
});
Lưu tệp, và sau đó… thực ra, đó là tất cả những gì cần làm.
Kết thúc và Kiểm tra
Tìm hoặc tạo một số nội dung trên trang web của bạn và thêm thư viện. Thêm một số hình ảnh vào thư viện và đặt thuộc tính liên kết đến thư viện để thuộc tính Liên kết đến Tệp Phương tiện khi một hình ảnh được nhấp vào. Chọn bất cứ thứ gì bạn muốn cho Kích thước hình ảnh - nó không cần phải “Lớn” như ở đây.
Lưu và kiểm tra. Bây giờ… khi bạn nhấp vào một trong những hình ảnh trong thư viện của mình, nó sẽ mở ra trong hộp đèn để bạn có thể vuốt sang trái / phải để lướt qua giữa các hình ảnh.