Cài đặt Lightbox cho website WordPress: Hướng dẫn cơ bản cho người mới bắt đầu

Lightbox là một trong nhiều tính năng thú vị và phổ biến cho một trang web chứa nhiều hình ảnh. Nhưng không phải ai cũng biết cách thêm lightbox vào một website WordPress, đặc biệt là người mới bắt đầu dùng WordPress. Chính vì thế, bài viết này của chúng mình sẽ đưa ra những hướng dẫn cụ thể về cách cài đặt Lightbox vào một website WordPress cho người mới bắt đầu.

Lightbox là gì và làm thế nào để thêm nó?

Lightbox là một bộ sưu tập hình ảnh và video được hiển thị bằng cách tạo một cửa sổ trên màn hình và làm mờ background phía sau. Ví dụ:

Lightbox là một bộ sưu tập hình ảnh và video được hiển thị bằng cách tạo một cửa sổ trên màn hình và làm mờ background phía sau

Hiệu ứng đẹp và lạ mắt này cực kỳ hữu ích cho trang portfolio, trang nhiếp ảnh hoặc bất kỳ trang web hình ảnh nào. Nó cho phép xem hình ảnh rõ ràng và làm cho trang web của bạn trở nên nổi bật hơn.

Thông thường sẽ có 3 cách để tạo ra Lightbox trên trang web WordPress:

  • Thêm shortcode
  • Cài đặt plugin
  • Sử dụng theme hỗ trợ cho Lightbox

Với những người mới bắt đầu, lời khuyên dành cho bạn là hãy cài đặt plugin hoặc sử dụng theme với tính năng có sẵn, vì việc thêm shortcode thường dành cho người dùng chuyên nghiệp và hiểu về code hơn.

Hiển thị Lightbox nếu theme của bạn có hỗ trợ nó

Sẽ không có gì để nói nếu theme của bạn đã hiển thị lightbox cho hình ảnh/gallery. Nhưng có rất nhiều theme bạn cần phải thêm một số bước để có thể hiển thị được. Ví dụ, theme ePortfolio hỗ trợ lightbox nhưng cần liên kết gallery với file media để có thể hiển thị được.

Thông thường sẽ có 2 lựa chọn: chèn liên kết tới media file hoặc attachment page. Khi bạn liên kết hình ảnh/gallery với một trang đính kèm (attachment page), một trang mới, riêng biệt chỉ chứa hình ảnh mà sẽ được mở khi bạn nhấp vào hình ảnh đó. Nếu liên kết đến một media file, nó sẽ chỉ hiển thị hình ảnh chứ không phải một trang, như thế này:

Hãy chú ý phần hiển thị trước khi cài đặt Lightbox cho website WordPress

Dưới đây, mình sẽ đưa ra hướng dẫn để bạn có thể dễ dàng thực hiện việc này nhé.

Đầu tiên, đến Post Editor, sau đó bạn hãy click chuột vào gallery. Nếu sử dụng Gutenberg Editor, nhìn vào thanh bên phải, bạn sẽ thấy phần Link to.

Cách cài đặt theme để hiển thị Lightbox

Đối với một hình ảnh duy nhất, bạn hãy click vào biểu tượng này trên thanh công cụ:

Đối với một hình ảnh duy nhất, bạn hãy click vào biểu tượng này trên thanh công cụ

Còn khi ở Classic Editor, phần Link to sẽ xuất hiện khi bạn tạo hoặc chỉnh sửa gallery và hình ảnh đơn lẻ.

phần Link to sẽ xuất hiện khi bạn tạo hoặc chỉnh sửa gallery và hình ảnh đơn lẻ.

Sau đó, bạn chọn Media file và click vào Insert Gallery để hoàn thành. Khi Update hoặc Public bài viết, nhấp vào gallery/hình ảnh đó, bạn sẽ thấy lightbox đang chạy rồi đấy.

Nếu theme của bạn hỗ trợ lightbox, các bước trên sẽ kích hoạt lightbox cho gallery/hình ảnh bạn muốn. Nếu không thì sẽ không có lightbox nào xuất hiện cả đâu.

Tuy nhiên, mỗi theme khác nhau sẽ có cách cấu hình khác nhau. Ví dụ, một số sẽ yêu cầu làm việc trong Customizer, một số yêu cầu liên kết đến trang đính kèm thay vì media file. Do đó, bạn hãy kiểm tra theme một cách cẩn thận nhé.

Dù sử dụng theme nào, bạn vẫn cần phải biết cách liên kết gallery/hình ảnh với media file vì điều này sẽ hữu ích cho việc thêm lightbox bằng cách sử dụng plugin dưới đây.

Sử dụng plugin để thêm lightbox

Nếu tìm hiểu, bạn sẽ thấy thêm lightbox không hề khó. Bằng cách tìm kiếm từ khóa “lightbox plugin”, bạn sẽ thấy một loạt các plugin trợ giúp cho việc này. Theo như nghiên cứu của mình, các plugin được sắp xếp thành hai loại: các plugin phức tạp và các plugin đơn giản.

Đối với các plugin phức tạp, có rất nhiều tùy chọn nâng cao để tùy chỉnh lightbox như kích thước hình ảnh, màu đường viền, kiểu lightbox,.. Chẳng hạn, Responsive Lightbox & GalleryFooBox Image Lightbox có nhiều công cụ tùy chỉnh hơn. Nhưng nếu bạn là người mới bắt đầu, các plugin phức tạp sẽ gây ra khá nhiều khó khăn nhưng hiệu quả mang lại không quá khác biệt so với các plugin đơn giản. Đó là lý do tại sao Simple Lightbox – một plugin đơn giản lại được ưa chuộng hơn.

Plugin này rất dễ sử dụng, khá phổ biến với hơn 200.000 lượt cài đặt và 160 đánh giá 5 sao. Ngoài ra, thiết kế của lightbox khá tốt nữa đấy.

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

Tại Dashboard > Plugin > Add New, bạn hãy gõ “Simple Lightbox” rồi click vào Install sau đó click vào Activate để kích hoạt.

Cài đặt Lightbox cho website WordPress bằng plugin Simple Lightbox

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

Trong Plugin > Installed plugins, bạn chỉ cần click chuột vào Setting trong Simple Lightbox Tab.

Thiết lập plugin để cài đặt Lightbox cho website WordPress

Tab kích hoạt (Activation) trong Simple Lightbox

Tab kích hoạt Activation cho phép bạn bật/tắt một số chức năng. Đừng quên tick vào Enable Lightbox Functionality, chức năng này cho phép kích hoạt Lightbox trong bộ sưu tập của bạn. Nếu bạn quên tick chức năng này, tất cả các bước sẽ trở nên vô nghĩa.

Phần còn lại là tuỳ bạn chọn. Bạn có thể đánh dấu để hiển thị lightbox trên các trang chủ, trang lưu trữ, widget và menu.

Sau khi cài đặt Lightbox cho website WordPress, bạn cần kích hoạt nó

Hãy đảm bảo rằng, các lightbox chỉ xuất hiện ở những phần mà bạn mong muốn, sự xuất hiện của quá nhiều lightbox sẽ làm cho website của bạn trở nên rối mắt đấy.

Tab Grouping trong Simple Lightbox

Kéo xuống, bạn sẽ thấy tab Grouping. Tab này sẽ đưa ra hai lựa chọn về hiển thị Lightbox: hiển thị dưới dạng slider hoặc chỉ một hình ảnh duy nhất.

Tùy chọn hiển thị sau khi cài đặt Lightbox cho website WordPress

Group items: Khi tick vào hình ảnh/gallery của bạn sẽ hiển thị như một slider, cho phép bạn trượt từ hình ảnh này sang hình ảnh tiếp theo. Chỉ khi bạn bật tính năng này, các chức năng trong tab Grouping này mới có hiệu lực.

Group items by Post: Khi tick vào đây, bạn sẽ nhóm tất cả các ảnh từ một bài đăng sang slider lightbox. Nên sử dụng chức năng này khi bạn muốn nhóm các hình ảnh/bộ sưu tập trong một bài đăng và loại bỏ các hình ảnh/bộ sưu tập khỏi các bài đăng, widget và menu khác.

Group gallery items seperately, Group widget items seperatelyGroup menu items seperately: tick vào từng nhóm item trong gallery của từng post đơn lẻ, items trong widget hoặc menu items tương ứng. Khi thực hiện thao tác này có nghĩa là bạn chỉ có thể xem các ảnh tiếp theo trong cùng bộ sưu tập, widget hoặc menu trong slider lightbox. Chức năng này giúp lightbox ở các phần của bạn không bị rối, giảm thiểu việc gây nhầm lẫn cho người truy cập.

Tab UI trong Simple Lightbox

Tab UI có các chức năng để sửa đổi cách hiển thị lightbox. Khi muốn tùy chỉnh kiểu hiển thị lightbox, đừng quên các chức năng của tab IU này nhé.

Tùy chỉnh kiểu hiển thị sau khi cài Lightbox cho website WordPress

Theme: có 2 kiểu hiển thị dành cho lightbox. Bạn chỉ cần chọn kiểu phù hợp với phong cách của mình thôi nhé.

Kiểu hiển thị thứ nhất của lightbox
Kiểu hiển thị thứ hai của lightbox

Resize lightbox to fit in window: hãy bật phần này nếu bạn muốn màn hình hiển thị của mình trở nên “vừa mắt” hơn. Nếu không, hình ảnh của bạn sẽ hiển thị ở chế độ toàn màn hình và bạn sẽ không thể xem toàn bộ hình ảnh như thế này.

Sau khi cài đặt Lightbox cho website WordPress, bạn cần bật nút Resize lightbox to fix in window

Enable animations: tick nếu bạn muốn kích hoạt hiệu ứng tải trang

Sau khi cài đặt Lightbox cho website WordPress, tick nút này nếu bạn muốn kích hoạt hiệu ứng tải trang

Bỏ tick khi muốn bỏ hiệu ứng này để chuyển hình ảnh nhanh hơn nhé.

Bỏ tick khi muốn bỏ hiệu ứng này để chuyển hình ảnh nhanh hơn nhé.

Start Slideshow Automatically: tự động chuyển sang hình ảnh tiếp theo khi bạn tick vào phần này.

Slide Duration: khi tick vào Start Slideshow Automatically bên trên, bạn có thể chọn thời gian trình chiếu một thời gian tại đây.

Loop through items: nếu muốn lặp lại việc trình chiếu, hãy tick vào phần này nhé.

Overlay Opacity (0 – 1): bạn có thể điều chỉnh độ mờ của nền. Độ mờ càng thấp, bạn càng có thể xem bài đăng phía sau rõ ràng hơn. Ví dụ: chúng mình đặt độ mờ 0,1 nên phần nền rất rõ.

bạn có thể điều chỉnh độ mờ nền cho website WordPress của bạn

Enable default title: bạn có thể chọn hiển thị tiêu đề của hình ảnh bằng cách tick vào đây. Tiêu đề sẽ được hiển thị như dưới đây.

Sau khi cài đặt Lightbox, bạn có thể chọn nút này để hiển thị tiêu đề của hình ảnh

Tab Label của Simple Lightbox

Cuối cùng, tab này sẽ cho phép bạn thay đổi nhãn cho từng nút. Nhưng nó sẽ không có hiệu lực trừ khi bạn thêm shortcode khi chỉnh sửa theme. Vì vậy, trong hướng dẫn dành cho người không biết nhiều về code này, bạn không cần quan tâm đến tab này đâu.

Khi bạn hoàn thành tất cả các công việc ở phần cài đặt Simple Lightbox plugin, click Save Changes ngay dưới tab Label để lưu lại các thao tác vừa làm nhé.

Hãy lưu lại các thao tác sau khi cài đặt Lightbox

Bước 3: Liên kết hình ảnh/bộ sưu tập với Media File để hiển thị Lightbox

Để quyết định xem hình ảnh/gallery nào cần được thêm lightbox, bạn phải chèn link media file vào hình ảnh/gallery đó. Nếu bạn không chèn link media file, lightbox sẽ không được hiển thị.

Bạn chỉ cần làm theo hướng dẫn đã đề cập trong phần “Hiển thị Lightbox nếu theme của bạn có hỗ trợ nó”. Bạn thấy đấy, như mình đã nói, chắc chắn bạn nên biết cách hiển thị lightbox nếu bạn muốn sử dụng plugin này.

Lời kết

Trên đây, chúng mình đã đưa ra cách dễ nhất để cài đặt lightbox vào WordPress của bạn. Đặc biệt nếu bạn là người mới bắt đầu, plugin Simple Lightbox là lựa chọn đơn giản và hiệu quả danh cho bạn đấy. Tùy thuộc vào nhu cầu, trang web và thẩm mỹ của bạn, bạn có thể chọn các plugin lightbox khác nhau để mang lại kết quả mong muốn nhất. Hoặc bạn có thể chọn tìm một WordPress theme có hỗ trợ lightbox nhé.

Nếu bạn muốn có thêm hướng dẫn về các lightbox plugin phức tạp, hãy để lại bình luận dưới bài viết này và tiếp tục theo dõi các bài viết tiếp theo của chúng tôi.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *