Thêm icons cho wp_nav_menu trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thêm icons cho wp_nav_menu trong wordpress

Trong bài trước, mình có tutorial hướng dẫn cách tùy biến trường cho wp_nav_menu, bài bữa nay mình xin giới thiệu với các bạn một plugin tạo ảnh icon cho menu item sử dụng api tạo custom field nav menu.

Trước tiên, bạn tải và cài đặt plugin Menu Icons . Sau khi kích hoạt plugin, bạn vào trang sửa menu. Có thêm mục icon cho phép bạn chọn biểu tượng cho item đó, để thêm icon mới bạn nhấn vào ‘Select’.
menu-icons-1

menu-icons-2

Plugin bổ trợ nhiều hình icons với nhiều dịch vụ không trùng lặp như: FontAwesome, Dashicons, Elusive,..ngoài ra bạn cũng có thể có thể sử dụng mọi ảnh ngoài được upload trong media wordpress.

Các dịch vụ được bổ trợ được kích hoạt trong Metabox “Menu Icons Settings”.
menu-icons-settings
Bạn có thể loại bỏ một số dịch vụ icons không muốn sử dụng bằng phương pháp bỏ chọn vào dịch vụ đó, trong cửa sổ chọn icon sẽ nội dung icons của dịch vụ sẽ có loại bỏ.

Bạn cũng cũng có thể có thể làm điều này với hook menu_icons_types , xóa tên dịch vụ khai báo trong tham số mảng $types như dưới đây.

 /** * Remove one or more icon types * * Uncomment one or more line to remove icon types * * @param array $types Registered icon types * @return array */ function myplugin_remove_menu_icons_type( $types ) { # Dashicons //unset( $types['dashicons'] ); # Elusive //unset( $types['elusive'] ); # Font Awesome //unset( $types['fa'] ); # Foundation //unset( $types['foundation-icons'] ); # Genericons //unset( $types['genericon'] ); # Image //unset( $types['image'] ); return $types; } add_filter( 'menu_icons_types', 'myplugin_remove_menu_icons_type' );  

Nếu bạn không cho người dùng lựa chọn dịch vụ icons, cũng đều có thể để ẩn mục tùy chọn dịch vụ “Menu Icons settings” tại trang nav-menus.php . Để tắt cài đặt này bạn chỉ cần chèn đoạn code sau vào functions.php

 add_filter( 'menu_icons_disable_settings', '__return_true' );  

Tùy biến nâng lên – Tạo nhóm icons mới
Mỗi nhóm dịch vụ icons được viết vào file mang tên type-*.php trong thư mục includes của plugin. Bạn cũng có thể có thể định nghĩa nhóm icons mới với tên file mới, trong đấy * là tên dịch vụ. Tham khảo nội dung các file nạp icons có sẵn trong thư mục này.

Plugin có cách viết mở rộng cho phép bạn tùy biến nhiều hơn, tỉ dụ để thay file css ngoài load trực diện từ CDN. Đoạn code sau mình đổi lại stylesheet lấy CSS trực tiếp từ ‘bootstrapcdn’ với ‘font-awesome’ phù phù hợp với phiên bản sử dụng trong plugin.

 /** * Modify icon type properties * * See myplugin_remove_menu_icons_type() above for the icon type keys * * @param array $props Icon type properties * @param object $instance Icon type registration instance * @return array */ function _my_fontawesome_props( $props, $instance ) { $props['stylesheet'] = sprintf( '//maxcdn.bootstrapcdn.com/font-awesome/%s/css/font-awesome.min.css', $instance-> version ); return $props; } add_filter( 'menu_icons_fa_props', '_my_fontawesome_props', 10, 2 );  

Lỗi thường gặp

Icon không hiển thị
Nếu bạn tùy biến menu với class walker, thì cũng có thể sẽ không hiển thị, vì plugin can thiệp vào những hook mặc định được sử dụng trong Walker_Nav_Menu đáp ứng bạn không bớt xén hooks.

Vị trí hiển thị icons không đúng
Bạn có thể sử dụng thêm css để hiển thị icon như mong muốn. Viết css vào stylesheet chính của theme hoặc custom code css cho website rất dễ dàng với plugin Simple Custom CSS plugin.
Simple-Custom-CSS

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Thêm icons cho 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