wordpress进阶教程(二十五):给菜单项添加字段

我们知道1、wordpress的文章有个自定义字段,而且在本工作室前面的教程中也有关于添加自定义字段的教程和类文件。2、wordpress的菜单也是“某一个文章类型”,类型名为nav_menu_item,可以参考:wordpress进阶教程(一):wordpress文章类型,每一个菜单项是“一篇文章”,每一个菜单就是“一个分类”,分类法为nav_menu。

申明:本文中的代码搜集自互联网。

那么在wordpress中,菜单也可以添加自定义字段。

菜单在后台的显示代码在wp-admin/includes/nav-menu.php文件中,在类Walker_Nav_Menu_Edit很容易在里面找到后台菜单项的显示代码,但是寻找后发现,代码中并没有提供过滤器或者动作钩子。

方法:

一、将wp-admin/includes/nav-menu.php文件中Walker_Nav_Menu_Edit类复制一份粘贴到主题functions.php文件中,更改类名,然后在里面添加相应的代码。如下:

  1. class Walker_Nav_Menu_Edit_Custom extends Walker_Nav_Menu {
  2.     /**
  3.      * @see Walker_Nav_Menu::start_lvl()
  4.      * @since 3.0.0
  5.      *
  6.      * @param string $output Passed by reference.
  7.      */
  8.     function start_lvl(&$output) {}
  9.     /**
  10.      * @see Walker_Nav_Menu::end_lvl()
  11.      * @since 3.0.0
  12.      *
  13.      * @param string $output Passed by reference.
  14.      */
  15.     function end_lvl(&$output) {
  16.     }
  17.     /**
  18.      * @see Walker::start_el()
  19.      * @since 3.0.0
  20.      *
  21.      * @param string $output Passed by reference. Used to append additional content.
  22.      * @param object $item Menu item data object.
  23.      * @param int $depth Depth of menu item. Used for padding.
  24.      * @param object $args
  25.      */
  26.     function start_el(&$output$item$depth$args) {
  27.         global $_wp_nav_menu_max_depth;
  28.         $_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth;
  29.         $indent = ( $depth ) ? str_repeat"\t"$depth ) : '';
  30.         ob_start();
  31.         $item_id = esc_attr( $item->ID );
  32.         $removed_args = array(
  33.             'action',
  34.             'customlink-tab',
  35.             'edit-menu-item',
  36.             'menu-item',
  37.             'page-tab',
  38.             '_wpnonce',
  39.         );
  40.         $original_title = '';
  41.         if ( 'taxonomy' == $item->type ) {
  42.             $original_title = get_term_field( 'name', $item->object_id, $item->object, 'raw' );
  43.             if ( is_wp_error( $original_title ) )
  44.                 $original_title = false;
  45.         } elseif ( 'post_type' == $item->type ) {
  46.             $original_object = get_post( $item->object_id );
  47.             $original_title = $original_object->post_title;
  48.         }
  49.         $classes = array(
  50.             'menu-item menu-item-depth-' . $depth,
  51.             'menu-item-' . esc_attr( $item->object ),
  52.             'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 'active' : 'inactive'),
  53.         );
  54.         $title = $item->title;
  55.         if ( ! empty$item->_invalid ) ) {
  56.             $classes[] = 'menu-item-invalid';
  57.             /* translators: %s: title of menu item which is invalid */
  58.             $title = sprintf( __( '%s (Invalid)' ), $item->title );
  59.         } elseif ( isset( $item->post_status ) && 'draft' == $item->post_status ) {
  60.             $classes[] = 'pending';
  61.             /* translators: %s: title of menu item in draft status */
  62.             $title = sprintf( __('%s (Pending)'), $item->title );
  63.         }
  64.         $title = empty$item->label ) ? $title : $item->label;
  65.         ?>
  66.         <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
  67.             <dl class="menu-item-bar">
  68.                 <dt class="menu-item-handle">
  69.                     <span class="item-title"><?php echo esc_html( $title ); ?></span>
  70.                     <span class="item-controls">
  71.                         <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
  72.                         <span class="item-order hide-if-js">
  73.                             <a href="<?php
  74.                                 echo wp_nonce_url(
  75.                                     add_query_arg(
  76.                                         array(
  77.                                             'action' => 'move-up-menu-item',
  78.                                             'menu-item' => $item_id,
  79.                                         ),
  80.                                         remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
  81.                                     ),
  82.                                     'move-menu_item'
  83.                                 );
  84.                             ?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">&#8593;</abbr></a>
  85.                             |
  86.                             <a href="<?php
  87.                                 echo wp_nonce_url(
  88.                                     add_query_arg(
  89.                                         array(
  90.                                             'action' => 'move-down-menu-item',
  91.                                             'menu-item' => $item_id,
  92.                                         ),
  93.                                         remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
  94.                                     ),
  95.                                     'move-menu_item'
  96.                                 );
  97.                             ?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">&#8595;</abbr></a>
  98.                         </span>
  99.                         <a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php
  100.                             echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) );
  101.                         ?>"><?php _e( 'Edit Menu Item' ); ?></a>
  102.                     </span>
  103.                 </dt>
  104.             </dl>
  105.             <div class="menu-item-settings" id="menu-item-settings-<?php echo $item_id; ?>">
  106.                 <?php if( 'custom' == $item->type ) : ?>
  107.                     <p class="field-url description description-wide">
  108.                         <label for="edit-menu-item-url-<?php echo $item_id; ?>">
  109.                             <?php _e( 'URL' ); ?><br />
  110.                             <input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->url ); ?>" />
  111.                         </label>
  112.                     </p>
  113.                 <?php endif; ?>
  114.                 <p class="description description-thin">
  115.                     <label for="edit-menu-item-title-<?php echo $item_id; ?>">
  116.                         <?php _e( 'Navigation Label' ); ?><br />
  117.                         <input type="text" id="edit-menu-item-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->title ); ?>" />
  118.                     </label>
  119.                 </p>
  120.                 <p class="description description-thin">
  121.                     <label for="edit-menu-item-attr-title-<?php echo $item_id; ?>">
  122.                         <?php _e( 'Title Attribute' ); ?><br />
  123.                         <input type="text" id="edit-menu-item-attr-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->post_excerpt ); ?>" />
  124.                     </label>
  125.                 </p>
  126.                 <p class="field-link-target description">
  127.                     <label for="edit-menu-item-target-<?php echo $item_id; ?>">
  128.                         <input type="checkbox" id="edit-menu-item-target-<?php echo $item_id; ?>" value="_blank" name="menu-item-target[<?php echo $item_id; ?>]"<?php checked( $item->target, '_blank' ); ?> />
  129.                         <?php _e( 'Open link in a new window/tab' ); ?>
  130.                     </label>
  131.                 </p>
  132.                 <p class="field-css-classes description description-thin">
  133.                     <label for="edit-menu-item-classes-<?php echo $item_id; ?>">
  134.                         <?php _e( 'CSS Classes (optional)' ); ?><br />
  135.                         <input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode(' ', $item->classes ) ); ?>" />
  136.                     </label>
  137.                 </p>
  138.                 <p class="field-xfn description description-thin">
  139.                     <label for="edit-menu-item-xfn-<?php echo $item_id; ?>">
  140.                         <?php _e( 'Link Relationship (XFN)' ); ?><br />
  141.                         <input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->xfn ); ?>" />
  142.                     </label>
  143.                 </p>
  144.                 <p class="field-description description description-wide">
  145.                     <label for="edit-menu-item-description-<?php echo $item_id; ?>">
  146.                         <?php _e( 'Description' ); ?><br />
  147.                         <textarea id="edit-menu-item-description-<?php echo $item_id; ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo $item_id; ?>]"><?php echo esc_html( $item->description ); // textarea_escaped ?></textarea>
  148.                         <span class="description"><?php _e('The description will be displayed in the menu if the current theme supports it.'); ?></span>
  149.                     </label>
  150.                 </p>
  151.                 <?php
  152.                 /*
  153.                 * 嘿,下面是自己添加的代码,注意里面的字符 ashuwp
  154.                 */
  155.                 ?>
  156.                 <p class="field-ashuwp description description-wide">
  157.                     <label for="edit-menu-item-ashuwp-<?php echo $item_id; ?>">阿树工作室<br />
  158.                     <input type="text" id="edit-menu-item-ashuwp-<?php echo $item_id; ?>" class="widefat code edit-menu-item-ashuwp" name="menu-item-ashuwp[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->ashuwp ); ?>" />
  159.                     </label>
  160.                     </p>
  161.                 <?php
  162.                 /*
  163.                 * 自己添加的代码结束,你可以继续添加其他的字段代码
  164.                 */
  165.                 ?>
  166.                 <div class="menu-item-actions description-wide submitbox">
  167.                     <?php if( 'custom' != $item->type && $original_title !== false ) : ?>
  168.                         <p class="link-to-original">
  169.                             <?php printf( __('Original: %s'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?>
  170.                         </p>
  171.                     <?php endif; ?>
  172.                     <a class="item-delete submitdelete deletion" id="delete-<?php echo $item_id; ?>" href="<?php
  173.                     echo wp_nonce_url(
  174.                         add_query_arg(
  175.                             array(
  176.                                 'action' => 'delete-menu-item',
  177.                                 'menu-item' => $item_id,
  178.                             ),
  179.                             remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
  180.                         ),
  181.                         'delete-menu_item_' . $item_id
  182.                     ); ?>"><?php _e('Remove'); ?></a> <span class="meta-sep"> | </span> <a class="item-cancel submitcancel" id="cancel-<?php echo $item_id; ?>" href="<?php echo esc_url( add_query_arg( array('edit-menu-item' => $item_id, 'cancel' => time()), remove_query_arg( $removed_args, admin_url( 'nav-menus.php' ) ) ) );
  183.                         ?>#menu-item-settings-<?php echo $item_id; ?>"><?php _e('Cancel'); ?></a>
  184.                 </div>
  185.                 <input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id[<?php echo $item_id; ?>]" value="<?php echo $item_id; ?>" />
  186.                 <input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" />
  187.                 <input class="menu-item-data-object" type="hidden" name="menu-item-object[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object ); ?>" />
  188.                 <input class="menu-item-data-parent-id" type="hidden" name="menu-item-parent-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_item_parent ); ?>" />
  189.                 <input class="menu-item-data-position" type="hidden" name="menu-item-position[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" />
  190.                 <input class="menu-item-data-type" type="hidden" name="menu-item-type[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->type ); ?>" />
  191.             </div><!-- .menu-item-settings-->
  192.             <ul class="menu-item-transport"></ul>
  193.         <?php
  194.         $output .= ob_get_clean();
  195.     }
  196. }

 

二、修改默认的walker类为新类:

  1. //该过滤器位于nav-menu.php
  2. add_filter( 'wp_edit_nav_menu_walker', 'custom_nav_edit_walker',10,2 );
  3. function custom_nav_edit_walker($walker,$menu_id) {
  4.     return 'Walker_Nav_Menu_Edit_Custom';//新类名
  5. }

注意上面新类代码中有一段新添加的代码,以及类名修改为Walker_Nav_Menu_Edit_Custom,至此新类就启用了。

 

三、数据的保存和更新:

  1. //注意下面代码中的字符 ashuwp
  2. add_action('wp_update_nav_menu_item', 'custom_nav_update',10, 3);
  3. function custom_nav_update($menu_id$menu_item_db_id$args ) {
  4.     if ( is_array($_REQUEST['menu-item-ashuwp']) ) {
  5.         $custom_value = $_REQUEST['menu-item-ashuwp'][$menu_item_db_id];
  6.         update_post_meta( $menu_item_db_id, '_menu_item_ashuwp', $custom_value );
  7.     }
  8. }
  9. add_filter( 'wp_setup_nav_menu_item','custom_nav_item' );
  10. function custom_nav_item($menu_item) {
  11.     $menu_item->ashuwp = get_post_meta( $menu_item->ID, '_menu_item_ashuwp', true );
  12.     return $menu_item;
  13. }

效果图:菜单项添加字段

 

五、实际调用

对于文章字段的调用,我们通过 get_post_meta函数来获取文章的字段,菜单项也一样,对每个菜单,我们在知道他的“文章ID”后,也通过get_post_meta函数来调用。

  1. //对应于上面的代码,获取方法
  2. get_post_meta( $menu_item->ID, '_menu_item_ashuwp', true );

 

已有4条评论

  1. hoythan
    hoythan : 回复

    一处错误:

    一、将wp-admin/includes/nav-menu.php文件中Walker_Nav_Mnu_Edit类复制一份粘贴到主题functions.php文件中,更改类名,然后在里面添加相应的代码。如下:

    中的Walker_Nav_Mnu_Edit 应改为 Walker_Nav_Menu_Edit

    • 阿树工作室
      阿树工作室 回复hoythan: 回复

      谢谢指出错误。

  2. xayz
    xayz : 回复

    ID, ‘_menu_item_ashuwp’, true ); ?>

    不能显示调用输出

    • 中营
      中营 回复xayz: 回复

      你好 你能调用出来了么??

发表评论