[wordpress]后台自定义菜单字段和使用wordpress color picker

Wordpress Version 4.4.2

参考链接

插件使用wordpress color picker:Add A New Color Picker To WordPress
后台菜单自定义字段参考插件:wp-menu-item-custom-fields
How do I implement the Wordpress Iris picker into my plugin on the front-end?
New Color Picker in WP 3.5

先安装后台自定义菜单插件到wp-content/plugins下，并启用它。

wp-menu-item-custom-fields 的Readme.md中的一部分翻译。

## 安装 ##

### 作为普通插件 ###
1. 上传 `menu-item-custom-fields` 到 `/wp-content/plugins/` 目录下
1. 通过 wordpress的 'Plugins' 菜单，激活这个插件

### 作为你插件/theme 的类库###
简单复制 `menu-item-custom-fields` 文件到你的插件目录和引入这个插件的主要文件, 如:

`
require_once dirname( __FILE__ ) . '/menu-item-custom-fields/menu-item-custom-fields.php';
`

### 使用 ###

复制(或者自定义) 和在这个插件的doc / 找到 `menu-item-custom-fields-example.php` 文件引入到你的 plugin/theme下。

我个人是直接使用，直接从这个插件的doc复制到这个插件的目录下。

menu-item-custom-fields-example.php 的code，我在init()方法，添加了引入js,并在_fields()方法的输出html的input 的class 添加了"menu-custom-color"

  1 <?php
  2 /**
  3  * Menu item custom fields example
  4  *
  5  * Copy this file into your wp-content/mu-plugins directory.
  6  *
  7  * @package Menu_Item_Custom_Fields_Example
  8  * @version 0.2.0
  9  * @author Dzikri Aziz <kvcrvt@gmail.com>
 10  *
 11  *
 12  * Plugin name: Menu Item Custom Fields Example
 13  * Plugin URI: https://github.com/kucrut/wp-menu-item-custom-fields
 14  * Description: Example usage of Menu Item Custom Fields in plugins/themes
 15  * Version: 0.2.0
 16  * Author: Dzikri Aziz
 17  * Author URI: http://kucrut.org/
 18  * License: GPL v2
 19  * Text Domain: menu-item-custom-fields-example
 20  */
 21 
 22 
 23 /**
 24  * Sample menu item metadata
 25  *
 26  * This class demonstrate the usage of Menu Item Custom Fields in plugins/themes.
 27  *
 28  * @since 0.1.0
 29  */
 30 class Menu_Item_Custom_Fields_Example {
 31 
 32     /**
 33      * Holds our custom fields
 34      *
 35      * @var    array
 36      * @access protected
 37      * @since  Menu_Item_Custom_Fields_Example 0.2.0
 38      */
 39     protected static $fields = array();
 40 
 41 
 42     /**
 43      * Initialize plugin
 44      */
 45     public static function init() {
 46         add_action( 'wp_nav_menu_item_custom_fields', array( __CLASS__, '_fields' ), 10, 4 );
 47         add_action( 'wp_update_nav_menu_item', array( __CLASS__, '_save' ), 10, 3 );
 48         add_filter( 'manage_nav-menus_columns', array( __CLASS__, '_columns' ), 99 );
 49 
 50         //plugin use js add at 2016-04-06 by wakasann
 51         wp_enqueue_script( 'jquery' );
 52         wp_enqueue_style( 'wp-color-picker' );
 53         wp_enqueue_script(
 54         'iris',
 55         admin_url( 'js/iris.min.js' ),
 56         array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
 57         false,
 58         1
 59     );
 60         wp_enqueue_script( 'wp-menu-custom-js', plugin_dir_url( __FILE__ ) . 'js/custom.js', array(), '', true );
 61         //use js end
 62         self::$fields = array(
 63             'field-background' => __( 'Menu Background', 'menu-item-custom-fields-example' ),
 64         );
 65     }
 66 
 67 
 68     /**
 69      * Save custom field value
 70      *
 71      * @wp_hook action wp_update_nav_menu_item
 72      *
 73      * @param int   $menu_id         Nav menu ID
 74      * @param int   $menu_item_db_id Menu item ID
 75      * @param array $menu_item_args  Menu item data
 76      */
 77     public static function _save( $menu_id, $menu_item_db_id, $menu_item_args ) {
 78         if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
 79             return;
 80         }
 81 
 82         check_admin_referer( 'update-nav_menu', 'update-nav-menu-nonce' );
 83 
 84         foreach ( self::$fields as $_key => $label ) {
 85             $key = sprintf( 'menu-item-%s', $_key );
 86 
 87             // Sanitize
 88             if ( ! empty( $_POST[ $key ][ $menu_item_db_id ] ) ) {
 89                 // Do some checks here...
 90                 $value = $_POST[ $key ][ $menu_item_db_id ];
 91             }
 92             else {
 93                 $value = null;
 94             }
 95 
 96             // Update
 97             if ( ! is_null( $value ) ) {
 98                 update_post_meta( $menu_item_db_id, $key, $value );
 99             }
100             else {
101                 delete_post_meta( $menu_item_db_id, $key );
102             }
103         }
104     }
105 
106 
107     /**
108      * Print field
109      *
110      * @param object $item  Menu item data object.
111      * @param int    $depth  Depth of menu item. Used for padding.
112      * @param array  $args  Menu item args.
113      * @param int    $id    Nav menu ID.
114      *
115      * @return string Form fields
116      */
117     public static function _fields( $id, $item, $depth, $args ) {
118         foreach ( self::$fields as $_key => $label ) :
119             $key   = sprintf( 'menu-item-%s', $_key );
120             $id    = sprintf( 'edit-%s-%s', $key, $item->ID );
121             $name  = sprintf( '%s[%s]', $key, $item->ID );
122             $value = get_post_meta( $item->ID, $key, true );
123             $class = sprintf( 'field-%s', $_key );
124             ?>
125                 <p class="description description-wide <?php echo esc_attr( $class ) ?>">
126                     <?php printf(
127                         '<label for="%1$s">%2$s<br /><input type="text" id="%1$s" class="widefat %1$s menu-custom-color" name="%3$s" value="%4$s" /></label>',
128                         esc_attr( $id ),
129                         esc_html( $label ),
130                         esc_attr( $name ),
131                         esc_attr( $value )
132                     ) ?>
133                 </p>
134             <?php
135         endforeach;
136     }
137 
138 
139     /**
140      * Add our fields to the screen options toggle
141      *
142      * @param array $columns Menu item columns
143      * @return array
144      */
145     public static function _columns( $columns ) {
146         $columns = array_merge( $columns, self::$fields );
147 
148         return $columns;
149     }
150 }
151 Menu_Item_Custom_Fields_Example::init();

View Code

custom.js

/**
 * custom.js
 * Custom JS code required by the plugin
 */
jQuery(document).ready(function ($) {

    'use strict';
    $('.menu-custom-color').iris();
});

最终效果是：

嘻嘻，第一次成功，还需完善前台读取自定义字段呢。

------------------------

参考了参考链接的3,4两点，将菜单自定义颜色替换了一下

将menu-item-custom-fields-example.php文件中的init()方法中的导入js修改为

 1 //plugin use js add at 2016-04-06 by wakasann
 2         wp_enqueue_script( 'jquery' );
 3         wp_enqueue_style( 'wp-color-picker' );
 4         wp_enqueue_script(
 5         'iris',
 6         admin_url( 'js/iris.min.js' ),
 7         array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
 8         false,
 9         1
10     );
11         wp_enqueue_script(
12         'wp-color-picker',
13         admin_url( 'js/color-picker.min.js' ),
14         array( 'iris' ),
15         false,
16         1
17     );
18 
19         wp_enqueue_script( 'wp-menu-custom-js', plugin_dir_url( __FILE__ ) . 'js/custom.js', array(), '', true );
20         //use js end

custom.js 更正为:

 1 /**
 2  * custom.js
 3  * Custom JS code required by the plugin
 4  */
 5 jQuery(document).ready(function ($) {
 6 
 7     'use strict';
 8     var myOptions = {
 9       // you can declare a default color here,
10       // or in the data-default-color attribute on the input
11       defaultColor: false,
12       // a callback to fire whenever the color changes to a valid color
13       change: function(event, ui){},
14       // a callback to fire when the input is emptied or an invalid color
15       clear: function() {},
16       // hide the color picker controls on load
17       hide: true,
18       // show a group of common colors beneath the square
19       // or, supply an array of colors to customize further
20       palettes: true
21   };
22     $('.menu-custom-color').wpColorPicker(myOptions);
23 });

View Code

之后的效果是:

在当前的代码中，获取自定义字段：使用get_post_meta()方法，而生成字段的格式是 menu-item-{$field},eg:menu-item-field-background

在自定义的Walker_Nav_Menu中，可以通过与下面类似的代码进行获取自定义字段。在数据库中，存放在wp_postmeta表中。

$this->field_background = get_post_meta( $item->ID, 'menu-item-field_background',         true );