Sidebar là gì? Hướng dẫn cài đặt và hiển thị Sidebar trên website WordPress

Có thể nói, sidebar là thuật ngữ hết sức quen thuộc đối với các nhà phát triển website WordPress. Tuy nhiên không phải ai cũng hiểu rõ sidebar là gì và cách cài đặt tính năng này trên WordPress. Trong bài viết này, Vietnix sẽ hướng dẫn cách tạo sidebar và tất tần tật những nội dung bạn nên biết.

Sidebar là gì? Tầm quan trọng của Sidebar

Sidebar là khu vực mà người quản trị website có thể tùy chỉnh thêm/bớt nội dung cho bài viết (có thể là mục tìm kiếm, lịch, bài viết mới,…). Nó còn có thể được gọi là thanh bên và xuất hiện trong bài viết ở vị trí bên phải – trái hoặc cả hai tùy vào template bạn có thể chọn. Khi xây dựng một website dù theo cấu trúc 2 hoặc 3 cột, bạn vẫn nên chú ý đến việc bố trí sidebar phù hợp và cân xứng với các yếu tố khác.

Bạn cần xác định được khu vực nào dành cho bài viết (thường đặt ở giữa giao diện) và đâu là nơi cho những yếu tố còn lại. Và hiển nhiên, để có lựa chọn phù hợp cần phụ thuộc vào site mà bạn đang quản lý. Nhiều người vẫn nghĩ sidebar chỉ được xuất hiện tại bên trái hoặc phải trong giao diện. Tuy nhiên thực tế, nó có thể xuất hiện ở cả phần chân trang hay tích hợp vào header, thanh dọc trang, thanh bên, footer,….

Sidebar có ảnh hưởng quan trọng trong việc tạo nên tính hấp dẫn cho website và  tăng sự tương tác cho người dùng. Thông qua sidebar, người dùng có thể dễ dàng truy cập vào các nội dung mà bạn muốn hướng đến như quảng cáo, thông tin liên hệ, đăng ký,…Như vậy, để có một bố cục hợp lý và cân đối khi sử dụng sidebar, bạn nên cân nhắc kỹ lưỡng mục đích và đối tượng tiềm năng của website.

Những kiểu sidebar phổ biến hiện nay

Sidebar tĩnh

Đây là loại sidebar sẽ không thay đổi dù người dùng di chuyển đến các trang khác nhau trên webside. Nội dung của sidebar thường bao gồm các liên kết và widget cố định một vị trí.

Sidebar động

Đây là loại sidebar thay đổi linh hoạt tùy vào nội dung của trang mà người dùng đang xem. Sidebar thường hiển thị các liên kết và widget liên quan trực  tiếp đến nội dung của trang hiện tại nhằm tạo sự tương tác tốt hơn với người dùng.

Sidebar cuộn 

Đây là loại sidebar được đặt dọc bên phải hoặc bên trái của trang web và sẽ hiện lên khi người dùng kéo xuống. Sidebar thường chứa những liên kết hoặc widget quan trọng để cung cấp thông tin kịp thời và giúp người dùng dễ dàng tiếp cận những  nội dung cần thiết.

Widget là gì? Lợi ích của Widget

Widget là các nội dung nhỏ khác được người quản lý bổ sung vào phần sidebar. Đối với phần Widget, bạn được phép tùy biến theo hướng đa dạng, có thể là: Banner website, thông tin liên hệ, điều hướng độc giả về fanpage, danh mục sản phẩm,…Nhờ vậy, widget đã mang lại nhiều lợi ích cho website, bao gồm:

• Tăng khả năng linh hoạt: Widget cho phép người dùng dễ dàng thêm, chỉnh sửa hoặc thay đổi vị trí các tính năng trên trang web một cách nhanh chóng.
• Tăng tính thẩm mỹ: Giao diện website trở nên ấn tượng và thu hút người dùng hơn nhờ sự đa dạng và sáng tạo trong cách sắp xếp Widget.
• Cải thiện trải nghiệm người dùng: Widget giúp người dùng dễ dàng truy cập và tìm kiếm thông tin trên website một cách nhanh chóng, thuận tiện.

Bên cạnh những Widget có sẵn trên WordPress, bạn cũng có thể cài đặt thêm các plugin để bổ sung nhiều Widget mới với các tính năng đa dạng và phong phú hơn.

Làm thế nào để có thể điều chỉnh sidebar?

Để sử dụng nội dung hiển thị này, người dùng cần thực hiện đăng ký sidebar tại functions.php. Khi dùng đến hàm register_sidebar(), bạn cần chú ý đến 8 yếu tố, gồm:

• Name: Đối với mục này, bạn cần cung cấp tên sidebar. Bạn có thể lấy thông tin tại trang quản trị.
• Id: Thông qua hàm dynamic_sidebar(), bạn có thể gọi sidebar vào chủ đề bằng tên hoặc id (lưu ý: Id phải là chữ thường).
• Description: Mục này được hiểu đơn giản là đoạn có chức năng miêu tả thanh bên, bạn có thể thấy được nó tại trang quản trị.
• Class: Là tên của lớp CSS bổ sung vào đoạn HTML Widget.
• Before_widget: Là một đoạn HTML ở vị trí trước mỗi Widget.
• After_widget: Là một đoạn HTML ở vị trí phía sau mỗi Widget (thông thường đây là thẻ đóng tương ứng với before_widget).
• Before_title: Là đoạn HTML được cho vào khu vực phía trước từng tiêu đề riêng biệt của Widget.
• After_title: Là đoạn HTML được cho vào khu vực phía sau từng tiêu đề riêng biệt của Widget.

Việc cài đặt sidebar sẽ tương đối khó với người mới bắt đầu. Bên cạnh đó, nó còn đòi hỏi bạn có kiến thức về việc viết code PHP. Thế nên, nếu không quá am hiểu về công nghệ thông tin thì bạn có thể thuê trực tiếp đơn vị chuyên thiết kế trang web để cài đặt tính năng này.

Hướng dẫn 2 cách tạo sidebar cho WordPress

Sau đây là cách tạo sidebar website nền tảng WordPress. Hiện tại, bạn có thể lựa chọn một trong 2 cách sau để hoàn thành việc này.

Cách 1: Vào sidebar thông qua Widget

• Bước 1: Bạn mở giao diện quản trị và đến phần Appearance (giao diện).
• Bước 2: Tiếp theo, bạn chọn mục Widget.
• Bước 3: Giao diện Widget sẽ xuất hiện, bạn lựa chọn các tùy chỉnh theo nhu cầu tại mục Sidebar.

Cách 2: Thêm Sidebar thông qua Customize 

• Bước 1: Bắt đầu từ giao diện quản trị, bạn chọn Appearance (giao diện).

• Bước 2: Tiếp theo, bạn vào mục Customize và chọn Widget. Bạn cũng có thể tùy chỉnh sidebar bằng cách nhấp vào biểu tượng cây bút.

• Bước 3: Phần tùy biến Sidebar xuất hiện.
• Bước 4: Bạn có thể tiến hành chỉnh sửa theo nhu cầu.

Trường hợp có một số theme trên WordPress vẫn chưa được cài đặt sidebar thì bạn thực hiện đăng ký thông qua hàm register_sidebar và chú ý đến 8 yếu tố Vietnix đã liệt kê phía trên.

Hướng dẫn hiển thị sidebar trong theme WordPress

Khi đã tạo thành công thanh bên, bạn có thể thêm nó vào theme WordPress bằng 3 cách:

• Cách 1: Với cách thứ nhất, bạn phải tạo sidebar.php trước và hiển thị nó trong mục sidebar.php rồi hoàn thành bằng cách dùng hàm dynamic_sidebar. Bạn nên kết hợp dùng hàm get_sidebar để có thể thêm sidebar.php tại vị trí mong muốn.
• Cách 2: Bạn trực tiếp dùng hàm dynamic_sidebar tại vị trí phù hợp để gắn sidebar vào đấy. Tuy nhiên trong quá trình này, bạn nên chú ý đến tham số quan trọng và duy nhất trong hàm là id hoặc name sidebar.
• Cách 3: Trước hết, bạn thực hiện cài đặt đồng thời khởi động plugin Easy Custom Sidebar. Sau khi plugin đã được khởi động thì bạn vào Giao diện (Appearance) và đến mục Chủ đề thanh bên (Theme Sidebar) để tạo và có thể tùy chỉnh nội dung hiển thị.

Sau quá trình trên, bạn tiếp tục thao tác theo 5 bước:

• Bước 1: Bạn nhập tên của thanh bên theo nhu cầu rồi chọn Create Sidebar là hoàn thành quá trình tạo. 
• Bước 2: Bạn tiến hành chọn vị trí hiển thị cho sidebar tùy biến vừa được tạo bằng cách xem xét thông qua panel phía tay trái. Tùy vào nhu cầu sử dụng bạn có thể chọn kiểu nội dung và phong cách hiển thị phù hợp.
• Bước 3: Tiếp theo, bạn click vào Save Sidebar để lưu kiểu nội dung đã lựa chọn. 
• Bước 4: Cuối cùng, bạn tìm Widget nội dung phù hợp để hiển thị lên thanh bên tùy biến bằng cách đi tới Appearance > Widgets > Kéo Widgets mà bạn thích vào sidebar.

Các vị trí đặt sidebar tốt nhất

Thực tế, sidebar có thể được tích hợp vào nhiều thành phần khác nhau của cấu trúc website. Thế nhưng để nó tối ưu hiệu quả và nâng cao trải nghiệm người dùng lại là câu chuyện khác. Nhìn chung, vị trí tốt nhất cho thanh bên là 2 phía trái – phải.

Đặt sidebar bên trái

Theo một số nghiên cứu cho thấy, mắt người có xu hướng quan sát từ trái qua phải. Chính vì thế, vị trí này có thể là nơi giúp bạn thu hút độc giả từ những giây đầu tiên. Do đó, bạn có thể chèn nội dung Widget tại đây giúp nó nổi bật hơn.

Đặt sidebar bên phải 

Đây là cách khá an toàn và làm nội dung chính của bài viết được nổi bật hơn. Ở trường hợp này, bạn sẽ điều hướng độc giả tập trung vào phần nội dung mà họ đang quan tâm. Sau đó, họ có thể chú ý đến các nội dung liên quan khác trên sidebar theo cách dễ chịu và thân thiện hơn.

Đặt sidebar cả 2 bên trái – phải

Có thể nói, đây là phương thức được khá nhiều website sử dụng. Nó vẫn đảm bảo được trải nghiệm người dùng khi nội dung chính luôn đặt tại trung tâm. Ngoài ra, việc cho thông tin khác ở cả trái lẫn phải sẽ tối ưu giao diện trang web khá tốt.

Những điều cần lưu ý khi đặt sidebar

Để đạt được hiệu quả tối đa khi sử dụng sidebar, bạn cần lưu ý những điểm quan trọng dưới đây:

Mục tiêu: Bạn cần xác định rõ ràng mục đích sử dụng sidebar, có thể là tăng tương lượng truy cập, tăng tương tác, cải thiện trải nghiệm người dùng hoặc thúc đẩy doanh thu. Khi đó, bạn sẽ dễ dàng chọn lọc những nội dung hoặc tính năng phù hợp để đưa vào sidebar nhằm mang lại hiệu quả và đáp ứng đúng nhu cầu.

Nội dung: Tùy vào nội dung của mỗi loại trang web như tin tức, giải trí, thương mại điện tử,…bạn nên xác định và lựa chọn vị trí sidebar phù hợp và tránh bị rối mắt cho người dùng.

Thiết kế: Sidebar cần được thiết kế với màu sắc và kích thước sao cho hài hòa với giao diện tổng thể của trang web và thu hút sự chú ý của người dùng.

Lời kết

Trên đây là toàn bộ thông tin tất yếu về sidebar mà Vietnix muốn chia sẻ trong bài viết hôm nay. Hy vọng qua bài viết này, bạn đã biết cách cài đặt sidebar thành công và tối ưu nhất cho WordPress. Nếu có những vấn đề vướng mắc nào khác, bạn hãy bình luận dưới đây và Vietnix sẽ nhiệt tình giải đáp.