Sidebar là gì? Sử dụng Sidebar trong WordPress

Sidebar là gì?

WordPress Theme Handbook giải thích sidebar là bất kỳ vùng widget hóa nào của theme. Vì vậy, sidebar không nhất thiết phải là một cột dọc nằm sát nội dung bài viết.

Một website có thể có nhiều vùng như:

• Sidebar bài viết.
• Sidebar trang sản phẩm.
• Sidebar danh mục.
• Widget area ở header.
• Widget area ở footer.
• Vùng lọc sản phẩm.
• Vùng CTA hoặc thông tin tác giả.

Theme quyết định vùng nào tồn tại, vị trí xuất hiện và template nào được phép sử dụng. Người quản trị chỉ có thể thêm widget hoặc block vào những vùng mà theme đã đăng ký hoặc thiết kế sẵn.

Sidebar, widget và widget area khác nhau thế nào?

Trong classic theme, người quản trị thường nhìn thấy các widget area tại Giao diện → Widget. Từ WordPress 5.8, block-based Widgets Editor cho phép chèn block vào những widget area mà theme đã đăng ký.

Với block theme, sidebar có thể không xuất hiện trong màn hình Widgets. Thay vào đó, người quản trị chỉnh template hoặc template part bằng Site Editor.

Sidebar có bắt buộc trong WordPress không?

Không. Theme có thể không đăng ký sidebar hoặc chỉ dùng sidebar cho một số template.

Website tin tức, blog dài và cửa hàng thường dùng sidebar để bổ sung điều hướng hoặc bộ lọc. Ngược lại, landing page, trang bán hàng tập trung và bài viết cần trải nghiệm đọc liền mạch có thể hiệu quả hơn với bố cục toàn chiều rộng.

Sidebar thường được đặt ở đâu?

Sidebar bên trái

Sidebar bên trái phù hợp khi thành phần điều hướng hoặc bộ lọc cần được nhìn thấy sớm. Cách bố trí này thường xuất hiện ở trang thương mại điện tử, tài liệu hướng dẫn và dashboard.

Tuy nhiên, sidebar bên trái có thể đẩy nội dung chính ra khỏi vị trí ưu tiên trên màn hình nhỏ. Thiết kế responsive cần quyết định vùng này sẽ:

• Chuyển xuống dưới nội dung.
• Thu gọn thành nút mở bộ lọc.
• Ẩn những widget không cần thiết.
• Giữ cố định khi cuộn nếu có đủ không gian.

Sidebar bên phải

Sidebar bên phải thường phù hợp với blog vì người đọc tiếp cận nội dung chính trước, sau đó mới thấy bài liên quan, tác giả, mục lục hoặc CTA.

Không nên mặc định sidebar bên phải sẽ tăng doanh số. Cần theo dõi click, scroll, chuyển đổi và hành vi mobile để xác định widget nào thực sự tạo giá trị.

Sidebar trong header hoặc footer

Theo cách gọi kỹ thuật của WordPress, widget area ở header hoặc footer vẫn có thể được đăng ký bằng cơ chế sidebar. Tên hiển thị nên mô tả đúng vị trí như “Footer Column 1” thay vì dùng tên chung “Sidebar 2”.

Sidebar dạng off-canvas

Trên mobile, bộ lọc hoặc menu phụ có thể được đưa vào panel mở từ cạnh màn hình. Cách này tiết kiệm không gian nhưng cần:

• Nút mở có nhãn rõ.
• Quản lý focus bàn phím.
• Có nút đóng dễ nhận biết.
• Không khóa cuộn sai cách.
• Không che nội dung quan trọng.

Sidebar nên chứa nội dung gì?

Nội dung sidebar cần hỗ trợ mục tiêu của template, không phải tập hợp mọi widget đang có.

Tìm kiếm

Widget tìm kiếm hữu ích khi website có nhiều nội dung và công cụ tìm kiếm nội bộ hoạt động tốt. Không nên đặt hai ô tìm kiếm giống nhau trong header và sidebar nếu không có mục đích khác biệt.

Bài viết liên quan

Danh sách liên quan cần dựa trên chủ đề hoặc hành trình người đọc. “Bài mới nhất” không phải lúc nào cũng liên quan với nội dung hiện tại.

Danh mục và điều hướng

Danh mục giúp người dùng khám phá sâu hơn, nhưng danh sách quá dài tạo nhiễu. Nên ưu tiên nhóm chủ đề chính và cấu trúc dễ quét.

CTA và biểu mẫu

CTA sidebar nên ngắn, phù hợp với nội dung và không lặp quá nhiều. Biểu mẫu dài trong cột hẹp thường khó sử dụng trên mobile.

Bộ lọc sản phẩm

Bộ lọc cần phản ánh thuộc tính mà khách hàng thực sự dùng. Mỗi filter có thể tạo truy vấn, URL và JavaScript; vì vậy, thêm quá nhiều bộ lọc có thể làm chậm trang và phức tạp hóa SEO.

Sidebar ảnh hưởng UX và SEO thế nào?

Chiều rộng nội dung

Sidebar làm giảm chiều rộng cột chính. Nếu cột bài viết quá hẹp, người đọc phải xuống dòng nhiều và khó theo dõi bảng hoặc hình ảnh.

Thứ tự DOM

Vị trí hiển thị bằng CSS không nhất thiết giống thứ tự trong HTML. Nội dung chính nên xuất hiện hợp lý trong DOM để hỗ trợ bàn phím, trình đọc màn hình và khả năng hiểu cấu trúc.

Hiệu suất tải trang

Mỗi widget có thể tải CSS, JavaScript, ảnh, iframe hoặc request bên thứ ba. Một sidebar với Fanpage embed, quảng cáo, form, bài mới và chat có thể làm tăng payload và main-thread work.

Internal link

Sidebar tạo liên kết lặp lại trên nhiều URL. Liên kết điều hướng có thể hữu ích, nhưng không nên thay thế internal link theo ngữ cảnh trong nội dung.

Chuyển đổi

CTA trong sidebar có thể hỗ trợ người dùng đã sẵn sàng hành động, nhưng cũng có thể cạnh tranh với CTA chính. Nên đo click và conversion theo template.

Trải nghiệm mobile

Trên màn hình nhỏ, sidebar thường chuyển xuống cuối. Nếu chứa hàng chục widget, người dùng phải cuộn qua một phần rất dài sau bài viết.

Đánh giá trải nghiệm người dùng cần xem sidebar trong toàn bộ hành trình, không chỉ ảnh chụp desktop.

Ba dữ kiện về sidebar trong WordPress

Cách quản lý sidebar trong classic theme

Classic theme thường đăng ký sidebar bằng PHP và cho phép người quản trị thêm nội dung qua màn hình Widgets.

Truy cập Giao diện → Widget

Trong trang quản trị WordPress:

1. Mở Giao diện.
2. Chọn Widget.
3. Chọn widget area mà theme cung cấp.
4. Thêm block hoặc legacy widget.
5. Sắp xếp thứ tự.
6. Lưu và kiểm tra ngoài website.

Tên, số lượng và vị trí widget area thay đổi theo theme. Một theme có thể chỉ có “Sidebar”, trong khi theme khác có “Blog Sidebar”, “Shop Sidebar” và nhiều cột footer.

Quản lý qua Customizer

Một số classic theme hỗ trợ Giao diện → Tùy biến → Widget. Customizer cho phép xem trước thay đổi trước khi xuất bản.

Tùy chọn này có thể không xuất hiện nếu:

• Theme không đăng ký widget area ở template đang xem.
• Theme không dùng Customizer cho widget.
• Website dùng block theme.
• Plugin hoặc cấu hình đã thay đổi trải nghiệm Widgets.

Cách tạo sidebar trong block theme

Block theme sử dụng template HTML, block và Site Editor thay cho hệ thống template PHP truyền thống. Một vùng sidebar có thể được xây bằng Columns, Group, Query, Navigation và Template Part.

Không nên ép block theme quay về widget cổ điển chỉ để có sidebar. Cách triển khai nên theo kiến trúc của theme đang dùng.

Cách đăng ký sidebar bằng PHP

Phần này dành cho classic theme hoặc child theme. Không sửa trực tiếp file của parent theme vì cập nhật theme có thể ghi đè thay đổi.

Đăng ký widget area

Sidebar thường được đăng ký trong hook widgets_init bằng hàm register_sidebar().

<?php
function xvm_register_widget_areas(): void {
    register_sidebar(
        array(
            'name'          => __( 'Sidebar bài viết', 'xvm-child' ),
            'id'            => 'post-sidebar',
            'description'   => __( 'Hiển thị bên cạnh bài blog.', 'xvm-child' ),
            'before_sidebar'=> '<aside id="%1$s" class="xvm-site-sidebar %2$s" aria-label="Nội dung bổ trợ">',
            'after_sidebar' => '</aside>',
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
            'show_in_rest'  => true,
        )
    );
}
add_action( 'widgets_init', 'xvm_register_widget_areas' );

Các tham số quan trọng:

ID nên được khai báo thủ công, viết thường và không thay đổi tùy tiện sau khi website đã có widget. Nếu thay ID, các widget cũ có thể không còn gắn với vùng mới.

Hiển thị sidebar trong template

Dùng is_active_sidebar() để tránh xuất wrapper rỗng và dynamic_sidebar() để render widget.

<?php if ( is_active_sidebar( 'post-sidebar' ) ) : ?>
    <?php dynamic_sidebar( 'post-sidebar' ); ?>
<?php endif; ?>

Nếu dùng file riêng như sidebar-post.php, template có thể gọi:

<?php get_sidebar( 'post' ); ?>

Hàm get_sidebar( 'post' ) tìm file sidebar-post.php. Bên trong file đó có thể gọi dynamic_sidebar( 'post-sidebar' ).

Có nên dùng plugin tạo sidebar?

Plugin có thể hữu ích khi cần sidebar khác nhau theo loại bài, danh mục, trang hoặc vai trò người dùng mà theme không hỗ trợ sẵn.

Tuy nhiên, không nên cài plugin chỉ vì chưa tìm thấy tùy chọn trong theme. Trước tiên cần kiểm tra:

• Theme có widget area nào.
• Theme Options hoặc Header Builder có chức năng tương đương không.
• Website dùng classic theme hay block theme.
• Plugin có còn được cập nhật và tương thích không.
• Plugin tạo thêm CSS, JavaScript hoặc truy vấn nào.
• Sidebar có thực sự cần điều kiện hiển thị phức tạp không.

Bài WordPress Plugin là gì giúp phân biệt chức năng nên để ở plugin và chức năng thuộc giao diện theme.

Cách tối ưu sidebar cho mobile

Không giữ bố cục hai cột quá lâu

Ở màn hình hẹp, cột chính cần đủ rộng để đọc. Sidebar thường nên chuyển xuống dưới hoặc thành panel mở theo yêu cầu.

Ưu tiên nội dung chính trong DOM

Nếu sidebar không phải điều hướng thiết yếu, nội dung bài nên xuất hiện trước để trình đọc màn hình và bàn phím tiếp cận đúng thứ tự.

Giảm số widget

Mobile không cần sao chép nguyên sidebar desktop. Có thể giữ mục lục hoặc CTA chính và bỏ widget phụ.

Tránh sticky quá dài

Một sidebar cao hơn viewport nhưng bị sticky có thể khiến người dùng không tiếp cận được phần cuối. Chỉ sticky một thành phần ngắn và có khoảng dừng phù hợp.

Kiểm tra Core Web Vitals

Embed, ảnh và script trong sidebar có thể ảnh hưởng LCP, INP và CLS. Cần giữ kích thước nội tại, tải đúng thời điểm và hạn chế third-party script.

Cách tối ưu sidebar cho accessibility

Cách đo hiệu quả sidebar

Không nên giữ một widget chỉ vì “website nào cũng có”. Có thể đánh giá bằng:

• Tỷ lệ người dùng nhìn thấy sidebar.
• CTR của từng widget.
• Conversion sau click.
• Scroll depth.
• Tỷ lệ dùng bộ lọc.
• Tìm kiếm nội bộ.
• Ảnh hưởng đến tốc độ tải.
• Khác biệt giữa desktop và mobile.

Khi thử bỏ sidebar, cần so sánh:

• Thời gian đọc.
• Số trang mỗi phiên.
• Click internal link.
• Lead hoặc doanh thu.
• Core Web Vitals.
• Tỷ lệ thoát theo loại trang.

Một đợt Audit website nên đánh giá cả hiệu suất, UX, internal link và giá trị kinh doanh của sidebar thay vì chỉ kiểm tra giao diện.

Những sai lầm thường gặp

“Sidebar chỉ hữu ích khi nó giúp người dùng hoàn thành bước tiếp theo mà không làm gián đoạn nhiệm vụ chính. Một cột chứa đầy banner, bài mới và nút liên hệ có thể trông nhiều thông tin, nhưng thực tế lại làm giảm sự tập trung và tăng chi phí tải trang.”

Anh Thắng Giấu Tên – CEO Xuyên Việt Media

Khi nào nên nhờ kỹ thuật hỗ trợ?

Người quản trị có thể tự sắp xếp block hoặc widget nếu theme đã cung cấp vùng phù hợp. Nên làm việc với kỹ thuật khi cần:

• Đăng ký widget area mới.
• Thêm sidebar theo điều kiện phức tạp.
• Sửa template PHP hoặc template part.
• Tạo bộ lọc sản phẩm tùy chỉnh.
• Xử lý sticky, off-canvas và accessibility.
• Giảm CSS hoặc JavaScript do widget tạo ra.
• Khắc phục sidebar làm vỡ responsive.
• Di chuyển widget khi đổi theme.

Dịch vụ quản trị website phù hợp khi doanh nghiệp cần kiểm tra theme, plugin, cache, widget và hoạt động hiển thị định kỳ.

Nếu cần xây lại bố cục và hệ thống template, thiết kế website nên xác định rõ sidebar nào dùng cho blog, cửa hàng, dịch vụ và mobile ngay từ giai đoạn kiến trúc giao diện.

Câu hỏi thường gặp về sidebar

Kết luận

Sidebar trong WordPress là vùng nội dung bổ trợ được theme định nghĩa, không chỉ là một thanh nằm bên cạnh bài viết. Classic theme thường quản lý sidebar bằng widget area, còn block theme có thể xây vùng tương tự bằng template part và block.

Một sidebar tốt phải hỗ trợ mục tiêu chính của trang, phù hợp trên mobile, không tạo quá nhiều tài nguyên tải và có nội dung liên quan. Việc thêm càng nhiều widget không đồng nghĩa trải nghiệm hoặc chuyển đổi sẽ tốt hơn.

Người quản trị có thể tự sắp xếp widget khi theme đã cung cấp vùng phù hợp. Các thay đổi liên quan PHP, template, điều kiện hiển thị và accessibility nên được triển khai trong child theme hoặc môi trường staging có kiểm soát.