Wordpress Version 4.4.2

参考链接

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

  4. 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"

 <?php
/**
* Menu item custom fields example
*
* Copy this file into your wp-content/mu-plugins directory.
*
* @package Menu_Item_Custom_Fields_Example
* @version 0.2.0
* @author Dzikri Aziz <kvcrvt@gmail.com>
*
*
* Plugin name: Menu Item Custom Fields Example
* Plugin URI: https://github.com/kucrut/wp-menu-item-custom-fields
* Description: Example usage of Menu Item Custom Fields in plugins/themes
* Version: 0.2.0
* Author: Dzikri Aziz
* Author URI: http://kucrut.org/
* License: GPL v2
* Text Domain: menu-item-custom-fields-example
*/ /**
* Sample menu item metadata
*
* This class demonstrate the usage of Menu Item Custom Fields in plugins/themes.
*
* @since 0.1.0
*/
class Menu_Item_Custom_Fields_Example { /**
* Holds our custom fields
*
* @var array
* @access protected
* @since Menu_Item_Custom_Fields_Example 0.2.0
*/
protected static $fields = array(); /**
* Initialize plugin
*/
public static function init() {
add_action( 'wp_nav_menu_item_custom_fields', array( __CLASS__, '_fields' ), 10, 4 );
add_action( 'wp_update_nav_menu_item', array( __CLASS__, '_save' ), 10, 3 );
add_filter( 'manage_nav-menus_columns', array( __CLASS__, '_columns' ), 99 ); //plugin use js add at 2016-04-06 by wakasann
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script(
'iris',
admin_url( 'js/iris.min.js' ),
array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
false,
1
);
wp_enqueue_script( 'wp-menu-custom-js', plugin_dir_url( __FILE__ ) . 'js/custom.js', array(), '', true );
//use js end
self::$fields = array(
'field-background' => __( 'Menu Background', 'menu-item-custom-fields-example' ),
);
} /**
* Save custom field value
*
* @wp_hook action wp_update_nav_menu_item
*
* @param int $menu_id Nav menu ID
* @param int $menu_item_db_id Menu item ID
* @param array $menu_item_args Menu item data
*/
public static function _save( $menu_id, $menu_item_db_id, $menu_item_args ) {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
return;
} check_admin_referer( 'update-nav_menu', 'update-nav-menu-nonce' ); foreach ( self::$fields as $_key => $label ) {
$key = sprintf( 'menu-item-%s', $_key ); // Sanitize
if ( ! empty( $_POST[ $key ][ $menu_item_db_id ] ) ) {
// Do some checks here...
$value = $_POST[ $key ][ $menu_item_db_id ];
}
else {
$value = null;
} // Update
if ( ! is_null( $value ) ) {
update_post_meta( $menu_item_db_id, $key, $value );
}
else {
delete_post_meta( $menu_item_db_id, $key );
}
}
} /**
* Print field
*
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args Menu item args.
* @param int $id Nav menu ID.
*
* @return string Form fields
*/
public static function _fields( $id, $item, $depth, $args ) {
foreach ( self::$fields as $_key => $label ) :
$key = sprintf( 'menu-item-%s', $_key );
$id = sprintf( 'edit-%s-%s', $key, $item->ID );
$name = sprintf( '%s[%s]', $key, $item->ID );
$value = get_post_meta( $item->ID, $key, true );
$class = sprintf( 'field-%s', $_key );
?>
<p class="description description-wide <?php echo esc_attr( $class ) ?>">
<?php printf(
'<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>',
esc_attr( $id ),
esc_html( $label ),
esc_attr( $name ),
esc_attr( $value )
) ?>
</p>
<?php
endforeach;
} /**
* Add our fields to the screen options toggle
*
* @param array $columns Menu item columns
* @return array
*/
public static function _columns( $columns ) {
$columns = array_merge( $columns, self::$fields ); return $columns;
}
}
Menu_Item_Custom_Fields_Example::init();

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修改为

 //plugin use js add at 2016-04-06 by wakasann
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script(
'iris',
admin_url( 'js/iris.min.js' ),
array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
false,
1
);
wp_enqueue_script(
'wp-color-picker',
admin_url( 'js/color-picker.min.js' ),
array( 'iris' ),
false,
1
); wp_enqueue_script( 'wp-menu-custom-js', plugin_dir_url( __FILE__ ) . 'js/custom.js', array(), '', true );
//use js end

custom.js 更正为:

 /**
* 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);
});

之后的效果是:

在当前的代码中,获取自定义字段:使用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 );

[wordpress]后台自定义菜单字段和使用wordpress color picker的更多相关文章

  1. wordpress去掉自定义菜单的外层div

    wordpress调用自定义菜单时自动会在外层加一个<div class="menu-nav-container">,如下图所示,nav是后台定义的菜单名称,如果想把这 ...

  2. dedecms为后台自定义菜单的完整方法

    dedecms为后台自定义菜单的完整方法 品味人生 dedeCMS 围观7330次 18 条评论 编辑日期:2014-06-14 字体:大 中 小   最近在给客户定制一个企业网站,客户要求使用ded ...

  3. wordpress调用自定义菜单

    wordpress要调用自定义菜单首先要注册菜单,将代码添加到主题文件夹下的function.php中,比如wordpress自带主题2019的定义如下 // This theme uses wp_n ...

  4. 黄聪:定制化WordPress后台自定义仪表盘

    WordPress作为一博客管理系统,相对来说已经相当简洁了,对用户也十分友好,新手也极易上手. 仪表盘是我们登陆WordPress后看到的后台界面,映入眼帘的是各种各样的信息,如WordPress ...

  5. wordpress 自定义删除后台管理菜单

    <?php /* //wordpress共有5种角色:administrator(管理员) editor(编辑) author(作者) contributor(投稿者) subscriber(订 ...

  6. WordPress 后台评论如何自定义搜索条件

    大家都知道WordPress 作为一个非常成熟的博客系统,功能可以说是非常强大,几乎整个网站都可以进行定制开发,已经不算是一个博客系统了而应该是一个成熟的开发框架 最近就用WP给客户开发了一个网站,但 ...

  7. WordPress 后台上传自定义网站Logo

    需求: 众所周知一般网站的logo都是固定的所以我在做网站时也是使用的静态logo文件,但最近用wp给一个客户做的网站时,因为网站现在的logo可能会需要重新设计,所以客户提出了需要在后台可以自己修改 ...

  8. WordPress自定义菜单和修改去除多余的css

    这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了. 所以我们在模板制作过程中,需要自定义WordPress菜单. 在functions.php文件中 ...

  9. 在WordPress后台菜单系统中添加Home链接

    在wordpress后台如果想打开前台的话,要想先把鼠标移动到左上角菜单,然后在下拉菜单中点击“查看站点”,很是麻烦,能不能在 WordPress 后台菜单系统中添加 Home 链接呢? 将下面代码复 ...

随机推荐

  1. 大规模Hadoop集群实践:腾讯分布式数据仓库(TDW)

    TDW 是腾讯最大的离线数据处理平台.本文主要从需求.挑战.方案和未来计划等方面,介绍了TDW在建设单个大规模集群中采取的 JobTracker 分散化和 NameNode 高可用两个优化方案. TD ...

  2. java deleteOnExit函数用法

    Java的File类中有两个delete方法:delete和deleteOnExit delete无需解释,为直接删除,deleteOnExit文档解释为:在虚拟机终止时,请求删除此抽象路径名表示的文 ...

  3. ROW_NUMBER 使用

    WITH t_pageAS( SELECT ROW_NUMBER() OVER ( ORDER BY table_name ) AS row_index,column_name FROM table_ ...

  4. leetcode@ [174] Dungeon Game (Dynamic Programming)

    https://leetcode.com/problems/dungeon-game/ The demons had captured the princess (P) and imprisoned ...

  5. IntelliJ远程调试教程

    概述 对于分布式系统的调试不知道大家有什么好的方法.对于我来说,在知道远程调试这个方法之前就是在代码中打各种log,然后重新部署,上线,调试,这样比较费时.今天咱们来了解了解Java远程调试这个牛逼的 ...

  6. Win7 NFS 设置详解 | X-Space

    Win7 NFS 设置详解 | X-Space Win7 NFS 设置详解

  7. ActivityNotFoundException: No Activity found to handle Intent

    代码如下: Intent intent = new Intent(); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); intent.setAction ...

  8. 第十一章、认识与学习 BASH 数据流重导向

    数据流重导向就是将某个命令运行后应该要出现在屏幕上的数据, 给它导向到其他的地方,例如文件或者是装置 (例如打印机之类的)! 什么是数据流重导向 命令运行过程如下: 图 5.1.1.命令运行过程的数据 ...

  9. Oracle- 提示查询结果不可更新,请使用...更新结果。

    我们在对Oracle数据库进行操作时,有时会在查询完结果后想要对其中的某些数据进行操作,当我们点击编辑(一个锁标志)是,会提示我们上述问题中的错误:这些查询结果不可更新,请使用ROWI或者SELECT ...

  10. Ios学习

    http://www.cnblogs.com/superhappy/archive/2013/04/23/3038493.html http://www.360doc.com/content/14/0 ...