Skip to content

0.0.1k

Latest
Latest

Choose a tag to compare

View all tags
@nhockool1002 nhockool1002 released this 01 Jun 14:35
0.0.1k
54b26ea

LWSlider - Lightweight BS5 Slider

LWSlider là plugin WordPress dùng để tạo slider ảnh nhẹ, nhanh và dễ tuỳ biến. Plugin phù hợp cho blog du lịch, portfolio, website nội dung, landing page hoặc các trang cần trình bày nhiều hình ảnh theo dạng slider nhưng không muốn phụ thuộc vào page builder nặng.

Plugin hoạt động thông qua post type riêng LWSlider. Mỗi slider có shortcode riêng dạng:

[lw_slider id="123"]

Bạn có thể chèn shortcode này vào bài viết, trang, widget hoặc trình soạn thảo Classic/Gutenberg.

Tính Năng Chính

  • Tạo nhiều slider độc lập trong WordPress Admin.
  • Thêm nhiều hình ảnh từ WordPress Media Library.
  • Quản lý media bằng giao diện card compact.
  • Kéo thả để thay đổi thứ tự ảnh.
  • Có vùng scroll riêng trong danh sách media để tránh trang admin quá dài khi có nhiều ảnh.
  • Caption riêng cho từng ảnh.
  • Trường Video URL cho từng media item để mở rộng tính năng sau này.
  • Chọn filter màu riêng cho từng ảnh.
  • Modal chọn filter dạng card preview, chia theo nhóm có thể collapse/expand.
  • Tooltip trên thumbnail hiển thị tên filter đang áp dụng.
  • Preview slider trực tiếp trong admin.
  • Shortcode frontend nhẹ và dễ nhúng.
  • Hỗ trợ autoplay, random order, lazy load và interval tuỳ chỉnh.
  • Hỗ trợ nhiều hiệu ứng chuyển slide.
  • Thumbnail có thể đặt ở dưới, bên trái hoặc bên phải.
  • Thumbnail bottom có thể scroll ngang khi có nhiều ảnh.
  • Ảnh portrait được hiển thị dạng contain để không bị crop mất nội dung.
  • Auto update qua GitHub Releases.

Bộ Lọc Màu

LWSlider có hệ thống filter lớn, áp dụng theo từng ảnh. Mỗi ảnh trong cùng một slider có thể dùng một filter khác nhau.

Các nhóm filter hiện có:

  • Vintage Film
  • Chill Tone
  • Landscape Color
  • Vintage Film Extended
  • Landscape Color Extended
  • Nature Green Extended
  • Dark & Moody
  • Cinematic Teal & Orange
  • Japanese Anime / Pastel Blue
  • Nordic / Faded Winter
  • Intervention Image Inspired
  • Instagraph Style
  • Grafika Inspired

Tổng số filter hiện tại: hơn 700 preset.

Các filter được kiểm tra để không trùng key, label và công thức CSS filter.

Cài Đặt

  1. Upload thư mục plugin vào:
wp-content/plugins/lw-slider
  1. Vào WordPress Admin.
  2. Mở Plugins.
  3. Kích hoạt LWSlider - Lightweight BS5 Slider.
  4. Vào menu LWSlider để tạo slider mới.

Cách Sử Dụng

  1. Vào LWSlider > Add New.
  2. Đặt tiêu đề cho slider.
  3. Trong box Media, bấm Add Media.
  4. Chọn một hoặc nhiều hình ảnh từ Media Library.
  5. Kéo thả các card media để sắp xếp thứ tự ảnh.
  6. Click vào thumbnail ảnh để mở modal chọn filter.
  7. Chọn filter bằng card preview, sau đó bấm Apply Filter.
  8. Nhập caption nếu cần.
  9. Tuỳ chỉnh hiệu ứng, thumbnail, autoplay, interval, overlay, radius và shadow trong box Settings.
  10. Bấm Publish hoặc Update.
  11. Copy shortcode và dán vào bài viết/trang.

Cấu Hình Slider

Các tuỳ chọn hiện có:

  • Transition Effect: Slide, Fade, Vertical, Zoom, Flip, Blur.
  • Text Animation: hiệu ứng caption dùng Animate.css.
  • Arrow Style: Default, Box, Circle, Dark.
  • Thumbnails Position: Bottom, Left, Right.
  • Radius: bo góc slider.
  • Shadow: None, Small, Regular, Large.
  • Overlay Color: None, Dark 30%, Dark 50%, Gradient.
  • Thumbnails: bật/tắt thumbnails.
  • Autoplay: bật/tắt tự động chạy.
  • Lazy Load: lazy load ảnh sau slide đầu tiên.
  • Random Order: đảo thứ tự ảnh khi render.
  • Interval: thời gian chuyển slide theo milliseconds.

Frontend

Slider frontend render bằng shortcode:

[lw_slider id="123"]

Frontend hỗ trợ:

  • Hiệu ứng chuyển slide.
  • Caption animation.
  • Thumbnail scroll ngang ở layout bottom.
  • Thumbnail scroll dọc ở layout left/right.
  • Filter riêng cho từng ảnh.
  • Lazy load ảnh.
  • Autoplay.
  • Random order.
  • Portrait mode không crop ảnh.
  • Responsive height cho mobile.

Auto Update Qua GitHub

Plugin có cơ chế kiểm tra update từ GitHub Releases:

https://github.com/nhockool1002/lw-slider

Khi tạo release mới trên GitHub, WordPress có thể kiểm tra và hiển thị bản cập nhật trong trang Plugins.

Lưu ý:

  • Nên dùng tag version dạng số chuẩn như 0.0.2, 0.0.3, 1.0.0.
  • Plugin cũng có xử lý version dạng 0.0.1a, 0.0.1b, 0.0.1c.
  • Trong trang Plugins có link Check for updates để xoá cache update và kiểm tra lại GitHub Release mới nhất.

Thư Viện Sử Dụng

Plugin hiện có Composer autoload và các package:

  • intervention/image
  • kosinix/grafika
  • intervention/gif

Các thư viện này được cài để sẵn sàng mở rộng xử lý ảnh server-side trong tương lai. Hệ filter hiện tại vẫn ưu tiên CSS filter để preview realtime trong admin và render nhẹ ở frontend.

Cấu Trúc Dự Án

lw-slider.php
class-vsnn-2612-filters.php
admin/
  class-vsnn-2612-admin.php
  js/lw-slider-editor.js
  partials/docs-display.php
public/
  class-vsnn-2612-public.php
languages/
vendor/
composer.json
composer.lock

Vai trò chính:

  • lw-slider.php: bootstrap plugin, constants, auto update, editor integration, AJAX.
  • class-vsnn-2612-filters.php: danh sách và generator filter preset.
  • admin/class-vsnn-2612-admin.php: CPT, metabox, media UI, filter modal, settings, save metadata.
  • public/class-vsnn-2612-public.php: render shortcode frontend.
  • admin/js/lw-slider-editor.js: nút chèn slider trong Classic Editor/Gutenberg.
  • admin/partials/docs-display.php: tài liệu nhanh trong admin.

Metadata

Plugin lưu dữ liệu chính trong post meta:

  • _vsnn_items: danh sách ảnh, caption, video URL và filter theo từng ảnh.
  • _vsnn_settings: cấu hình chung của slider.

Custom post type:

lw_slider

Shortcode:

lw_slider

Ghi Chú Phát Triển

  • Không cần build frontend.
  • Khi thêm dependency PHP, dùng Composer.
  • Sau khi sửa PHP nên chạy:
php -l lw-slider.php
php -l admin/class-vsnn-2612-admin.php
php -l public/class-vsnn-2612-public.php
  • Nếu chỉnh filter, nên kiểm tra trùng key, label và CSS filter.
  • Nếu release qua GitHub, hãy cập nhật version trong plugin header và VSNN_2612_VERSION.

Tác Giả

Nhut Nguyen

Plugin URI:

https://github.com/nhockool1002/lw-slider
Assets 2
Loading