02 Cách Tạo Thanh Sidebar Trong WordPress Đơn Giản Cho Người Mới
Thanh sidebar là một phần không thể thiếu trong việc cá nhân hóa giao diện website WordPress. Đây là khu vực linh hoạt, nơi bạn có thể thêm các tiện ích như bài viết mới nhất, banner quảng cáo, hoặc hộp tìm kiếm để cải thiện trải nghiệm người dùng. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn chi tiết 2 cách tạo thanh sidebar trong WordPress — một không cần sử dụng code và một cách nâng cao dành cho những ai muốn tùy chỉnh mạnh mẽ hơn bằng lập trình.
Cách 1: Tạo Thanh Sidebar Trong WordPress Không Cần Dùng Code
Trước khi bắt đầu, có một điểm cần làm rõ: Sidebar và Widget là hai khái niệm khác nhau nhưng thường bị nhầm lẫn. Sidebar là khu vực hiển thị nằm bên cạnh nội dung chính của trang web, còn Widget là những “mảnh ghép chức năng” có thể chèn vào sidebar như đồng hồ, dự báo thời tiết, bài viết liên quan, hoặc khuyến mãi.
Bạn có đang tìm cách đơn giản nhất để thêm widget vào trang web mà không phải đụng đến dòng code nào? Dưới đây là hướng dẫn cụ thể từng bước cho bạn:
Bước 1: Đăng nhập vào trang quản trị WordPress
Truy cập địa chỉ URL có định dạng như sau: https://tên-miền-của-bạn/wp-admin. Nhập thông tin đăng nhập (username và password) để vào giao diện quản trị.
Bước 2: Truy cập vào Giao diện (Appearance) > Tiện ích (Widgets)
Sau khi vào được bảng điều khiển, ở thanh menu bên trái, chọn mục Giao diện (Appearance) rồi tiếp tục nhấn vào Tiện ích (Widgets). Tại đây, bạn sẽ bắt đầu tương tác với các vùng hiển thị của widget.
Bước 3: Xác định vùng sidebar bạn muốn chỉnh sửa
Tại giao diện Widgets, bạn sẽ thấy hai khu vực chính:
- Bên trái: Danh sách các tiện ích (widgets) có sẵn
- Bên phải: Danh sách các khu vực có thể chứa widget (ví dụ: Sidebar chính, Chân trang…)
Tên của từng vùng sidebar phụ thuộc vào theme bạn đang sử dụng, ví dụ như “Primary Sidebar”, “Footer 1”, v.v.
Bước 4: Tìm tiện ích phù hợp để thêm vào Sidebar
Bạn có thể sử dụng ô tìm kiếm ở góc trên bên phải để tìm widget mong muốn. Ví dụ:
- Gõ “Text” để tìm widget văn bản tùy chỉnh
- Gõ “Recent Posts” để hiển thị danh sách bài viết mới nhất
- Gõ “Categories” để thêm danh mục bài viết
Bước 5: Kéo thả widget vào vùng Sidebar mong muốn
Chọn widget phù hợp và kéo vào vùng sidebar đã mở rộng. Bạn có thể thả nhiều widget khác nhau và sắp xếp lại chúng theo thứ tự bằng thao tác kéo thả đơn giản.
Bước 6: Cấu hình từng widget
Khi bạn đã đưa widget vào sidebar, một giao diện cấu hình sẽ xuất hiện để bạn điền thông tin như:
- Widget Text: Tiêu đề, nội dung văn bản
- Widget Categories: Hiển thị dạng danh sách hay menu thả xuống, có muốn hiển thị số bài viết không
Mỗi widget có những lựa chọn tùy chỉnh riêng, bạn có thể xem thêm tài liệu chính thức từ WordPress.org để hiểu rõ từng loại.
Bước 7: Lưu thay đổi
Nhấn nút Lưu (Save) sau mỗi lần chỉnh sửa để đảm bảo thay đổi được áp dụng. Nếu muốn đóng khung cấu hình, bạn có thể nhấn nút Xong (Done).
Để kiểm tra kết quả, chọn “Xem trang web (Visit Site)” ở góc trái phía trên trong bảng điều khiển.
Cách 2: Tạo Thanh Sidebar Trong WordPress Bằng Code
Bạn muốn tạo một sidebar hoàn toàn mới, không đụng hàng, mang dấu ấn riêng biệt? Chỉ khi bạn nắm được cách tạo sidebar bằng code, bạn mới có thể tự do kiểm soát mọi thứ, từ bố cục cho đến chức năng hiển thị.
Dưới đây là hướng dẫn từng bước cho người đã quen với lập trình hoặc muốn khám phá thêm:
Bước 1: Truy cập trang quản trị WordPress
Như đã đề cập, bạn truy cập vào đường dẫn /wp-admin, đăng nhập bằng tài khoản quản trị để có toàn quyền chỉnh sửa.
Bước 2: Mở Visual Studio Code và tạo tệp PHP
Sử dụng trình soạn thảo mã như Visual Studio Code – phần mềm miễn phí, dễ dùng, được nhiều lập trình viên WordPress khuyên dùng.
- Vào File > New File > lưu tệp dưới dạng .php, ví dụ: sidebar-custom.php
- Lưu vào thư mục tương ứng trong thư mục theme (ví dụ: wp-content/themes/tên-theme-của-bạn/)
Bước 3: Viết code để đăng ký sidebar
Mở file functions.php trong thư mục theme và thêm đoạn mã sau:
function custom_theme_sidebar() {
register_sidebar(
array(
‘name’ => __( ‘Primary Sidebar’ ),
‘id’ => ‘primary-sidebar’,
‘description’ => __( ‘This is the primary sidebar.’ ),
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
)
);
}
add_action( ‘widgets_init’, ‘custom_theme_sidebar’ );
Đoạn mã này sẽ đăng ký một vùng sidebar mới với ID là primary-sidebar.
Bước 4: Gọi sidebar trong các file template
Trong các file như sidebar.php, index.php, hoặc page.php, bạn chèn đoạn code sau vào vị trí muốn hiển thị sidebar:
<?php
if ( is_active_sidebar( ‘primary-sidebar’ ) ) {
dynamic_sidebar( ‘primary-sidebar’ );
}
?>
Điều kiện is_active_sidebar() giúp kiểm tra xem vùng sidebar có widget nào không trước khi hiển thị.
Bước 5: Kiểm tra kết quả hiển thị
Sau khi lưu lại tất cả file, bạn truy cập trang web để xem sidebar đã xuất hiện đúng vị trí chưa. Có thể bạn sẽ cần bổ sung CSS để chỉnh sửa giao diện hiển thị. Một ví dụ điển hình là theme tự thiết kế của anh Minh – lập trình viên WordPress tại Hà Nội, anh đã tạo 3 sidebar hiển thị khác nhau cho từng loại bài viết, từ đó tăng thời gian người dùng ở lại trang lên đến 35%.
So sánh hai cách tạo Sidebar trong WordPress
Một số câu hỏi thường gặp
Sidebar là gì và có vai trò ra sao trong WordPress?
Sidebar là vùng hiển thị tiện ích bên cạnh nội dung chính, giúp bạn cung cấp thêm thông tin, điều hướng hoặc quảng cáo. Nó cải thiện trải nghiệm người dùng mà không làm rối giao diện chính.
Tôi muốn biết trang web của mình có bao nhiêu vùng sidebar?
Điều này phụ thuộc vào theme bạn dùng. Truy cập Appearance > Widgets để xem danh sách các vùng hiển thị, thường được đặt tên như “Primary Sidebar”, “Footer Sidebar”, v.v.
Làm sao để thêm tiện ích mới vào sidebar?
Vào Giao diện > Tiện ích, tìm tiện ích phù hợp rồi kéo thả vào vùng sidebar mong muốn. Ví dụ: muốn thêm bảng thời tiết, chỉ cần kéo widget “Weather” (nếu có plugin hỗ trợ) vào sidebar.
Có thể xóa một widget khỏi sidebar không?
Hoàn toàn có thể! Mở rộng vùng sidebar, tìm widget cần xóa và nhấn vào nút Delete. Bạn cũng có thể kéo widget đó ra ngoài để xóa nhanh chóng.
Cấu hình widget như thế nào?
Mỗi widget đều có phần cấu hình riêng. Nhấn vào biểu tượng mũi tên ▼ trên widget để mở khung cài đặt. Nhập các thông tin theo yêu cầu, sau đó nhấn Lưu.
Lời kết
Dù bạn là người mới hay một developer dày dạn kinh nghiệm, việc tạo và quản lý sidebar trong WordPress đều có giải pháp phù hợp. Không chỉ giúp tối ưu giao diện, sidebar còn góp phần cải thiện khả năng chuyển đổi và trải nghiệm người dùng. Bạn chọn phương pháp nào: kéo-thả trực quan hay tự tay viết code linh hoạt? Hãy để lại bình luận để chia sẻ kinh nghiệm của bạn nhé! Chúc bạn thành công trên hành trình chinh phục WordPress!