02 Cách tạo thanh Sidebar trong WordPress cực đơn giản
Thanh sidebar là một vùng hiển thị các tiện ích (widget) bên cạnh nội dung chính của trang web. Bạn có thể tùy biến thanh sidebar theo ý muốn bằng cách thêm, xóa hoặc sắp xếp các widget khác nhau. Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo thanh sidebar trong WordPress đơn giản.
Cách 1: Tạo thanh Sidebar trong WordPress không cần Code
Trước khi tạo Sidebar thì chúng tôi có một lưu ý nhỏ đó chính là Sidebar và Widget là 02 khái niệm hoàn toàn khác nhau. Sidebar là một vùng thanh bên chứa các tiện ích (Widget). Còn Widget chính là phần hiển thị các nội dung ở thanh bên như: Chứng khoán, thời tiết, bài viết liên quan, các banner khuyến mãi…
Mời bạn theo dõi tiếp nội dung:
Thời gian cần thiết: 30 phút
Để tạo thanh Sidebar trong WordPress mà không cần biết chút nào về Code, bạn có thể làm theo hướng dẫn sau:
- Bước 1: Đăng nhập vào trang quản trị WordPress.
Để đăng nhập vào trang quản trị WordPress, bạn cần nhập địa chỉ URL của trang web của bạn kèm theo
/wp-admin
vào thanh địa chỉ của trình duyệt. Ví dụ:https://example.com/wp-admin
. Sau đó, bạn nhập tên đăng nhập và mật khẩu của bạn và nhấn nút Log In. - Bước 2: Truy cập vào Appearance (Giao diện) > Widgets (Tiện ích).
Sau khi đăng nhập thành công, bạn sẽ thấy bảng điều khiển WordPress ở bên trái màn hình. Bạn chọn mục Appearance (Giao diện) và sau đó chọn Widgets (Tiện ích).
- Bước 3: Tìm vùng sidebar mà bạn muốn thêm các widget vào
Ở trang Widgets, bạn sẽ thấy hai khung chính: khung bên trái là danh sách các widget có sẵn, khung bên phải là danh sách các vùng hiển thị widget trên trang web của bạn.
Mỗi vùng hiển thị widget có một tên riêng, tùy thuộc vào chủ đề (theme) mà bạn đang sử dụng. Bạn cần tìm vùng sidebar mà bạn muốn thêm các widget vào, thường có tên là “Sidebar” hoặc “Primary Sidebar”.
Bạn nhấn vào nút + để mở rộng vùng sidebar. - Bước 4: Sử dụng khung tìm kiếm bên phải để tìm các widget muốn sử dụng
Bây giờ, bạn có thể sử dụng khung tìm kiếm ở góc trên bên phải của trang để tìm các widget mà bạn muốn sử dụng. Bạn có thể nhập từ khóa liên quan vào khung tìm kiếm hoặc lướt qua danh sách các widget để xem chúng có chức năng gì.
Ví dụ: nếu bạn muốn thêm một widget hiển thị văn bản tùy chỉnh, bạn có thể nhập “Text” hoặc “Văn bản” vào khung tìm kiếm hoặc tìm widget có tên là Text trong danh sách. - Bước 5: Kéo và thả widget vào vùng sidebar.
Sau khi tìm được widget mà bạn muốn sử dụng, bạn chỉ cần kéo và thả widget đó vào vùng sidebar mà bạn đã mở rộng ở bước trước. Bạn có thể kéo và thả nhiều widget khác nhau vào vùng sidebar và sắp xếp chúng theo thứ tự mong muốn.
- Bước 6: Cấu hình widget
Sau khi kéo và thả widget vào vùng sidebar, bạn sẽ thấy widget đó hiện ra trong vùng sidebar với một khung cấu hình. Bạn cần nhập các thông tin cần thiết vào khung cấu hình để widget hoạt động đúng cách. Ví dụ: nếu bạn thêm widget Text, bạn cần nhập tiêu đề và nội dung văn bản mà bạn muốn hiển thị.
Nếu bạn thêm widget Categories, bạn cần chọn kiểu hiển thị (danh sách hoặc thả xuống) và có hiển thị số lượng bài viết trong mỗi danh mục hay không. Mỗi widget có những tùy chọn cấu hình khác nhau, bạn có thể tham khảo tài liệu hướng dẫn của WordPress để biết thêm chi tiết. - Bước 7: Lưu các thay đổi.
Sau khi cấu hình xong các widget, bạn nhớ nhấn nút Save (Lưu) ở mỗi widget để lưu các thay đổi của bạn. Bạn cũng có thể nhấn nút Done (Xong) để đóng khung cấu hình của widget. Bạn có thể xem kết quả của thanh sidebar trên trang web của bạn bằng cách nhấn nút Visit Site (Xem trang web) ở góc trên bên trái của bảng điều khiển.
Cách 2: Tạo Sidebar trong WordPress có sử dụng Code
Khi bạn muốn tạo những thanh Sidebar với phong cách riêng, độc đáo và cách hiển thị không lẫn được vào đâu thì bạn nên sử dụng Code để tạo Sidebar trong WordPress. Lúc đó, bạn có thể tham khảo các bước sau:
Bước 1: Đăng nhập vào trang quản trị WordPress.
Đây là bước đầu tiên để bạn có thể quản lý trang web của bạn bằng WordPress. Trang quản trị WordPress là nơi bạn có thể tạo, chỉnh sửa, xóa các bài viết, trang, chủ đề, tiện ích, menu, cài đặt và nhiều chức năng khác. Để đăng nhập vào trang quản trị WordPress, bạn cần có tên đăng nhập và mật khẩu của bạn. Bạn cũng cần biết địa chỉ URL của trang quản trị WordPress, thường là https://example.com/wp-admin
, trong đó example.com
là tên miền của trang web của bạn. Bạn nhập địa chỉ URL này vào thanh địa chỉ của trình duyệt và nhấn Enter. Sau đó, bạn nhập tên đăng nhập và mật khẩu của bạn vào các ô tương ứng và nhấn nút Log In. Nếu bạn nhập đúng thông tin, bạn sẽ được chuyển đến bảng điều khiển WordPress.
Bước 2: Mở trình soạn thảo mã Visual Studio Code và tạo một tệp tin PHP mới.
Đây là bước tiếp theo để bạn có thể viết mã PHP cho trang web của bạn. PHP là một ngôn ngữ lập trình phổ biến được sử dụng để tạo các trang web động và tương tác với cơ sở dữ liệu. Để viết mã PHP, bạn cần có một trình soạn thảo mã, là một phần mềm cho phép bạn nhập, chỉnh sửa, lưu và chạy các tệp tin mã.
Có nhiều trình soạn thảo mã khác nhau, nhưng một trong những trình soạn thảo mã phổ biến và miễn phí là Visual Studio Code (VS Code). Bạn có thể tải VS Code từ trang web chính thức của phần mềm này: https://code.visualstudio.com/
.
Sau khi cài đặt xong VS Code, bạn mở nó lên và chọn File (Tệp) > New File (Tệp mới) để tạo một tệp tin mới.
Bạn cần lưu tệp tin này với phần mở rộng là .php
, ví dụ: index.php
.
Bạn cũng cần lưu tệp tin này vào thư mục gốc của trang web của bạn, ví dụ: C:\xampp\htdocs\example.com
.
Bây giờ, bạn có thể bắt đầu viết mã PHP trong tệp tin này. Bạn cần bắt đầu và kết thúc mã PHP bằng các dấu <?php
và ?>
. Ví dụ:
<?php
// Đây là một dòng comment
echo "Hello World!"; // Đây là câu lệnh in ra màn hình
?>
Đầu tiên, khai báo một hàm để đăng ký sidebar trong tệp functions.php
của theme (hoặc tệp plugin nếu bạn đang tạo một plugin):
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>',
)
);
}
Sau đó, gọi hàm đăng ký sidebar để thực hiện việc đăng ký sidebar:
add_action( 'widgets_init', 'custom_theme_sidebar' );
Mở tệp template (ví dụ: sidebar.php, index.php) mà bạn muốn hiển thị sidebar. Sử dụng đoạn mã sau để hiển thị sidebar:
<?php
if ( is_active_sidebar( 'primary-sidebar' ) ) {
dynamic_sidebar( 'primary-sidebar' );
}
?>
Sau khi hoàn thành các bước trên, bạn sẽ tạo thành công một sidebar bằng code trong trang web WordPress của mình. Bạn có thể sử dụng mã CSS tùy chỉnh để điều chỉnh giao diện của sidebar hoặc sử dụng các lớp CSS mặc định của WordPress để tuỳ chỉnh sidebar theo ý muốn.
Câu hỏi thường gặp
Sidebar là một vùng hiển thị các tiện ích (widget) bên cạnh nội dung chính của trang web. Các tiện ích là những phần tử có chức năng cụ thể, ví dụ: hiển thị văn bản, danh mục, bài viết gần đây, biểu mẫu tìm kiếm, v.v. Sidebar có tác dụng giúp bạn tùy biến giao diện và chức năng của trang web WordPress của bạn mà không cần viết mã. Bạn có thể thêm, xóa hoặc sắp xếp các tiện ích khác nhau vào sidebar để phù hợp với nhu cầu của bạn.
– Số lượng và vị trí của các vùng sidebar trên trang web WordPress của bạn phụ thuộc vào chủ đề (theme) mà bạn đang sử dụng. Mỗi chủ đề có thể có một hoặc nhiều vùng sidebar khác nhau, ví dụ: sidebar trái, sidebar phải, sidebar chân trang (footer), v.v.
– Bạn có thể biết trang web WordPress của bạn có bao nhiêu vùng sidebar và chúng nằm ở đâu bằng cách truy cập vào Appearance (Giao diện) > Widgets (Tiện ích) trong bảng điều khiển WordPress. Ở đây, bạn sẽ thấy danh sách các vùng hiển thị widget trên trang web của bạn ở khung bên phải. Mỗi vùng hiển thị widget có một tên riêng, ví dụ: “Sidebar”, “Primary Sidebar”, “Footer 1”, “Footer 2”, v.v.
– Bạn có thể xem trước vị trí của các vùng sidebar trên trang web của bạn bằng cách nhấn nút Visit Site (Xem trang web) ở góc trên bên trái của bảng điều khiển.
Để thêm một tiện ích mới vào sidebar, bạn cần truy cập vào Appearance (Giao diện) > Widgets (Tiện ích) trong bảng điều khiển WordPress.
– Ở đây, bạn sử dụng khung tìm kiếm bên phải để tìm các tiện ích muốn sử dụng từ danh sách các tiện ích có sẵn. Bạn có thể nhập từ khóa liên quan vào khung tìm kiếm hoặc lướt qua danh sách các tiện ích để xem chúng có chức năng gì.
– Sau khi tìm được tiện ích mà bạn muốn sử dụng, bạn chỉ cần kéo và thả tiện ích đó vào vùng sidebar mà bạn muốn thêm vào. Bạn có thể kéo và thả nhiều tiện ích khác nhau vào cùng một vùng sidebar hoặc vào các vùng sidebar khác nhau.
Để xóa một tiện ích khỏi sidebar, bạn cũng cần truy cập vào Appearance (Giao diện) > Widgets (Tiện ích) trong bảng điều khiển WordPress.
– Ở đây, bạn tìm vùng sidebar mà bạn muốn xóa tiện ích khỏi và nhấn vào nút + để mở rộng vùng sidebar đó. Bạn sẽ thấy danh sách các tiện ích đã được thêm vào vùng sidebar đó. Bạn tìm tiện ích mà bạn muốn xóa và nhấn vào nút Delete (Xóa) ở góc dưới bên phải của tiện ích đó.
– Bạn cũng có thể kéo và thả tiện ích đó ra khỏi vùng sidebar để xóa nó.
Để cấu hình một tiện ích trong sidebar, bạn cũng cần truy cập vào Appearance (Giao diện) > Widgets (Tiện ích) trong bảng điều khiển WordPress.
– Ở đây, bạn tìm vùng sidebar mà bạn muốn cấu hình tiện ích trong đó và nhấn vào nút + để mở rộng vùng sidebar đó. Bạn sẽ thấy danh sách các tiện ích đã được thêm vào vùng sidebar đó.
– Bạn tìm tiện ích mà bạn muốn cấu hình và nhấn vào nút ▼ để mở khung cấu hình của tiện ích đó. Bạn sẽ thấy các tùy chọn cấu hình khác nhau tùy thuộc vào loại tiện ích mà bạn đang sử dụng.
– Bạn nhập các thông tin cần thiết vào các ô tương ứng, ví dụ: tiêu đề, số lượng bài viết hiển thị, v.v. Sau khi cấu hình xong, bạn nhấn nút Save (Lưu) để lưu các thay đổi của bạn. Bạn cũng có thể nhấn nút Done (Xong) để đóng khung cấu hình của tiện ích.
Lời kết
Như vậy, bài viết này đã giúp bạn hiểu cách tạo Sidebar trong WordPress một cách dễ dàng. Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, xin vui lòng để lại bình luận bên dưới. Cảm ơn bạn đã đọc bài viết này và chúc bạn thành công!
Lưu ý:
*Thông tin trong bài viết đều là những kiến thức chuyên môn và kinh nghiệm thực tế của đội ngũ sáng tạo tại MDIGI . Mọi hành vi sao chép vui lòng ghi trích dẫn nguồn MDIGI.vn! Xem Điều khoản & điều kiện của Chúng tôi.
*Cập nhật mới nhất ngày: 08/08/2023