#8 – WordPress Sidebar – Tạo Sidebars trong theme WordPress

0 4

Trong bài học này, chúng ta sẽ tìm hiểu về cách tạo sidebars trong theme WordPress, nơi người dùng có thể sử dụng các widget.

Video Tạo Sidebars trong theme WordPress

Hướng dẫn chi tiết

Tạo sidebar cơ bản

Trong thư mục includes, các bạn tạo file register-sidebars.php. Đây sẽ file chúng ta tiến hành khai báo các sidebar với WordPress.

if(!function_exists('glw_sidebars_init')){
    function glw_sidebars_init(){
        register_sidebar(array(
            'name'          => esc_html__('Primary Sidebar','glw'),
            'id'            => 'glw_primary_sidebar',
            'description'   => esc_html__('Primary Sidebar for goclamweb theme','glw'),
            'before_widget' => '<div class="widget mb-45">',
            'after_widget'  => '</div>',
            'before_title'  => '<div class="widget-title mb-30"><h5 class"mb-5">',
            'after_title'   => '</h5><div class="horizontal-line"><hr class="top"><hr class="bottom"></div></div>'
        ));
    }
}

Đừng quên inlcude register-sidebars.php vào file funtions.php nhé. Chúng ta dùng hàm register_sidebar để khai báo sidebar chúng ta sẽ sử dụng. Hàm này yêu cầu một tham số kiểu dữ liệu là mảng. Mảng đó chứa 1 số phần tử như sau:

  • name: (string) : Tên hiển thị của sidebar trong phần Apperence -> Widget
  • id: (string): id định danh cho sidebar để WordPress có thể xác định, id này cần riêng biệt, không trùng lặp. Mặc định id sẽ có dạng sidebar-$instance
  • description (string) Mô tả cho sidebar, hiển thị trong Apperence -> Widget
  • class: (string) các class css chúng ta gắn thêm cho khối sidebar (nếu cần thiết)
  • before_widget (string) Phần html sẽ chèn vào trước khối widget
  • after_widget (string) Phần html sẽ chèn vào sau khối widget
  • before_title (string) Phần html sẽ chèn vào trước tiêu đề của widget, mặc định là thẻ h2
  • after_title (string) Phần html sẽ chèn vào sau tiêu đề của widget, mặc định là thẻ h2

add action cho hook widgets_init nhé

add_action( 'widgets_init', 'glw_sidebars_init' );

Trong thư mục chính của theme, chúng ta sẽ tạo một file có tên sidebar.php – Đây là chứa template sidebar mà chúng ta đã đăng ký. Chúng ta sẽ gọi sidebar ra bằng bằng dynamic_sidebar( id sidebar ). Trước đó chúng ta sẽ kiểm tra sidebar đã chứa widget nào chưa, nếu có, sidebar sẽ được hiển thị.

<div class="col-xs-12 col-sm-4">
    <div class="sidebar white-bg">
        <?php 
        if(is_active_sidebar( 'glw_primary_sidebar' )){
            dynamic_sidebar( 'glw_primary_sidebar' );
        }
        ?>
    </div>
</div>

Để hiển thị sidebar, chúng ta dùng hàm get_sidebar để hiển thị sidebar tại các template như index, single, archive …

Tạo widget demo cho sidebar

Các bạn cài plugin Monster Widget để tạo ra tất cả widget có sẵn của WordPress cho sidebar của bạn và test thử nhé.

Tạo widget demo cho sidebar bằng cách dùng pluign Monster Widget
Tạo widget demo cho sidebar bằng cách dùng pluign Monster Widget

Tạo nhiều sidebar cho theme

Để tạo thêm nhiều sidebar cho theme, các bạn khai báo thêm sidebar bằng register_sidebar. Nhớ đặt id của sidebar sao cho không bị trùng.

Tạo file chứa sidebar trong thư mục chính cũa theme theo định dạng sidebar-tên sidebar.php dynamic_sidebar( id sidebar ).

Vài phút cho quảng cáo Hosting

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: https://my.azdigi.com/aff.php?aff=1612
Nếu các bạn đăng ký và sử dụng hosting, Góc Làm Web sẽ có một ít tiền để duy trì.

Hiển thị sidebar trong template index, single, archive bằng hàm get_sidebar(‘tên-sidebar’). Lưu ý, tên sidebar trong hàm get_sidebar phải giống với phần tên sidebar trong tên file php thì WordPress mới nhận diện được.

Tài liệu WordPress

Link tài liệu chính chủ WordPress về các hàm đã dùng trong bài học nếu muốn tìm hiểu sâu hơn

Code hoàn thành của bài học: Google Drive

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.