Tutorial 2x Hướng dẫn sử dụng Widget HTML trong XenForo 2.3: Thêm Box Tùy Chỉnh Vào Sidebar

[PVS]

Xem nhanh

Ẩn Hiện

Giới thiệu​

Phần 1: Tìm Hiểu Hệ Thống Widget​

Phần 2: Hướng Dẫn Tạo Widget "Theo Dõi Mạng Xã Hội"​

Bước 1: Tạo Widget HTML Mới​

Bước 2: Soạn Thảo Mã HTML và CSS​

Phần 3: (Nâng cao) Kiểm Soát Hiển Thị Widget​

Lời kết​

Hướng dẫn sử dụng Widget HTML trong XenForo 2.3: Thêm Box Tùy Chỉnh Vào Sidebar

Sidebar (cột bên cạnh) là một không gian quý giá để hiển thị thông tin quan trọng. Bài viết này sẽ hướng dẫn bạn cách sử dụng Widget HTML để thêm bất kỳ nội dung nào bạn muốn vào đó.

Giới thiệu​

Bạn có bao giờ tự hỏi làm thế nào để thêm một banner quảng cáo, một hộp "Theo dõi chúng tôi trên mạng xã hội", hay một đoạn văn bản chào mừng vào cột bên cạnh (sidebar) của diễn đàn? Câu trả lời nằm ở một trong những hệ thống linh hoạt nhất của XenForo: Hệ thống Widget.

Widget là những khối nội dung độc lập (như "Bài viết mới", "Thành viên trực tuyến", "Thống kê diễn đàn"...) có thể được đặt vào nhiều vị trí khác nhau trong giao diện. XenForo cung cấp rất nhiều widget có sẵn, nhưng widget mạnh mẽ nhất chính là "Widget HTML", vì nó cho phép bạn chèn bất kỳ mã HTML/CSS/JavaScript nào bạn muốn.

Bài viết này sẽ hướng dẫn bạn chi tiết cách tạo một widget HTML tùy chỉnh từ đầu đến cuối, với ví dụ thực tế là tạo một box "Theo dõi mạng xã hội" chuyên nghiệp.

---

Phần 1: Tìm Hiểu Hệ Thống Widget​

Đầu tiên, hãy làm quen với khu vực quản lý widget tại Admin Control Panel (ACP) > Appearance > Widgets.

Có 2 mục bạn cần quan tâm:

• Widgets: Đây là nơi bạn định nghĩa và tạo ra các "khối nội dung". Bạn có thể tạo một widget ở đây, nhưng nó sẽ chưa hiển thị ở đâu cả cho đến khi bạn gán nó vào một vị trí.
• Positions (Vị trí): Đây là danh sách các "khe cắm" có sẵn trong giao diện (theme) của bạn, nơi bạn có thể đặt các widget vào. Ví dụ: `Forum list: Sidebar` (cột bên cạnh của trang chủ diễn đàn), `Thread view: Sidebar` (cột bên cạnh của trang xem bài viết)...

---

Phần 2: Hướng Dẫn Tạo Widget "Theo Dõi Mạng Xã Hội"​

Chúng ta sẽ cùng nhau tạo một widget hiển thị các icon mạng xã hội để kêu gọi người dùng theo dõi.

Bước 1: Tạo Widget HTML Mới​

1. Truy cập ACP > Appearance > Widgets.
2. Nhấp vào nút + Add widget.
3. Trong danh sách thả xuống "Definition", hãy tìm và chọn HTML.
4. Một form mới sẽ hiện ra. Hãy điền các thông tin sau:
   • Widget key: Một ID duy nhất, viết liền không dấu. Ví dụ: custom_follow_us_box.
   • Title: Tiêu đề sẽ hiển thị phía trên widget. Ví dụ: Theo Dõi Chúng Tôi.
   • Display in positions: Vị trí hiển thị widget: Ví dụ: Forum list: Sidebar. Số ngay bên dưới là thứ tự hiển thị của widget, số càng nhỏ độ ưu tiên càng cao.
   • HTML: Đây là phần quan trọng nhất, nơi chúng ta sẽ chèn mã hiển thị các icon.

Bước 2: Soạn Thảo Mã HTML và CSS​

1. Trong ô HTML, hãy dán toàn bộ đoạn mã sau vào. Đoạn mã này sử dụng HTML đơn giản và các lớp Font Awesome có sẵn của XenForo.

2. <div class="block-body block-row">
       <p style="text-align: center; margin-bottom: 10px;">Hãy kết nối với chúng tôi trên các nền tảng mạng xã hội!</p>
       <div style="display: flex; justify-content: space-around; font-size: 28px;">
         
           <a href="#" target="_blank" rel="nofollow" title="Facebook" style="color: #3b5998;">
               <xf:fa icon="fab fa-facebook-square" aria-hidden="true"/>
           </a>
         
           <a href="#" target="_blank" rel="nofollow" title="YouTube" style="color: #ff0000;">
               <xf:fa icon="fab fa-youtube" aria-hidden="true"/>
           </a>
         
           <a href="#" target="_blank" rel="nofollow" title="Twitter" style="color: #1da1f2;">
               <xf:fa icon="fab fa-twitter-square" aria-hidden="true"/>
           </a>
         
           <a href="#" target="_blank" rel="nofollow" title="Instagram" style="color: #e1306c;">
               <xf:fa icon="fab fa-instagram" aria-hidden="true"/>
           </a>
         
       </div>
   </div>

3. Quan trọng: Hãy thay thế các URL_..._CUA_BAN bằng các đường dẫn thực tế đến trang mạng xã hội của bạn.
4. Nhấn Save.

---

Phần 3: (Nâng cao) Kiểm Soát Hiển Thị Widget​

Khi gán một widget vào một vị trí, bạn có một ô tùy chọn rất mạnh mẽ là "Display condition" (Điều kiện hiển thị). Ô này cho phép bạn viết các câu lệnh điều kiện của XenForo để quyết định khi nào widget được hiển thị.

Ví dụ 1: Chỉ hiển thị widget cho khách (chưa đăng nhập).
Rất hữu ích để tạo một widget "Chào mừng, hãy đăng ký!"
!$xf.visitor.user_id

Ví dụ 2: Chỉ hiển thị widget cho thành viên đã đăng nhập.
$xf.visitor.user_id

Ví dụ 3: Chỉ hiển thị cho thành viên trong nhóm VIP (giả sử ID nhóm là 9).
$xf.visitor.isMemberOf(9)

Bằng cách sử dụng điều kiện hiển thị, bạn có thể tạo ra các sidebar rất linh động và cá nhân hóa cho từng nhóm người dùng.

---

Lời kết​

Hệ thống Widget là một cách cực kỳ linh hoạt và dễ dàng để làm phong phú thêm cho giao diện diễn đàn của bạn mà không cần phải đụng chạm phức tạp vào các template chính. Đặc biệt với HTML widget, khả năng là vô tận. Bạn có thể chèn quảng cáo, video, các biểu mẫu, hoặc bất cứ ý tưởng sáng tạo nào khác.

Chúc các bạn thành công.

VNXF.VN​