Trang chủ » Cách thêm Class vào menu trong WordPress(Hàm wp_nav_menu)

Cách thêm Class vào menu trong WordPress(Hàm wp_nav_menu)

by Đặng Võ

Việc thêm hoặc bổ sung thêm Class vào trong menu trong WordPress là việc cũng cần thiết nếu như bạn đang có dự tính bổ sung thêm css cho Menu WordPress. Trong wordpress cũng có 1 số hàm có thể hỗ trợ bạn việc này dễ dàng hoặc ngay trong phần option tùy chỉnh. Cùng dangvoweb.com tìm hiểu sơ qua về cách triển khai thêm class vào menu WordPress nhé.

Cách thêm class vào Menu item trong WordPress

Trong WordPress có hỗ trợ sản 1 option để bạn có thể bổ sung thêm thuộc tính class vào trong Menu item. Bạn có thể thực hiện theo các bước sau:

Bước 1.  Vào Appearance > Menus, click the Screen Options tab

thêm class vào menu trong wordpress

Bước 2. Trong phần Show advanced menu properties, Chọn CSS Classes

Bổ sung class vào menu WP

Bước 3. Điền tên class bạn muốn đặt vào ô CSS Classes(optional).

Bổ sung class vào menu WP

Bước 4. Bổ sung các thuộc tính css nếu cần

/* Target the menu item LI */
.menu li.my-class{
  /* Margin might go here */
}
/* Target the menu item Anchor (link) */
.menu li.my-class > a{
  /* Colors, font sizes, would normally go here */
}
 
/* Target the menu item LI in UberMenu */
.ubermenu .ubermenu-item.my-class{
 
}
/* Target the menu item Anchor (link) or span (link disabled) in UberMenu */
.ubermenu .ubermenu-item.my-class > .ubermenu-target{
  /* Colors, font sizes, would go here */
}

Tùy chỉnh class trong phần li tag của Menu item WordPress

Hàm wp_nav_menu có cung cấp các thuộc tính container_id, container_class, menu_id, menu_class cho phép thêm thuộc tính class vào container và menu ul tag. nhưng lại không có phần hỗ trợ chỉnh sửa menu item (li tag).

WordPress menu hỗ trợ filter hook “nav_menu_css_class” để truy vấn vào từng menu item tuỳ chỉnh giá trị như thuộc tính class.

add_filter('nav_menu_css_class', 'special_nav_class', 10, 2);
function special_nav_class($classes, $item)
{
    if(in_array('current-menu-item',$item->classes)){    //current item
            $classes[]='nav_focus';
    }
        else $classes[]='nav_normal';
    //other of purpose
    preg_match('/[^\/]+$/', trim($item->url, '/'), $r); //get page
 
    if (is_page() && is_page($r[0]))
        $classes[]='active';
 
    return $classes;
}

Ở đây bạn cần quan tâm 2 tham số là:

  • $classes: mảng giá trị tên class có trên thuộc tính class của menu item hiện tại. Tham số này lấy và thiết lập class cho menu item.
  • $item: đối tượng menu item.

Ví dụ: Bạn muốn thêm class mới vào trang item được chọn khi người dùng nhấn vào menu. Menu item sẽ có giao diện khác so với các items còn lại. Các templates sẽ có tên classes thể hiện riêng, bạn dựa vào đây để tùy biến thêm class cho giao diện html của web.

Như vậy là mình đã giới thiệu sơ qua cách để giúp cho các bạn có thêm được class mới vào Menu trong WordPress. Cũng như cách sử dụng hàm wp_nav_menu. Đây là một hàm tùy biến menu được sử dụng rất nhiều. Nếu có thắc mắc gì có thể để lại bình luận bên dưới và cùng nhau trao đổi nhé.

Bài viết liên quan