WP Post Modules for News & Magazine (Gutenberg)

Giới thiệu WP Post Modules for News & Magazine (Gutenberg)

WP Post Modules for News & Magazine (Gutenberg) là plugin Gutenberg Block chuyên dụng giúp bạn tạo nội dung dạng tạp chí online, website báo chí, portfolio sáng tạo và blog một cách dễ dàng và nhanh chóng.

Plugin hỗ trợ tạo các module bài viết với nhiều phong cách khác nhau ngay trên giao diện Gutenberg. Với đa dạng tùy chọn về kiểu hiển thị, kiểu chữ và màu sắc, đây là công cụ hoàn hảo để xây dựng các chuyên mục bài viết giống như tạp chí hoặc báo điện tử.

Tính năng nổi bật của WP Post Modules for News & Magazine (Gutenberg)

• Thiết kế đáp ứng (Responsive), tối ưu cho màn hình retina
• Hỗ trợ WordPress 6.2.x
• Xây dựng hoàn toàn trên native Gutenberg API và giao diện mặc định, không cần dùng framework hay plugin bên thứ ba
• 9 layouts trang chủ có sẵn dưới dạng Gutenberg Reusable Blocks
• Hơn 40 layout section đa dạng
• Hỗ trợ RTL (ngôn ngữ viết từ phải sang trái)
• Nhiều phong cách hiển thị bao gồm:
• Grid: 4 kiểu con, cột đa dạng không giới hạn, tùy chỉnh khoảng cách giữa các phần tử (gutters)
• List: Tỷ lệ chia thumbnail + nội dung tùy chỉnh, thumbnail hình tròn, nhiều kích thước thumbnails, danh sách đa cột, lựa chọn viền cho nội dung (toàn bộ, một phần hoặc không viền)
• Tile: Cột đa dạng, guttes tùy biến, nội dung overlay với màu nền và gradient tùy chỉnh, hiệu ứng zoom và xoay ảnh khi hover, tùy chỉnh margin/padding overlay, lựa chọn hiển thị overlay luôn, khi hover hoặc không hiển thị
• Ticker: Tùy chỉnh độ dài tiêu đề ticker, thời gian animation, nhãn ticker, màu nền và chữ với bộ chọn màu
• Bullet List: Danh sách dấu chấm, tùy chỉnh kích thước và màu sắc bullet, khoảng cách dòng
• Tùy chỉnh Typography chuyên sâu với thư viện Google Fonts đầy đủ: font family, kích thước, chiều cao dòng, độ đậm, khoảng cách chữ, màu sắc tiêu đề, đoạn trích, liên kết danh mục, meta bài viết
• Công cụ xây dựng WP Query tùy chỉnh: lọc bài theo danh mục, tag, custom post type, taxonomy, tác giả, id bài, hỗ trợ offset và loại trừ bài, sắp xếp thứ tự dữ liệu
• Bộ Slider jQuery Owl Carousel tích hợp cho Grid, List, Tile với các tùy chọn slide số lượng, lặp animation, tự động chạy, tốc độ và kiểu animation (slide, zoom, fade), điều khiển chiều cao tự động, nút điều hướng, dấu chấm, stagepadding
• Resize ảnh tự động với BFI Thumb, hỗ trợ chỉnh kích thước, crop cứng, chất lượng ảnh, chuyển ảnh sang grayscale hoặc màu tùy chọn
• Tùy chỉnh nội dung chữ: lựa chọn thẻ heading (h1-h6) hoặc p, kích thước và độ đậm chữ tiêu đề, tự động cắt đoạn trích theo số từ, bật/tắt liên kết đọc tiếp với nội dung tùy chỉnh, hiển thị hoặc ẩn meta bài viết (danh mục, tác giả, ngày đăng, bình luận), tự chuyển liên kết danh mục thành dropdown nếu quá nhiều, hiển thị avatar tác giả, hỗ trợ style và chức năng cho WP Review và Post Views Counter plugin
• Chia sẻ mạng xã hội từng module bài viết (Twitter, Facebook, WhatsApp, LinkedIn, Pinterest, VK, Reddit, Email)
• Schema microdata chuẩn xác cho bài viết, có thể tùy chỉnh thuộc tính trong widget settings
• Điều hướng AJAX next/previous và load more cho các kiểu hiển thị grid, list, tile
• Markup HTML chuẩn W3C cho dữ liệu plugin sinh ra
• Tương thích mọi trình duyệt phổ biến, bao gồm IE 11 trở lên
• Hỗ trợ đa ngôn ngữ với file POT, PO/MO đi kèm
• Tài liệu hướng dẫn chi tiết: https://intothedesign.com/docs/wppm-gt/index.html

Hướng dẫn trải nghiệm plugin

• Đăng nhập demo tại https://intothedesign.com/demos/wppm-el/wp-admin/ với tài khoản:
  • Username: guest
  • Password: guest
• Vào mục Posts > Add New
• Trong khu vực nội dung, nhấn biểu tượng dấu cộng để thêm block, chọn WP Post Modules block
• Sử dụng bảng điều khiển bên phải để tùy chỉnh thiết lập và thay đổi kiểu hiển thị
• Xem tất cả demo tại https://intothedesign.com/demos/wppm-el/demo-1-gt/, chọn trang trong menu “Gutenberg”

Credits

• jQuery: http://jquery.com/
• BFI Thumb Class: https://github.com/bfintal/bfi_thumb
• Ảnh demo lấy từ pexels.com và unsplash.com
• jQuery Marquee: http://aamirafridi.com/jquery/jquery-marquee-plugin
• jQuery Owl Carousel: https://github.com/OwlCarousel2/