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:

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
?>

Bước 3: Bắt đầu tạo sidebar bằng code PHP

Đầ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' );

Bước 4: Code hiển thị sidebar trong template

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' );
        }
    ?>

Bước 5: Lưu tệp tin và kiểm tra xem sidebar đã được tạo thành công hay chưa

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

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!