WordPress : Tạo dropdown menu với wp_nav_menu ()

Với những kiểu thiết kế web có khả năng hiển thị tốt trên nhiều kích thước màn hình khác nhau, việc tạo một menu hiển thị dưới dạng select box (drop down) sẽ giúp các bạn vừa tiết kiệm được không gian hiển thị menu trên trang , đồng thời cũng giúp khách viếng thăm web hay blog của các bạn dễ dàng điều hướng đến những chủ đề hay nội dung mà họ muốn xem.
Trong bài viết này, mình sẽ chia sẻ cho các bạn một cách biến những menu thông thường trở thành dạng select box chỉ với 3 bước đơn giản như sau :

Bước 1 : Tạo vị trí hiển thị Menu

Nếu các bạn đã có sẵn vị trí cần hiển thị menu trên theme đang dùng của mình thì có thể bỏ qua bước này.
Đầu tiên, các bạn tìm đến file functions.php nằm tại thư mục chứa theme mà các bạn đang dùng, rồi dán đoạn code bên dưới vào :

add_theme_support( 'menus' );
add_action( 'init', 'register_my_menus' );

function register_my_menus() {
    register_nav_menus(
        array(
            'main-nav' => 'Main Navigation'
        ));
}

Bây giờ để có thể hiển thị menu ở vị trí mà các bạn muốn, chúng ta sẽ sử dụng wp_nav_menu() bằng cách copy toàn bộ đoạn code bên dưới và đặt nó vào tại vị trí bất kì trong page nào mà các bạn muốn hiển thị. Vì chúng ta muốn menu hiển thị dưới dạng select box,nên chúng ta sẽ tùy chỉnh một ít như sau :

if ( has_nav_menu( 'main-nav' ) ) {
    wp_nav_menu( array(
        'menu' => 'main-nav',
        'items_wrap'     => '<select id="drop-nav"><option value="">Select a page...</option>%3$s</select>',
        'walker'  => new Walker_Nav_Menu_Dropdown()));
}

Trong đoạn code trên, các bạn nhớ chỉ định tên menu đúng với tên mà chúng ta đã tạo ở file functions.php mà chúng ta đã làm ở trên, cụ thể là tên ” main-nav “, các bạn có thể đặt tên theo bất kì tên gì theo ý muốn mà các bạn thích.

Bước 2 : Tùy chỉnh Walker_Nav_Menu
Các bạn copy toàn bộ đoạn code sau , rồi dán vào file functions.php

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth) {    }

    function end_lvl(&$output, $depth) {    }

    function start_el(&$output, $item, $depth, $args) {
        // Here is where we create each option.
        $item_output = ';

        // add spacing to the title based on the depth
        $item->title = str_repeat(" ", $depth * 4) . $item->title;

        // Get the attributes.. Though we likely don't need them for this...
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : ';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : ';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : ';
        $attributes .= ! empty( $item->url )        ? ' value="'   . esc_attr( $item->url        ) .'"' : ';

        // Add the html
        $item_output .= '<option'. $attributes .'>';
        $item_output .= apply_filters( 'the_title_attribute', $item->title );

        // Add this new item to the output string.
        $output .= $item_output;

    }

    function end_el(&amp;$output, $item, $depth) {
        // Close the item.
        $output .= "</option>
";

    }

}

Làm xong bước này, các bạn có thể vào trang admin, tạo danh sách menu và đặt tại vị trí mà chúng ta đã tạo ở bước 1, và ra ngoài màn hình để kiểm tra kết quả, các bạn sẽ thấy menu đã được tạo dưới dạng select box. Tuy nhiên, để có thể điều hướng được menu , thì chúng ta cần phải tiến hành thêm bước tiếp theo.

Bước 3 : Chèn jQuery

Các bạn vào lại file functions.php và copy toàn bộ đoạn code bên dưới và dán vào nó :

add_action('wp_footer', 'dropdown_menu_scripts');
function dropdown_menu_scripts() {
    ?>
        <script>
          jQuery(document).ready(function ($) {
            $("#drop-nav").change( function() {
                    document.location.href =  $(this).val();
            });
          }
        </script>
    <?php
}

Thế là xong rồi đó các bạn, nếu trong quá trình viết bài có gây khó hiểu hay điều gì chưa rõ thì các bạn đừng ngần ngại để lại lời nhắn dưới dạng comments nhé, mình sẽ giải thích rõ hơn và giúp các bạn hoàn thành 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