Hướng Dẫn Tạo Nút Back to Top WordPress (2 Cách Cực Dễ)

Bạn đã bao giờ lướt một bài viết dài hoặc một trang sản phẩm chi tiết và cảm thấy mệt mỏi khi phải cuộn chuột mãi để trở lại đầu trang? Đây là một trải nghiệm không mấy dễ chịu và có thể khiến người dùng rời khỏi website của bạn. Giải pháp rất đơn giản: tạo nút Back to Top trong WordPress.

Trong bài viết này, Thiết kế Website WordPress sẽ hướng dẫn bạn 2 cách chi tiết để thêm nút “trở về đầu trang” vào website, giúp cải thiện đáng kể trải nghiệm điều hướng cho người đọc. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, bạn đều có thể thực hiện dễ dàng.

Tại sao website của bạn nên có nút “Trở về đầu trang”?

Trước khi đi vào hướng dẫn, hãy cùng xem qua những lợi ích mà nút Back to Top (hay còn gọi là scroll to top) mang lại:

• Cải thiện trải nghiệm người dùng (UX): Giúp người đọc quay lại đầu trang nhanh chóng chỉ với một cú nhấp chuột, đặc biệt hữu ích trên các trang có nội dung dài.
• Tăng tính chuyên nghiệp: Một chi tiết nhỏ nhưng cho thấy sự quan tâm của bạn đến sự tiện lợi của người dùng.
• Giảm tỷ lệ thoát trang: Khi người dùng điều hướng dễ dàng hơn, họ có xu hướng ở lại trang của bạn lâu hơn để khám phá các nội dung khác.

Cách 1: Tạo nút Back to Top WordPress bằng Plugin (Khuyên dùng)

Đây là phương pháp đơn giản, an toàn và nhanh chóng nhất, phù hợp với 99% người dùng WordPress, đặc biệt là những ai không rành về code.

Bước 1: Cài đặt Plugin “WPFront Scroll Top”

1. Từ trang quản trị WordPress, truy cập Plugins -> Add New (Cài mới).
2. Trong ô tìm kiếm, gõ “WPFront Scroll Top”.
3. Nhấn Install Now (Cài đặt) và sau đó Activate (Kích hoạt) plugin.

Bước 2: Cấu hình hiển thị cho nút

Sau khi kích hoạt, bạn vào Settings (Cài đặt) -> Scroll Top. Tại đây, bạn sẽ có rất nhiều tùy chọn:

• Enable: Tích vào ô này để bật nút Back to Top.
• Scroll Offset: Khoảng cách từ đầu trang mà người dùng phải cuộn xuống để nút xuất hiện (ví dụ: 200px).
• Button Size, Opacity, Position: Tùy chỉnh kích thước, độ mờ, và vị trí của nút (phải dưới, trái dưới…).
• Button Style: Bạn có thể chọn hiển thị dạng hình ảnh (Image) hoặc chỉ là văn bản (Text). Plugin đã có sẵn nhiều mẫu nút đẹp mắt.
• Auto Hide: Tự động ẩn nút sau một khoảng thời gian không sử dụng.

Bước 3: Lưu và kiểm tra kết quả

Sau khi tùy chỉnh xong, nhấn Save Changes (Lưu thay đổi) và ra ngoài trang chủ để cuộn trang và xem thành quả của bạn!

Cách 2: Thêm nút Back to Top vào WordPress bằng Code (Nâng cao)

Phương pháp này dành cho những ai muốn toàn quyền kiểm soát giao diện và không muốn cài thêm plugin.

Lưu ý quan trọng: Việc chỉnh sửa trực tiếp file của theme gốc (parent theme) rất rủi ro và có thể bị mất khi cập nhật theme. Bạn nên:

1. Sử dụng Child Theme.
2. Hoặc thêm CSS vào Appearance -> Customize -> Additional CSS.
3. Hoặc thêm JavaScript bằng plugin WPCode – Insert Headers and Footers + Custom Code Snippets.

Bước 1: Thêm HTML và CSS

Đầu tiên, bạn cần thêm đoạn HTML này vào chân trang (footer). Cách an toàn nhất là dùng plugin WPCode:

1. Cài đặt và kích hoạt plugin WPCode.
2. Vào Code Snippets -> Header & Footer.
3. Dán đoạn mã sau vào ô Footer:

<a href="#" id="scrolltotop" title="Lên đầu trang"></a>

Tiếp theo, thêm CSS để tạo kiểu cho nút. Truy cập Appearance (Giao diện) -> Customize (Tùy biến) -> Additional CSS (CSS bổ sung) và dán đoạn code sau:

#scrolltotop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    display: none; /* Ẩn ban đầu */
    transition: opacity 0.4s;
    z-index: 999;
    text-decoration: none;
}

#scrolltotop::before {
    content: '▲'; /* Sử dụng ký tự mũi tên, không cần hình ảnh */
}

#scrolltotop:hover {
    opacity: 0.7;
}

Bước 2: Thêm mã JavaScript (jQuery)

Để nút có thể tự động ẩn/hiện khi cuộn trang, chúng ta cần một đoạn JavaScript. Hãy tiếp tục sử dụng plugin WPCode:

1. Vào Code Snippets -> Add Snippet -> Add Your Custom Code.
2. Đặt tên cho snippet, ví dụ: “Back to Top Script”.
3. Chọn Code Type là JavaScript Snippet.
4. Dán đoạn mã sau vào ô code:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 200) { // Hiển thị khi cuộn xuống 200px
            $('#scrolltotop').fadeIn();
        } else {
            $('#scrolltotop').fadeOut();
        }
    });
    $('#scrolltotop').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop:0}, 500); // 500 là tốc độ cuộn (ms)
    });
});

5. Ở phần Insertion, chọn Auto Insert và Location là Site Wide Footer.
6. Nhấn Activate và Save Snippet.

Bước 3: Kiểm tra lại thành quả

Bây giờ hãy tải lại trang web của bạn. Một nút trở về đầu trang sẽ xuất hiện ở góc dưới bên phải khi bạn cuộn xuống.

So sánh 2 phương pháp: Plugin vs. Code

FAQ – Câu hỏi thường gặp

Làm thế nào để thay đổi biểu tượng của nút Back to Top?

Với phương pháp plugin, bạn chỉ cần vào phần cài đặt và chọn icon khác. Với phương pháp code, bạn có thể thay đổi ký tự ▲ trong content: '▲'; của CSS thành bất kỳ ký tự nào, hoặc thay background-color bằng background-image để dùng hình ảnh riêng.

Nút Back to Top có làm chậm website không?

Không đáng kể. Cả hai phương pháp đều sử dụng code rất nhẹ. Tuy nhiên, việc cài quá nhiều plugin có thể ảnh hưởng đến hiệu suất, vì vậy hãy luôn chọn những plugin được tối ưu tốt.

Tôi có thể dùng AI để viết code cho nút này không?

Hoàn toàn có thể! Bạn có thể yêu cầu các AI như ChatGPT hoặc Gemini: “Hãy viết cho tôi code HTML, CSS, và jQuery để tạo một nút back to top cho website”. AI sẽ cung cấp cho bạn các đoạn mã tương tự như trên. Tuy nhiên, bạn vẫn cần biết cách chèn các đoạn mã này vào WordPress một cách an toàn (như hướng dẫn ở Cách 2).

Lời kết

Vậy là bạn đã biết cách tạo nút Back to Top trong WordPress để nâng cao trải nghiệm cho người dùng. Đối với hầu hết mọi người, sử dụng plugin là lựa chọn tối ưu nhất. Nếu bạn cần những tùy chỉnh sâu hơn hoặc muốn tối ưu toàn diện website WordPress của mình, đừng ngần ngại liên hệ với chúng tôi.

Cần hỗ trợ thêm? Inbox tại đây! Chúc các bạn thành công!