Cách tạo vị trí menu và widget trong Theme WordPress

Nếu bạn đang phát triển một theme tự tạo riêng cho mình bằng WordPress, hoặc đơn giản là bạn muốn có thêm nhiều vị trí widget cũng như menu cho theme mà các bạn đang dùng thì bài viết này sẽ giúp cho các bạn giải quyết vấn đề.

1 Tạo vị trí Widget trong Theme WordPress

– Trước tiên chúng ta cần đăng ký (register) widget mà chúng ta cần tạo. Để làm việc này các bạn vào file functions.php trong folder theme mà các bạn đang dùng cho trang WordPress của mình và chèn đoạn code sau :

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => 'New Widget',
        'before_widget' => '<div id="new-widget">',
        'after_widget' => '</div>',
        'before_title' => ',
        'after_title' => ',
));
}

Trong đoạn code trên, các bạn chỉ cần chú ý tham số : name chính là tên widget mà chúng ta cần tạo, và tên này sẽ hiện ra ở phần Widget ở trong trang admin. Các bạn có thể chọn bất kì một tên nào theo ý muốn, nhưng nhớ là đừng có trùng với tên bất kì Widget nào đã có trước rồi nhé.

– Sau khi chúng ta đăng ký xong, các bạn có thể chèn widget mới đăng ký này vào bất kì phần nào trong theme, giả sử chúng ta chèn vị trí này ở trong file header.php nằm trong folder theme WordPress như sau :

<?php dynamic_sidebar( 'New Widget' );  ?>

Chỉ cần chèn đúng tên như thế này, thì các bạn đã có ngay một vị trí widget nằm ngay tại vị trí mà các bạn dán code bên trên vào.

2 Tạo vị trí Menu trong Theme WordPress

Cũng tương tự như ở phần Widget , chúng ta cũng cần đăng ký vị trí menu ở trong file functions.php như sau :

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

Hoặc các bạn cũng có thể khai báo một lúc 2 hay nhiều menu như thế này :

  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );

– Và bây giờ để có thể hiển thị menu trong theme, các bạn chỉ cần chèn đoạn code sau vào ngay vị trí cần hiển thị :

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Có một điều mà các bạn cần lưu ý là nhớ chỉ định tên menu đúng với tên mà các bạn đã khai báo trong file functions.php ở đoạn code bên trên. Ngoài ra , các bạn còn có ther chèn thêm class vào các menu này như sau :

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

Còn có rất nhiều tham số nữa, nếu các bạn muốn tìm hiểu kỹ hơn thì có thể tham khảo wp_nav_menu .

Nếu các bạn còn có bất kì thắc mắc gì hay gặp khó khăn trong việc tạo vị trí widget hay menu thì đừng ngần ngại chia sẻ với mình ở mục comment nhé. Mình sẽ giúp các bạn hoàn thiện bài viết này.

Chúc các bạn thành công !

Chuyên Mục: WordPress

Bài viết được đăng bởi webmaster