Cách thêm class vào menu wp_nav_menu trong WordPress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Cách thêm class vào menu wp_nav_menu trong WordPress

Thay đổi hoặc thêm class cho nav menu item là tính năng sẵn có của wordpres, Đây là tính năng vô cùng sức mạnh cấp phép bạn can thiệp vào từng menu đơn (menu item). Tuy nhiên, lựa chọn này wordpress mặc định cho ẩn. Thực hiện theo những bước để thêm class vào menu.

Wordpres menu screen options

1. Vào Appearance-> Menus, click vào tab Screen options.
wordpress Screen options

2. Dưới mục Show advanced menu properties, check CSS classes. Ngay sau đó hiển thị hộp text tại đây nhập tên class thêm cho menu item đó.
wordpress advanced menu properties

Ví dụ thử thêm >

   /* Target the menu item LI */     .menu   li.myClass  {     /* Margin might go here */     }     /* Target the menu item Anchor (link) */     .menu   li  .myClass   &gt  ;   a  {     /* Colors, font sizes, would normally go here */     }       /* Target the menu item LI in UberMenu */     #megaMenu   ul  .megaMenu   li.myClass  {       }     /* Target the menu item Anchor (link) in UberMenu */     #megaMenu   ul  .megaMenu   li  .myClass   &gt  ;   a  {     /* Colors, font sizes, would go here */     }   

Ok, bạn đã xong, bây giờ thử truy cập vào website và xem kết quả.

Thêm class vào menu item

wp_nav_menu có cung cấp các thuộc tính container_id, container_class, menu_id, menu_class cấp phép thêm thuộc tính class vào container và menu ul tag. Rất tiếc không có thuộc tính nào để can thiệp chỉnh sửa vào menu item (li tag).

WordPress menu bổ 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. Xem đoạn code sau để biết hơn:

 add_filter  (    'nav_menu_css_special_nav_current-menu-item'    ,    $item    -&  gt  ;  classes  )    )    {     //current item     $classes    [    ]    =    'nav_focus'    ;     }     else     $classes    [    ]    =    'nav_normal'    ;     //other of purpose     preg_match    (    '/[^/]+$/'    ,     trim    (    $item    -&  gt  ;  url  ,     '/'    )    ,     $r    )    ;     //get page       if     (  is_page  (    )     &  amp  ;&  amp  ;   is_page  (    $r    [    0    ]    )    )     $classes    [    ]    =    'active'    ;       return     $classes    ;     }   

Tham số:

  • $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 thay/thêm mới class vào trang item được chọn khi người dùng bấm vào menu. Menu item sẽ được giao diện khác so với các items còn lại. Giống như thế này.
current-menu-item
Các templates sẽ đem tên classes thể hiện riêng, bạn dựa vào chỗ này để tùy biến thêm class cho giao diện html của web.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Cách thêm class vào menu wp_nav_menu trong WordPress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang