Tutorial 2x Tùy Biến Trang Đăng Ký XenForo 2.3: Chào Đón Thành Viên Mới Theo Cách Của Bạn

PVS

Super Moderator
Thành viên BQT
Tùy Biến Trang Đăng Ký XenForo 2.3: Chào Đón Thành Viên Mới Theo Cách Của Bạn

Trang đăng ký là cánh cửa đầu tiên chào đón thành viên đến với cộng đồng của bạn. Hãy cùng tìm hiểu cách tùy biến nó để trở nên thân thiện, hữu ích và mang đậm dấu ấn riêng.

tuy-bien-trang-dang-ky.png
Trong quá trình xây dựng diễn đàn, trang đăng ký thường là một trong những trang bị bỏ quên nhiều nhất. Chúng ta chấp nhận form đăng ký mặc định của XenForo vì nó đã "đủ tốt". Tuy nhiên, việc dành một chút thời gian để tùy biến "cánh cửa" này có thể mang lại những lợi ích không ngờ.

Một trang đăng ký được tùy biến tốt có thể giúp bạn:
  • Thu thập thông tin giá trị: Hiểu rõ hơn về thành viên mới của bạn, ví dụ như họ biết đến diễn đàn từ đâu, họ quan tâm đến lĩnh vực gì.
  • Thiết lập kỳ vọng: Đưa ra các quy định, hướng dẫn quan trọng ngay từ đầu, đảm bảo thành viên mới có một khởi đầu suôn sẻ.
  • Tăng tính chuyên nghiệp: Một form đăng ký được chăm chút kỹ lưỡng cho thấy sự tận tâm của bạn đối với cộng đồng.
Bài viết này sẽ hướng dẫn bạn hai phương pháp chính và hiệu quả nhất để tùy biến trang đăng ký của XenForo: thêm các trường thông tin tùy chỉnh và chèn các khối văn bản hướng dẫn.

Đây là cách để bạn thêm các câu hỏi của riêng mình vào form đăng ký.
Bạn có thể muốn hỏi thành viên mới: "Lĩnh vực chuyên môn của bạn là gì?", "Bạn đang sử dụng thiết bị nào?", hoặc câu hỏi kinh điển "Bạn biết đến chúng tôi từ đâu?". Những thông tin này rất hữu ích cho việc định hướng phát triển cộng đồng và nội dung.
  1. Truy cập ACP > Users > Custom user fields.
  2. Nhấp vào nút + Add field.
  3. Điền các thông tin quan trọng trong form:
    • Field ID: Một ID duy nhất, viết liền không dấu bằng tiếng Anh (ví dụ: `user_source`, `user_location`).
    • Title: Tiêu đề của câu hỏi sẽ hiển thị cho người dùng (ví dụ: "Bạn biết đến diễn đàn từ đâu?").
    • Description: Đoạn mô tả ngắn gọn bên dưới câu hỏi để giải thích thêm.
    • Field type:Loại trường nhập liệu, đây là phần rất linh hoạt:
      • Single-line text box: Hộp văn bản một dòng.
      • Multi-line text box: Hộp văn bản nhiều dòng.
      • Drop-down selection: Menu lựa chọn thả xuống.
      • Radio buttons: Các nút chọn một trong nhiều phương án.
      • Check boxes: Các ô tick để chọn nhiều phương án.
    • Show during registration: Đây là ô quan trọng nhất! Bạn phải tick vào ô này để trường thông tin xuất hiện trên trang đăng ký.
    • Required: Tick vào đây nếu bạn muốn bắt buộc thành viên phải trả lời câu hỏi này.
    • Display location: Chọn nơi thông tin này sẽ hiển thị trên trang cá nhân của thành viên sau khi họ đăng ký (ví dụ: Personal details, Contact details...).
  4. Ví dụ thực tế: Tạo câu hỏi "Bạn biết đến diễn đàn từ đâu?"
    • Field type: Chọn Drop-down selection.
    • Possible choices: Nhập các lựa chọn, mỗi lựa chọn trên một dòng. Ví dụ:
      Mã:
      google
      facebook
      banbe
      khac
    • Tick vào ô Show during registration.
    • Nhấn Save.
tuy-bien-trang-dang-ky-1.png
Bây giờ hãy ra ngoài trang đăng ký và bạn sẽ thấy một mục lựa chọn mới đã xuất hiện!

Đôi khi bạn muốn hiển thị một khối văn bản lớn ngay trên đầu trang đăng ký để chào mừng hoặc đưa ra những lưu ý quan trọng. Chúng ta sẽ thực hiện việc này bằng cách chỉnh sửa template.
Cách an toàn nhất để chỉnh sửa template là sử dụng Template Modifications, nhưng để đơn giản, hướng dẫn này sẽ chỉ ra vị trí cần chèn mã.
  1. Truy cập ACP > Appearance > Templates.
  2. Trong ô tìm kiếm, gõ register_form và mở template đó ra.
  3. Xác định vị trí cần chèn: Một vị trí tốt để chèn một khối chào mừng là ngay sau thẻ <xf:title>...</xf:title>.
  4. Dán đoạn mã sau vào vị trí đó:
    HTML:
    <div class="block-body">
        <div class="block-row block-row--standalone block-row--emphasized customRegisterMessage">
            <h3 class="block-minorHeader">Chào mừng bạn đến với cộng đồng của chúng tôi!</h3>
            <div class="block-row-main">
                Cảm ơn bạn đã quyết định tham gia. Để đảm bảo một sân chơi công bằng và vui vẻ, vui lòng dành chút thời gian đọc kỹ <a href="{{ link('help/terms') }}">các điều khoản và nội quy</a> của diễn đàn trước khi hoàn tất đăng ký.
            </div>
        </div>
    </div>
  5. Tiếp theo vào template extra.less và chèn thêm đoạn mã sau:
  6. Less:
    // Làm đẹp cho khối thông báo ở trang đăng ký
    .customRegisterMessage {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); // Nền gradient màu xám xanh nhẹ nhàng
        border: none;
        border-left: 5px solid #6a85b6; // Viền trái màu xanh đậm làm điểm nhấn
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); // Đổ bóng nhẹ tạo chiều sâu
    
        .block-minorHeader {
            color: #3d5a80; // Màu chữ đậm hơn cho tiêu đề
            font-weight: 600;
            border-bottom: 1px solid rgba(0,0,0,0.08);
            padding-bottom: 8px;
            margin-bottom: 8px;
        }
    
        .block-row-main {
            color: #293241; // Màu chữ chính đậm hơn để dễ đọc
        }
    }
  7. Giải thích mã:
    • customRegisterMessage là class thêm vào để CSS riêng mà không đụng bất kỳ phần tử mặc định nào của XenForo.
    • {{ link('help/terms') }} là cú pháp chuẩn của XenForo để tạo một liên kết đến trang Điều khoản & Nội quy.
  8. Nhấn Save và kiểm tra lại trang đăng ký của bạn.
tuy-bien-trang-dang-ky-2.png

Trang đăng ký là điểm chạm đầu tiên và là cơ hội để bạn tạo ra một ấn tượng tuyệt vời với các thành viên tiềm năng. Bằng cách kết hợp việc thêm các trường thông tin tùy chỉnh để hiểu rõ hơn về người dùng và việc chỉnh sửa template để đưa ra những hướng dẫn thân thiện, bạn có thể biến một form đăng ký tiêu chuẩn thành một công cụ chào đón và định hướng mạnh mẽ.

Hãy thử bắt đầu với việc thêm một trường tùy chỉnh đơn giản, bạn sẽ thấy việc này không hề khó và có thể mang lại những thông tin rất giá trị cho sự phát triển của cộng đồng.

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


VNXF.VN​
 
Back
Top