Releases: nhockool1002/lw-slider
Release list
0.0.1k
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
- Upload thư mục plugin vào:
wp-content/plugins/lw-slider
- Vào WordPress Admin.
- Mở
Plugins. - Kích hoạt
LWSlider - Lightweight BS5 Slider. - Vào menu
LWSliderđể tạo slider mới.
Cách Sử Dụng
- Vào
LWSlider > Add New. - Đặt tiêu đề cho slider.
- Trong box
Media, bấmAdd Media. - Chọn một hoặc nhiều hình ảnh từ Media Library.
- Kéo thả các card media để sắp xếp thứ tự ảnh.
- Click vào thumbnail ảnh để mở modal chọn filter.
- Chọn filter bằng card preview, sau đó bấm
Apply Filter. - Nhập caption nếu cần.
- Tuỳ chỉnh hiệu ứng, thumbnail, autoplay, interval, overlay, radius và shadow trong box
Settings. - Bấm
PublishhoặcUpdate. - 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/imagekosinix/grafikaintervention/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
0.0.1h
0.0.1g
0.0.1f
0.0.1e
0.0.1d
0.0.1c
0.0.1b
0.0.1a
Full Changelog: https://github.com/nhockool1002/lw-slider/commits/0.0.1a