Hướng dẫn cách thêm Class cho thẻ li và a cho Menu WordPress

Để thêm mới Class cho thẻ a trong Menu WordPress như hình, trong quá trình học WordPress sẽ có nhiều cách để thực hiện điều đó, tuy nhiên cách này mình thấy đơn giản nhất, bạn có thể làm theo các bước sau:

1. Cách thêm class cho thẻ a trong menu WordPress

Gọi hàm wp_nav_menu tại template hiển thị menu bạn cần.

Trước tiên bạn hãy thêm 1 phần tử vào tham số $args tại nơi bạn gọi hàm hiển thị Menu WP như sau:

<?php 
    wp_nav_menu( array(
            'theme_location' => 'top',
            'alink_class'   => 'new-class-for-a other-class-for-a'
        ) 
    );
?>

Bạn chú ý dòng 'alink_class' => 'new-class-for-a other-class-for-a'nhé. new-class-for-a other-class-for-a là các class bạn muốn thêm cho thẻ a

Tiếp theo thêm đoạn code sau vào file functions.php

Để phần tử trong tham số $args có tác dụng bạn thêm code sau vào bất kì đâu trong functions.php nhé

<?php 
    add_filter('nav_menu_link_attributes', 'wpshare247_add_link_atts', 1, 3);
    function wpshare247_add_link_atts($classes, $item, $args){
        if (isset($args->alink_class)) {
            $classes['class'] = $args->alink_class;
        }
        return $classes;
    }
?>

Như vậy là thẻ a trong menu chúng ta đã có thêm các class mới theo ý bạn rồi đó.

2. Cách thêm class cho thẻ li trong menu WordPress

Gọi hàm wp_nav_menu tại template hiển thị menu bạn cần.

$args_menu = array(
    'wpshare247_li_class'  => 'class-so-1 class-so-2 class-so-3'
);

wp_nav_menu($args_menu);

Tiếp theo thêm đoạn code sau vào file functions.php

function wpshare247_add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->wpshare247_li_class)) {
        $classes[] = $args->wpshare247_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpshare247_add_additional_class_on_li', 1, 3);

 

3. Cách thêm class cho thẻ ul submenu WordPress

function wpshare247_nav_menu_submenu_css_class( $classes ) {
    $classes[] = 'class-1 class-2 class-3'; // Danh sách class bạn có thể thêm cho sub menu
    return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'wpshare247_nav_menu_submenu_css_class' );

4. Cách thêm và sửa tiêu đề title cho thẻ a trong item menu

Một vài trường hợp bạn cần thêm mũi tên vào phía sau thẻ a như hình.

Bạn có thể làm như sau, nhớ copy doạn code sau, chỉnh sửa cho phù hợp với theme bạn đang dùng nhé.

Ví dụ bạn đang cần thêm Font Awesome  mũi tên như này vào sau thẻ a <i class="fa fa-angle-right"></i>

Tại template bạn gọi hàm wp_nav_menu, thêm thuộc tính vào như sau:

$args_menu = array( 
    'wpshare247_change_title' => '<i class="fa fa-angle-right"></i>' 
); 
wp_nav_menu($args_menu);

Tiếp theo quay lại file functions.php thêm code xử lý như sau:

function wpshare247_change_title_menu($classes, $item, $args) {
    if(isset($args->wpshare247_change_title)) {
        $old_title = $item->title;
    	$item->title = $old_title . $args->wpshare247_change_title;
    }

    return $classes;
}
add_filter('nav_menu_css_class', 'wpshare247_change_title_menu', 1, 3);

Đoạn code trên chưa kiểm tra điều kiện dấu mũi tên xuất hiện chỉ khi item menu đó có con (sub-menu). Để chính xác hơn cần phải thêm code check nó trước khi thay đổi tiêu đề cụ thể full code như bên dưới. if(in_array('menu-item-has-children', $classes))

function wpshare247_change_title_menu($classes, $item, $args) {
    if(isset($args->wpshare247_change_title)) {
        if(in_array('menu-item-has-children', $classes)){
    		 $old_title = $item->title;
    		$item->title = $old_title. $args->wpshare247_change_title;
    	}
    }

    return $classes;
}
add_filter('nav_menu_css_class', 'wpshare247_change_title_menu', 1, 3);

Hoặc bạn có thể sử dụng walker là một trong các phương pháp tùy biến nâng cao của Menu WordPress, thông qua walker bạn có thể tùy biến bất cứ gì trong các phần tử menu.