Thêm ký tự html ngăn cách giữa các menu (separator) trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thêm ký tự html ngăn cách giữa các menu (separator) trong wordpress

Ở bài trước chúng ta đã học cách thêm liên kết trang chủ home vào menu, bài hôm này mình sẽ hướng dẫn cách thêm ký tự ngăn cách giữa các menu wp_nav_menu. Có biết bao phương pháp để làm điều ấy để ra kết quả như ý muốn. Cách đơn giản là dùng css để trang hoàng nav menu.
Ví dụ: thêm gạch ngang giữa các mục menu ngang thì dùng border.

 ul  .menu   li  {     border-right    :    1px     solid     gray    ;     }   

Cách này sẽ không hiệu quả nếu bạn muốn đan xen các menu bởi thẻ html, như:

   

Vậy để làm điều này bạn sử dụng Walker_Nav_Menu, wp_nav_menu có thuộc tính ‘walker’ là đối tượng lớp cấp phép thay đổi nội dung của menu 1 cách linh hoạt.

 wp_nav_menu  (    array    (     ...     'walker'    =&  gt  ;    new   themeslug_walker_nav_menu  (    )     ...     )    )    ;   

Class themeslug_walker_nav_menu thừa hưởng base class Walker_Nav_Menu để render menu item . Copy đoạn code dưới đây vào functions.php

   class   themeslug_walker_nav_menu   extends   Walker_Nav_Menu   {     private     $counter    =    0    ;     // add classes to ul sub-menus     function   start_el  (    &  amp  ;    $output    ,     $item    ,     $depth    ,     $args    )     {     $item    -&  gt  ;  classes  [    ]    =    'nav'    .    (    ++    $this    -&  gt  ;  counter  )    ;     if    (    //$this->counter &&      isset    (    $args    -&  gt  ;  ex_separator  )    )     {     $output     .=     $args    -&  gt  ;  ex_separator  ;     }   parent  ::    start_el    (    $output    ,     $item    ,     $depth    ,     $args    )    ;     }     function   end_el  (    &  amp  ;    $output    ,     $item    ,     $depth    ,     $args    )    {   parent  ::    end_el    (    $output    ,     $item    ,     $depth    ,     $args    )    ;     }     }   

Trong lớp có hàm start_el và end_el dùng làm hiển thị (render) menu, chỉ có end_el để hiển thị menu cuối. Với menu cuối thì chẳng cần thêm ký tự ngăn cách. Chú ý: đối tượng $args lưu thông số của nav menu. Chuỗi html ngăn cách sẽ lưu vào tham số ex_separator.

 wp_nav_menu  (    array    (     ...     'ex_separator'    =&  gt  ;    '   

‘ … ));

Ví dụ để lấy tính chất ‘ex_separator’.

   $args    -&  gt  ;  ex_separator 

Chép đoạn code dưới đây vào header.php để hiển thị menu với ký tự ngăn cách.

 wp_nav_menu  (    array    (     'theme_location'    =&  gt  ;    'menu1'    ,     'container_'    ,     'container'    =&  gt  ;    false    ,     'menu_menu'    ,     'menu_menu'    ,     'walker'    =&  gt  ;    new   themeslug_walker_nav_menu  (    )    ,     'ex_separator'    =&  gt  ;    '   

‘ ));

Chúc bạn học tốt.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dấu kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Thêm ký tự html ngăn cách giữa các menu (separator) 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