[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复制到这个插件的目录下。

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

'use strict';
var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: false,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};
$('.menu-custom-color').wpColorPicker(myOptions);
});

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 );