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

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 →

Cấu trúc giao diện themes chuẩn dành cho website sử dụng WordPress

Themes là tợp hợp của rất nhiều thành phần template. Với themes sẽ giúp website của bạn sinh động hơn, dễ điều hướng hơn, và trải nghiệm người dùng cũng tốt hơn và hơn hết là trình bày đẹp đẽ bát mắt giúp thu hút người dùng với những tính năng mà bạn viết ra […]

Xem chi tiết →

Cách khai báo gọi plugins OptionTree làm theme option trong wordpress

Như ở bài trước Thịnh có giới thiệu qua về plugins OptionTree giúp tạo theme wordpress nhanh chóng và hiệu quả, nhưng mình không có nói rõ khai báo làm sao để gọi được nó và hiển thị nó thành một theme option cụ thể. Đề bù lại cho các bạn dễ hiểu hơn thì ở […]

Xem chi tiết →