Sidebar là gì? Cách tạo và tối ưu hiệu quả trên WordPress

Khi nhắc đến cấu trúc website không thể không nhắc đến sidebar. Nhưng chính xác thì sidebar là gì? Tại sao nó lại được sử dụng rộng rãi trong thiết kế web?

Hãy cùng Pima Digital tìm hiểu cách tối ưu sidebar website thu hút, nâng cao trải nghiệm người dùng và tăng tỉ lệ chuyển đổi ngay tại bài viết sau nhé!

Sidebar là gì? Cách tạo và tối ưu hiệu quả trên WordPress

Sidebar là gì? Tầm quan trọng đối với Website

Sidebar hay thanh bên chính là khu vực hiển thị thông tin dạng cột nằm phần rìa website. Người quản trị thường thêm các thành phần như thanh tìm kiếm, lịch, bài viết mới nhất, danh mục sản phẩm… và các yếu tố liên quan.

Bạn cần xác định khu vực bài viết trước khi xác định vị trí đặt sidebar để đảm bảo cấu trúc cân đối của website. Nhiều người thường nghĩ rằng sidebar chỉ cố định ở một vị trí, nhưng thực tế, sidebar có thể xuất hiện ở rất nhiều vị trí khác nhau trên giao diện, mang đến sự đa dạng và linh hoạt cho thiết kế website.

Vị trí sidebar phổ biến trên website

5 kiểu sidebar website phổ biến nhất hiện nay

3 bố cục sidebar chuyên nghiệp

• Bố cục nổi (Floating layout): Tự do đặt sidebar ở bất kỳ vị trí nào trên trang, tạo ra những khối nội dung độc lập và dễ quản lý. Sử dụng hàm layout_sidebar() kết hợp với card() để tạo ra những giao diện đa dạng và thu hút
• Bố cục đầy (Filling layout): Chiếm trọn không gian bên cạnh nội dung chính, tạo cảm giác liền mạch và chuyên nghiệp. Với page_sidebar(), bạn có thể dễ dàng tạo ra các sidebar phức tạp, chứa nhiều phần tử con
• Bố cục đa trang (Multi-page layout): Hiển thị xuyên suốt nhiều trang, giúp người dùng dễ dàng định hướng và tìm kiếm thông tin. Sử dụng page_navbar() hoặc navset_card_tab() để tạo ra các sidebar thống nhất trên toàn bộ website.

Một số bố cục thiết kế sidebar

Hướng dẫn tạo sidebar Website dễ dàng thông qua 2 cách

1. Tạo sidebar đơn giản từ Widget

Widget là những phần nội dung nhỏ, linh hoạt giúp bạn tùy biến giao diện website. Bạn có thể thêm nhiều loại widget khác nhau như thông tin liên hệ, banner quảng cáo, danh mục sản phẩm… vào sidebar để thu hút người dùng và hướng họ đến những nội dung quan trọng.

Sử dụng widget tạo nội dung trên sidebar

Và để tạo sidebar qua Widget bạn thực thiện các bước sau:

Bước 1: Truy cập vào khu vực quản trị WordPress

• Đăng nhập vào website của bạn
• Tìm và click vào phần “Dashboard” (Bảng điều khiển) hoặc biểu tượng WordPress ở góc trên bên trái màn hình.

Tìm thanh Dashboard trên WordPress

Bước 2: Vào trang quản lý Widget

• Trong bảng điều khiển, tìm và chọn mục “Appearance” (Giao diện)
• Trong menu con của “Appearance“, chọn “Widgets” (Widget).

Giao diện Widgets trên Appearance

Bước 3: Tìm hiểu cấu trúc trang Widgets

• Khu vực hiển thị: Bên phải màn hình, bạn sẽ thấy các khu vực khác nhau để đặt widget, ví dụ như “sidebar“, “Footer“, “Header“… Mỗi khu vực này tương ứng với một vị trí cụ thể trên trang web của bạn
• Danh sách widget: Bên trái màn hình là danh sách các loại widget có sẵn, như “Text“, “Categories“, “Recent Posts“… Mỗi widget có một chức năng khác nhau, ví dụ:
  • Text: Dùng để chèn đoạn văn bản tùy chỉnh
  • Categories: Hiển thị danh mục bài viết
  • Recent Posts: Hiển thị các bài viết mới nhất.

Tùy chỉnh sidebar trong thanh menu

Bước 4: Thêm widget vào sidebar

• Chọn widget: Tìm widget mà bạn muốn thêm vào sidebar (ví dụ: “Recent Posts”)
• Kéo và thả: Click vào widget đó và kéo thả vào khu vực “sidebar” bên phải
• Cấu hình widget: Sau khi thả widget vào sidebar, một cửa sổ cấu hình sẽ hiện ra. Tại đây, bạn có thể tùy chỉnh các cài đặt của widget như tiêu đề, số lượng bài viết hiển thị…

Tùy chỉnh vị trí sidebar trên menu bằng cách kéo thả

Bước 5: Lưu thay đổi

Sau khi cấu hình xong, hãy nhớ click vào nút “Save” (Lưu) để lưu lại các thay đổi.

Lưu lại tùy chỉnh sidebar trên widgets

2. Tạo sidebar nhanh chóng từ Custom Sidebars

Bước 1: Truy cập vào trình tùy chỉnh

• Đăng nhập vào website của bạn
• Trong bảng điều khiển, tìm và chọn mục “Giao diện” (Appearance)
• Trong menu con của “Giao diện”, chọn “Tùy chỉnh” (Customize).

Nếu không có sẵn, bạn hãy thêm plugin custom sidebar

Bước 2: Tìm đến khu vực sidebar

• Một giao diện mới sẽ mở ra, với thanh công cụ ở bên trái và khung xem trước website ở bên phải
• Trong thanh công cụ, bạn sẽ thấy nhiều tùy chọn khác nhau. Tìm và click vào mục “Widgets” hoặc “sidebar“. Tên gọi có thể khác nhau tùy thuộc vào giao diện bạn đang sử dụng.

Tùy chỉnh vị trí siderbar trên custom sidebars

Bước 3: Thêm và chỉnh sửa widget

• Một danh sách các khu vực hiển thị sẽ xuất hiện. Chọn vào khu vực “sidebar” mà bạn muốn chỉnh sửa
• Bạn sẽ thấy danh sách các widget đã có và các widget có sẵn để bạn thêm
• Thêm widget: Kéo và thả widget từ danh sách bên trái vào khu vực sidebar
• Chỉnh sửa widget: Click vào widget để mở cửa sổ cài đặt, tại đây bạn có thể tùy chỉnh tiêu đề, nội dung…
• Sắp xếp widget: Kéo và thả các widget để sắp xếp chúng theo thứ tự mong muốn.

Tùy chỉnh vị trí, theme sidebars

Bước 4: Xem trước và lưu thay đổi

• Trong khi chỉnh sửa, bạn có thể xem trước kết quả trực tiếp trên khung xem trước bên phải
• Khi đã hoàn tất, hãy click vào nút “Xuất bản” (Publish) để lưu lại các thay đổi.

Lưu thay đổi sau khi tùy chỉnh sidebar

Cách nhanh nhất để hiển thị Sidebar WordPress

Cách 1: Tạo file sidebar.php

• Bước 1 : Tạo file mới: Trong thư mục của theme bạn đang sử dụng, tạo một file mới có tên là php
• Bước 2 : Thêm mã PHP: Mở file sidebar.php và dán đoạn mã sau vào sau đó thay thế your_sidebar_id bằng ID của sidebar bạn đã tạo trong phần quản trị WordPress:

<?php if ( is_active_sidebar( ‘your_sidebar_id’ ) ) : ?> <?php dynamic_sidebar( ‘your_sidebar_id’ ); ?> <?php endif; ?>

• Bước 3 : Nhúng vào theme: Tại vị trí bạn muốn hiển thị sidebar trong các file template của theme (ví dụ: index.php, single.php), thêm dòng mã sau:

<?php get_sidebar(); ?>

Tạo sidebars từ chủ đề con functions.php

Cách 2: Sử dụng hàm dynamic_sidebar trực tiếp

• Bước 1 : Xác định vị trí: Tìm đến vị trí trong file template của theme mà bạn muốn hiển thị sidebar.
• Bước 2 : Thêm mã PHP: Dán đoạn mã sau vào vị trí đó:

<?php if ( is_active_sidebar( ‘your_sidebar_id’ ) ) : ?>

<?php dynamic_sidebar( ‘your_sidebar_id’ ); ?>

<?php endif; ?>

Sử dụng hàm dynamic_sidebar

Chú thích:

• is_active_sidebar(): Hàm này kiểm tra xem sidebar có đang hoạt động hay không
• dynamic_sidebar(): Hàm này hiển thị nội dung của sidebar
• get_sidebar(): Hàm này gọi đến file sidebar.php mà bạn đã tạo.

Hướng dẫn tạo sidebar thu hút cho website

Trước khi điều chỉnh nội dung hiển thị trong website WordPress, bạn cần tạo sidebar tại functions.php của theme. Sau đó sử dụng hàm register_sidebar(), bạn cần cung cấp một số thông tin quan trọng để xác định và cấu hình sidebar.

Vị trí các widgets khi điều chỉnh sidebar

• Name: Tên hiển thị của sidebar trong giao diện quản trị WordPress sẽ giúp bạn dễ dàng nhận biết và quản lý các sidebar khác nhau
• ID: Đây là một mã định danh duy nhất, dùng để gọi sidebar trong các file template của theme. ID thường được viết bằng chữ thường và không chứa khoảng trắng
• Description: Một đoạn mô tả ngắn gọn về mục đích sử dụng của sidebar. Mô tả này sẽ hiển thị trong giao diện quản trị, giúp bạn nhớ lại chức năng của từng sidebar
• Class: Đây là tên của một lớp CSS. Lớp CSS này sẽ được áp dụng cho các widget bên trong sidebar, giúp bạn tùy chỉnh giao diện của sidebar bằng CSS
• Before_widget, After_widget, Before_title, After_title: Đây là các đoạn mã HTML được chèn vào các vị trí khác nhau trong sidebar, giúp bạn tùy chỉnh cấu trúc HTML của sidebar.

>> Tham khảo ngay:

• HTML là gì? 7 điều cốt lõi cần biết về ngôn ngữ html
• CSS là gì? CSS dùng để làm gì trong thiết kế website?

Làm thế nào để sidebar WordPress hoạt động hiệu quả nhất?

Xác định điểm đặt sidebar lý tưởng

Lựa chọn vị trí sidebar cần cân nhắc kỹ các yếu tố như thiết kế, nội dung và hành vi người dùng:

• Bên trái màn hình: Bạn có thể đặt menu điều hướng chính, form đăng ký hoặc thậm chí là những bài viết nổi bật để tạo điểm nhấn và hướng người dùng đến các hành động mong muốn
• Bên phải màn hình: Cung cấp thêm thông tin liên quan và khuyến khích người dùng khám phá sâu hơn với các widget như “Bài viết mới nhất”, “Sản phẩm bán chạy” hay banner quảng cáo để tăng tương tác và hiệu quả chuyển đổi
• Cả hai bên màn hình: Việc bố trí các yếu tố điều hướng như menu, danh mục sản phẩm ở cả hai bên giúp người dùng dễ dàng truy cập thông tin, từ đó nâng cao trải nghiệm sử dụng.

4 cách tối ưu nội dung trên sidebar hiệu quả

Cập nhật thông tin

• Bài viết mới: Giới thiệu các sản phẩm, dịch vụ mới, bài viết blog hoặc các bài viết cập nhật về công ty
• Ưu đãi đặc biệt: Thông báo về các chương trình khuyến mãi, giảm giá, mã giảm giá để thu hút khách hàng
• Sự kiện: Chia sẻ thông tin về các sự kiện sắp diễn ra, hội thảo, workshop.

Tương tác với khách hàng

• Form đăng ký: Thu thập thông tin khách hàng để gửi bản tin, thông báo khuyến mãi hoặc phục vụ cho các chiến dịch marketing
• Nút chia sẻ: Khuyến khích người dùng chia sẻ nội dung trên các mạng xã hội, giúp tăng độ phủ sóng của website
• Khảo sát: Thu thập ý kiến phản hồi của khách hàng để cải thiện sản phẩm và dịch vụ.

Tăng độ tin cậy

• Chứng nhận: Hiển thị các chứng nhận, giải thưởng mà công ty đạt được để khẳng định uy tín
• Đánh giá khách hàng: Chia sẻ những đánh giá tích cực từ khách hàng để tạo lòng tin
• Con số thống kê: Trình bày các con số ấn tượng về doanh nghiệp (ví dụ: số lượng khách hàng, số năm hoạt động) để tạo sự tin tưởng.

Tính năng nâng cao

• Sticky sidebar: Giúp sidebar luôn cố định ở một vị trí nhất định khi người dùng cuộn trang, đảm bảo thông tin quan trọng luôn hiển thị
• Menu điều hướng: Cung cấp một menu điều hướng bổ sung để giúp người dùng dễ dàng tìm kiếm thông tin
• Widget tìm kiếm: Cho phép người dùng tìm kiếm thông tin trên website một cách nhanh chóng.

Tối ưu nội dung và thành phần sidebar để tăng trải nghiệm khách hàng

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

1. Sidebar có tác dụng gì trên Website?

• Tổ chức nội dung: Giúp người dùng dễ dàng tìm kiếm thông tin
• Tăng tương tác: Thu hút người dùng thực hiện các hành động như đăng ký, mua hàng
• Cải thiện trải nghiệm người dùng: Làm cho website trở nên thân thiện và dễ sử dụng hơn
• Hỗ trợ SEO: Giúp tăng thứ hạng tìm kiếm của website.

2. Vị trí nào trên Website đặt sidebar hiệu quả nhất?

Vị trí đặt sidebar tối ưu phụ thuộc vào nhiều yếu tố, từ nội dung chính (văn bản thường phù hợp với sidebar bên trái) đến mục tiêu cụ thể (tăng chuyển đổi có thể cần sidebar bên phải).

Quan trọng hơn cả, sidebar cần hài hòa với thiết kế tổng thể và phù hợp với thói quen của người dùng.

3. Làm thế nào để tùy chỉnh sidebar theo ý muốn?

Có 2 cách tùy chỉnh sidebar:

Cách 1: Sử dụng plugin/theme

• WordPress: Elementor, Beaver Builder, Divi
• Wix, Squarespace, Webflow: Tùy chỉnh trực quan hoặc bằng code

Cách 2: Tùy chỉnh bằng code

• HTML, CSS: Đầy đủ quyền kiểm soát
• PHP: Tạo widget tùy chỉnh cho WordPress

Bạn đã khám phá hết những bí mật thú vị về sidebar là gì và cách tận dụng tối đa chúng chưa? Pima Digital hy vọng bài viết này đã cung cấp cho bạn những kiến thức hữu ích. Nếu bạn muốn tìm hiểu sâu hơn về kỹ thuật thiết kế website, hãy theo dõi các bài viết của chúng tôi nhé!

PIMA DIGITAL – CÔNG TY THIẾT KẾ WEBSITE CHUYÊN NGHIỆP

• Địa chỉ: Tầng 3, NCC Office, 139/37-39 Nguyễn Văn Lượng, Phường 10, Gò Vấp, TP.HCM
• Hotline: 0973.463.486
• Email: info@pimadigital.vn
• Website: https://pimadigital.vn/