Tạo sidebar wordpress

Đăng ký sidebars hoặc vị trí chứa widget

Điều đầu tiên bạn làm là phải đăng kí sidebar hoặc vị trí chứa widget. Bạn có thể đăng ký nhiều sidebar khác nhau chỉ cần dán đoạn code này vào file functions.php của theme.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

function smw_widgets_init() {    register_sidebar( array(  'name' => __( 'Main Sidebar', 'smw' ),  'id' => 'sidebar-main',  'description' => __( 'Đây là main sidebar', 'smw' ),  'before_widget' => '<aside id="%1$s" class="widget %2$s">',  'after_widget' => '</aside>',  'before_title' => '<h3 class="widget-title">',  'after_title' => '</h3>',  ) );    register_sidebar( array(  'name' =>__( 'Left sidebar', 'smw'),  'id' => 'sidebar-left',  'description' => __( 'Đây là left sidebar', 'smw' ),  'before_widget' => '<aside id="%1$s" class="widget %2$s">',  'after_widget' => '</aside>',  'before_title' => '<h3 class="widget-title">',  'after_title' => '</h3>',  ) );  }   add_action( 'widgets_init', 'smw_widgets_init' );

Ở đây mình đăng ký 2 sidebar có tên là Main Sidebar và Left sidebar và các id, description… với smw là tên chủ đề bạn có thể thay thế bằng tên chủ đề của bạn.

Hiển thị sidebar ngoài trang web wordpress của bạn

Bạn có thể vào Appearance » Widgets để keo thả widget vào các sidebar bạn đã đăng ký nhưng nó không hiển thị ra trang web khi nào nó chưa được gọi trong theme như sidebar.php. Để hiển thị các widget ra ngoài theme chỉ cần dán mã này vào vị trí bạn muốn hiển thị.

1 2 3 4 5

<?php if ( is_active_sidebar( 'sidebar-main' ) ) : ?>     <div id="secondary" class="widget-area" >     <?php dynamic_sidebar( 'sidebar-main' ); ?>     </div> <?php endif; ?>

Trong đoạn mã này chúng ta đã dùng id để gọi sidebar hiển thị ở vị trí ta mong muốn, bạn có thể thay đổi id để hiển thị vị trí widget khác đã đăng ký. Ví dụ bạn có thể đăng ký 3 sidebar cho khu vực footer và hiển thị chúng trong file footer.php.
Mình hy vọng rằng sau bài viết này bạn có thể tạo một vị trí hiển thị sidebar của riêng mình. Mọi thắc mắc, hãy comment bên dưới.