3 Tháng 5, 2017 • Tác giả: Thịnh Nguyễn • Chuyên mục: WordPress Themes

Hướng dẫn cách thêm và hiển thị sidebar cho theme wordpress

Sidebar trong wordpress là một khối template dùng để hiển thị các widget mà bạn kéo thả chúng vào nó. Đó là cách mà wordpress quy định cho bất cứ lập trình viên nào cũng phải theo chuẩn của wordpress.

Với sidebar đó bạn có thể thêm sidebar vào bất cứ vị trí nào trong theme wordpress của bạn như ở: trang chủ, category, single, tag, page,.. tùy theo nhu cầu mà bạn muốn hiển thị nó và để kéo thả thì bạn vào trang quản trị -> giao diện -> widget. Tại đây sẽ có danh sách các sidebar do bạn tạo ra.

Nếu như bạn chưa biết cách tạo thì sau đây Thịnh xin chia sẻ với các bạn cách tạo sidebar cũng như hiển thị chúng trong theme.

Tạo sidebar

Để tạo được sidebar thì bạn cần chèn đoạn code sau vào file functions.php của theme.


$sidebar = array(
     'name' => __('Widget giỏ hàng', 'thinhweb'),
     'id' => 'widget-product-cart',
     'description' => __('Widget giỏ hàng'),
     'class' => 'widget-product-cart',
     'before_widget' => '<section id="%1$s" class="widget %2$s">',
     'after_widget' => '</section>',
     'before_title' => '<h3 class="widget-title">',
     'after_title' => '</h3>'
);
register_sidebar( $sidebar );

Sau khi bạn lưu lại xong bạn quay lại quản trị widget và sẽ thấy sidebar này hiển thị. Lúc này bạn thêm widget bất kì vào sidebar và việc tiếp theo là bạn cần hiển thị chúng.

Hiển thị sidebar

Để hiển thị được sidebar thì bạn cần copy đoạn code sau và nhúng chúng vào vị trí mà bạn muốn hiển thị như trang chủ, category, single,…


<?php if( is_active_sidebar('widget-product-cart') ) : dynamic_sidebar('widget-product-cart'); endif; ?>

Sau khi bạn nhúng đoạn code trên bạn chỉ cần kiểm tra đúng như widget bạn thêm vào sidebar hay chưa và nó sẽ hiển thị đúng theo ý muốn của bạn.

Lưu ý: ở phần này mình đặt là widget-product-cart bạn có thể đặt lại từ chỗ tạo sidebar sang hiển thị sidebar cũng cần đặt giống nhau thì khi đó sidebar mới hoạt động.

Tác giả: Thịnh Nguyễn

Chuyên gia chia sẻ kiến thức về lập trình, thiết kế web và tối ưu hệ thống server.

Chia sẻ bài viết này:

0 bình luận

Để lại bình luận của bạn

Địa chỉ email của bạn sẽ không được công bố rộng rãi. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Cách tạo phân trang pagination bằng plugins WP-PageNavi trong WordPress

Như ở bài trước Thịnh có chia sẻ cách tạo phân trang paination nhưng nó không phải ở dạng số mà ở dạng text không sử dụng plugins, nhưng ở bài này Thịnh chia sẻ với các bạn cách tạo phân trang trong wordpress hiển thị dạng số. Cách hiển thị dạng số này bắt […]

Xem chi tiết →

Hướng dẫn cố định menu khi kéo kéo thanh scroll xuống dưới

Xin chào tất cả các bạn, trong quá trình support anh em web develop trên facebook thì anh em đều gặp phải trường hợp là muốn cố định menu như website tuoitre.vn nhưng lại không làm thế nào thì hôm nay Thịnh chia sẻ với anh em cách cố định menu khi thực hiện kéo […]

Xem chi tiết →

Hướng dẫn tạo nút Back To Top cho website của bạn

Nút Back To Top hay còn gọi một cách đơn giản là nút trượt lên trên khi bạn đang ở cuối website. Nhưng nếu như bạn đang sử dụng framework thì sẽ có một số framework có sẵn nhưng đa phần thì cái này sẽ loại khỏi bộ framework bởi độ ưu tiên cao cũng […]

Xem chi tiết →