Tùy Biến Hiển Thị Menus Trong Wordpress

      17

Nếu website của khách hàng có một hệ thống menu lớn, bạn muốn hiển thị một phần dữ liệu menu sống một khoanh vùng nào đó trên trang/ một trang khác. Bài viết này đang giải thích cụ thể cách làm cho này. Ý tưởng chỉ ra trong đầu chúng ta là sản xuất từng menu cho mỗi trang, nhưng vì sao lại làm bí quyết này chia nhỏ ra làm nhiều menus đang khó làm chủ trong khi wordpress bao gồm API đến phép tùy chỉnh thiết lập trạng thái cho từng thực đơn item.

Bạn đang xem: Tùy biến hiển thị menus trong wordpress

Xóa ul wrapXóa ul bao menu cất thẻ li, bạn kiểm soát và điều chỉnh tham số ‘items_wrap’

"%3$s" ) ); ?>HoặcThêm cam kết tự trước menu

"primary", "items_wrap" => "Menu: %3$s" ) ); ?>Kế quá Walker_Nav_Menu classTạo một class new trong /functions.php , thương hiệu lớp nên tất cả tiền tố nhằm tránh trùng với class khác.

class JC_Walker_Nav_Menu extends Walker_Nav_Menu Trong Class Walker_Nav_Menu có những hàm bạn cũng có thể kế thừa và override, lớp được viết sống /wp-admin/includes/nav-menu.phpVí dụ sau đây mình đang lấy toàn bộ menu items là con của một menu chỉ định, để làm điều này cần thừa kế 2 hàm của lớp là: start_llvl cùng end_lvl.

class JC_Walker_Nav_Menu extends Walker_Nav_Menu function start_lvl( &$output, $depth = 0, $args = array() ) function end_lvl( &$output, $depth = 0, $args = array() ) Truyền parent menu id vào construct để mang xác định các menu vật phẩm con, liên tiếp lấy các menu items ids nhỏ làm parent id để xác định các menu item con của nó, cứ thế cho đến hết, cần sử dụng mảng lưu tất cả các thực đơn items cho câu hỏi quản lý.

class JC_Walker_Nav_Menu extends Walker_Nav_Menu var $menu_id = 0;var $menu_items = array();function __construct($id = 0)$this->menu_id = $id;$this->menu_items<> = $id;function start_el( &$output, $item, $depth, $args ) if( !empty($this->menu_items) && !in_array($item->ID, $this->menu_items) && !in_array($item->menu_item_parent, $this->menu_items))return false;if(!in_array($item->ID, $this->menu_items))$this->menu_items<> = $item->ID;parent::start_el($output, $item, $depth, $args);function end_el( &$output, $item, $depth = 0, $args = array() ) if( !empty($this->menu_items) && !in_array($item->ID, $this->menu_items) && !in_array($item->menu_item_parent, $this->menu_items)) return false; parent::end_el($output, $item, $depth, $args);function start_lvl( &$output, $depth = 0, $args = array() ) function end_lvl( &$output, $depth = 0, $args = array() ) Sử dụng Custom WordPress WalkerHiển thị nav thực đơn với wp_nav_menu, khởi sinh sản class JC_Walker_Nav_Menu cùng truyền parent menu id=8 nhằm chỉ hiển thị cục bộ các menu dưới menu tất cả id=8.

"header-menu", "walker" => new JC_Walker_Nav_Menu(8)) ); ?>Phương thức kế thừa trong class WalkerBạn rất có thể extends walker class để thay đổi nội dung hiển thị HTML mang lại item với thậm trí sub items chế tác bởi các hàm như: wp_nav_menu, wp_list_pages, wp_list_categories.

Bằng bí quyết sửa đổi nội dung của các hàm thi công của lớp kế thừa, chúng ta sẽ làm thay đổi cách hiển thị cho các dữ liệu Menu, Category trong wordpress.Phương thức start_el mở thẻ li ban đầu cho một thành tựu và khớp ứng đóng thành tích với phương thức end_el. Thực hiện tham số xác định thông tin và tài liệu của item chúng ta có thể loại bỏ nó trong hiệu quả hiển thị. Ví dụ sau có sa thải top-level elements.

Xem thêm: 7 Dấu Hiệu Máy Tính Bị Nhiễm Url Mal Virus, Credit And Collection News

// Don"t print top-level elementsfunction start_el(&$output, $item, $depth=0, $args=array()) if( 0 == $depth ) return; parent::start_el(&$output, $item, $depth, $args);function end_el(&$output, $item, $depth=0, $args=array()) if( 0 == $depth ) return; parent::end_el(&$output, $item, $depth, $args);Walker class còn tồn tại phương thức display_element, cách thức này giúp sử lý đông đảo item bao gồm chứa sub items bên dưới. Hàm display_element kế thừa trong class chủ yếu được chạy trong hàm start_el giả dụ có kế thừa tính năng của hàm người mẹ start_el. Vào cách sử dụng php class, chúng ta gọi hàm bà bầu của phương thức kế thừa với trường đoản cú khóa parent, y như thế này:

// Don"t print top-level elementsfunction start_el(&$output, $item, $depth=0, $args=array()) if( 0 == $depth ) return; parent::start_el(&$output, $item, $depth, $args);Tham khảo chủng loại nội dung không thiếu thốn của hàm start_el và end_el.

var $number = 1; function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) $indent = ( $depth ) ? str_repeat( " ", $depth ) : ""; $class_names = $value = ""; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes<> = "menu-item-" . $item->ID; $class_names = join( " ", apply_filters( "nav_menu_css_class", array_filter( $classes ), $item, $args ) ); $class_names = $class_names ? " class="" . Esc_attr( $class_names ) . """ : ""; $id = apply_filters( "nav_menu_item_id", "menu-item-". $item->ID, $item, $args ); $id = $id ? " id="" . Esc_attr( $id ) . """ : ""; $output .= $indent . " "; Mọi item đều sử lý qua hàm display_element này. Ví dụ, bọn họ không cho hiển thị những menu sống top-level cùng URL lúc này không thuộc về thắng lợi đó. Để làm cho điều này, họ dựa vào ở trong tính class : current-menu-item, current-menu-parent, current-menu-ancestor


*

// Only follow down one branchfunction display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) // kiểm tra if element as a "current element" class $current_element_markers = array( "current-menu-item", "current-menu-parent", "current-menu-ancestor" ); $current_class = array_intersect( $current_element_markers, $element->classes ); // If element has a "current" class, it is an ancestor of the current element $ancestor_of_current = !empty($current_class); // If this is a top-level links and not the current, or ancestor of the current menu thành tích - stop here. If ( 0 == $depth && !$ancestor_of_current) return; parent::display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output );Hai phương thức ở đầu cuối nhóm những sub items ở những levels, là start_lvl và end_lvl. Thường thực hiện thẻ ul. Trường hợp bạn cũng muốn loại vứt cho nhóm items ngơi nghỉ top-level. Giữ ý: cục bộ những items vào level này sẽ bỏ qua, không được hiển thị.

// Don"t wrap the đứng top levelfunction start_lvl(&$output, $depth=0, $args=array()) if( 0 == $depth ) return; parent::start_lvl(&$output, $depth, $args);function end_lvl(&$output, $depth=0, $args=array()) if( 0 == $depth ) return; parent::end_lvl(&$output, $depth, $args);Kế thừa ngôn từ của cách làm tạo thẻ bao items làm việc trên, khá đầy đủ giống như sau.


function start_lvl(&$output, $depth=0, $args=array()) $indent = ( $depth ) ? str_repeat( " ", $depth ) : ""; $output .= $indent." "; function end_lvl(&$output, $depth=0, $args=array()) $indent = ( $depth ) ? str_repeat( " ", $depth ) : ""; $output .= $indent." "; Tùy biến đổi hooksBạn xem xét ngoài cách áp dụng class walker vào menu, bạn cũng có thể chia nhỏ dại can thiệp vào từng tài liệu có trong walker khoác định của thực đơn với các hooks filter.

walker_nav_menu_start_el

Chúng ta để ý có filter ‘walker_nav_menu_start_el‘ được cho phép bạn tùy biến hiển thị menu bằng cách sửa hook này. Chúng ta cũng có thể thêm vào functions.php như sau, ví dụ:

if (function_exists("qtrans_convertURL")) function qtrans_in_nav_el($output, $item, $depth, $args) $attributes = !empty($item->attr_title) ? " title="" . Esc_attr($item->attr_title) . """ : "";$attributes .=!empty($item->target) ? " target="" . Esc_attr($item->target) . """ : "";$attributes .=!empty($item->xfn) ? " rel="" . Esc_attr($item->xfn) . """ : "";// Integration with qTranslate Plugin$attributes .=!empty($item->url) ? " href="" . Esc_attr( qtrans_convertURL($item->url) ) . """ : "";$output = $args->before;$output .= "";$output .= $args->link_before . Apply_filters("the_title", $item->title, $item->ID) . $args->link_after;$output .= "";$output .= $args->after;return $output;add_filter("walker_nav_menu_start_el", "qtrans_in_nav_el", 10, 4);nav_menu_link_attributesBạn hoàn toàn có thể sửa mảng $atts là kết quả của filter nav_menu_link_attributes. Lấy một ví dụ sau mình fix lỗi URL home khi chuyển ngôn ngữ trong wordpress mang lại plugin qtranslate, bạn thêm đoạn code sau vào functions.php

function qtrans_convertHomeURL($url, $what) if($what=="/") return qtrans_convertURL($url); return $url;add_filter("home_url", "qtrans_convertHomeURL", 10, 2);add_filter("nav_menu_link_attributes","custom_menu",10,3);function custom_menu($atts, $item, $args)if($item->url=="/")$atts<"href">=qtrans_convertURL($item->url);return $atts;Sửa tham số wp_nav_menuBạn hoàn toàn có thể sửa lại tham số setup cho các menu tạo bởi vì wp_nav_menu, tùy chỉnh cấu hình của các menu sử dụng filter wp_nav_menu_args.

function modify_nav_menu_args( $args )if( "primary" == $args<"theme_location"> )$args<"depth"> = -1;$args<"container_id"> = "my_primary_menu";return $args;add_filter( "wp_nav_menu_args", "modify_nav_menu_args" );Khi wp_nav_menu lấy cực hiếm mảng truyền vào, nó vẫn sử lý qua filter wp_nav_menu_args, vị đó bạn cũng có thể sửa lại những menu trước khi nó được hiển thị như đúng cấu hình thiết lập tại vị trí call hàm hiển thị menu wp_nav_menu.

Tạo Custom menu Widget

Tạo custom thực đơn widget, cho chắt lọc hiển thị một phần của menu. Coi code widget sau đây:

__( "Custom options to đầu ra menus in your theme")) // Args);}public function widget( $args, $instance ) extract( $args );$title = apply_filters( "widget_title", $instance<"title"> );echo $before_widget;if ( ! empty( $title ) )echo $before_title . $title . $after_title;wp_nav_menu( array("menu" => $instance<"menu">, "walker" => new JC_Walker_Nav_Menu($instance<"menu_item">)) );echo $after_widget; public function form( $instance ) $title = isset($instance<"title">) ? $instance<"title"> : "";$menu = isset($instance<"menu">) ? $instance<"menu"> : "";$menu_item = isset($instance<"menu_item">) ? $instance<"menu_item"> : "";$menus = get_terms("nav_menu");?>get_field_id( "title" ); ?>">get_field_id( "title" ); ?>" name="get_field_name( "title" ); ?>" type="text" value="" />

get_field_id( "menu" ); ?>" name="get_field_name( "menu" ); ?>" type="hidden" value="" />

get_field_id( "menu_item" ); ?>">get_field_id( "menu_item" ); ?>" name="get_field_name( "menu_item" ); ?>" > $m->slug, // your theme location here "container" => false, "walker" => new Walker_Nav_Menu_Dropdown($menu_item), "items_wrap" => "slug."" label="".$m->name."">%3$s",)); ?>

item_id = $id;}public function start_lvl(&$output, $depth)public function end_lvl(&$output, $depth)public function start_el(&$output, $item, $depth, $args)$item->title = str_repeat("", $depth * 4) . $item->title;parent::start_el($output, $item, $depth, $args);if($item->ID == $this->item_id)$output = str_replace("ID."" selected="selected"", $output);else$output = str_replace("ID.""", $output);public function end_el(&$output, $item, $depth)$output .= " ";}?>

Ngoài nhân kiệt walker mà menu cung cấp, có thể sử dụng những hàm menu : wp_get_nav_menu_items, wp_get_nav_menu_object, get_nav_menu_locations..để lấy dữ liệu menu.Tham khảo:

function vcn_menus_items($id) static $data_menu=array(); $locations = get_nav_menu_locations(); $menu=wp_get_nav_menu_object($locations<"menu1">); $args=array( "post_parent"=>$id //"post_type"=>"nav_menu_item", //"post_parent"=>0 ); $menu_items = wp_get_nav_menu_items($menu->term_id,$args); if(count($data_menu)==0) foreach( (array)$menu_items as $key=>$menu_item)print_r($menu_item); $t = wp_get_nav_menu_items($menu_item->object_id,array("post_parent"=>$menu_item->post_parent));print_r($t); echo "";continue; echo $menu_item->post_type.""; echo $menu_item->object.""; echo $menu_item->url.""; echo $menu_item->menu_item_parent .""; echo $menu_item->title."";//các thành tích theo vật dụng tự or trong cùng 1 menu item gốc:ie:/*-item 1//theo trang bị tự: ie (1)-item-1-0(2)-item-1-1(3)-item-1-2(4)...-item 2//khác menu_orderie:(6)*/$element->menu_order //save if(!$menu_item->menu_item_parent) $data_menu<>=array("main"=>$menu_item,"sub"=>array()); else $data_menu<"sub"><>=$menu_item; //echo ""; return $data_menu;Hết !

Để nhận được bài viết mới vui vẻ đăng cam kết kênh kỹ năng và kiến thức WordPress từ A-Z nghỉ ngơi Form mặt dưới. Chúng ta có thể nhận được sự hỗ trợ trên Twitter với Facebook