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

0 1.191

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

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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é

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
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 ).

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ệ

Bạn cũng có thể thích
Để lại một trả lời

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