好的，所以如果我理解正确，您需要以下内容。我手头有一些东西，所以我对其进行了一些修改以满足您的需要。
首先我创建了一个子菜单页面（我正在测试它是否有效，但您可以在自己的选项中实现它，它应该可以正常工作）
add_action( 'admin_menu', 'mytheme_add_color_in_options' );
if (!function_exists('mytheme_add_color_in_options')) {
function mytheme_add_color_in_options(){
add_menu_page( esc_html__('Options', 'mytheme'), esc_html__('Options', 'mytheme'), 'manage_options', 'theme_options', 'mytheme_add_options', 'dashicons-admin-tools
', '25' );
}
}
然后我将必要的脚本排入队列
add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
// first check that $hook_suffix is appropriate for your admin page
if ($hook_suffix == 'toplevel_page_theme_options') {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', get_template_directory_uri() .'/js/options.js', array( 'wp-color-picker' ), false, true );
// If you're using WPML, a nice 'trick' to have
$ajaxurl = '';
if( in_array('sitepress-multilingual-cms/sitepress.php', get_option('active_plugins')) ){
$ajaxurl .= admin_url( 'admin-ajax.php?lang=' . ICL_LANGUAGE_CODE );
} else{
$ajaxurl .= admin_url( 'admin-ajax.php');
}
wp_localize_script( 'my-script-handle', 'options_ajax', array(
'ajaxurl' => $ajaxurl,
'settings_saved' => esc_html__('Settings Saved', 'mytheme')
));
}
}
我正在使用 AJAX 保存选项，因此我也将其本地化admin-ajax.php。但重要的部分是wp_enqueue_style( 'wp-color-picker' );. 这实际上包括颜色选择器。我将所有这些都放在了，functions.php但如果您愿意，您可以将其添加到单独的选项页面中。
按照这里的建议，我正在检查我是否在带有 的选项页面上if ($hook_suffix == 'toplevel_page_theme_options')，然后将我的脚本排入队列。
接下来是页面渲染和ajax保存：
if (!function_exists('mytheme_add_options')) {
function mytheme_add_options(){
echo '<div class="wrap"><h2>'.esc_html__('Theme Options', 'mytheme').'</h2>';
echo '<p>'.esc_html__('Add your theme options.', 'mytheme').'</p>';
$text_color = get_option('text_color', '');
echo '<style>
#options_form .spinner {
background: url(images/spinner.gif) no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
display: inline-block;
visibility: hidden;
float:none;
vertical-align: middle;
opacity: .7;
filter: alpha(opacity=70);
width: 20px;
height: 20px;
margin: -2px 10px 0;
}
.saved_options{
color: #093;
}
</style>
<form id="options_form" class="options_form" method="post" action="#">
<table class="form-table">
<tbody>
<tr>
<th><label for="text_color">'.esc_html__('Text Color', 'mytheme').'</label></th>
<td><input type="hidden" name="text_color" id="text_color" value="'.esc_attr($text_color).'"></td>
</tr>
</tbody>
</table>
<input type="submit" class="submit button button-primary" value="'.esc_html__('Save', 'mytheme').'"><span class="spinner"></span><span class="saved_options"></span><input type="hidden" name="ajaxnonce" value="' . wp_create_nonce( 'options_form' ) . '">
<input type="hidden" name="ajaxnonce" value="' . wp_create_nonce( 'options_form' ) . '">
</form></div>';
}
}
add_action( 'wp_ajax_mytheme_options_page_save', 'mytheme_options_page_save' );
add_action( 'wp_ajax_nopriv_mytheme_options_page_save', 'mytheme_options_page_save' );
if (!function_exists('mytheme_options_page_save')) {
function mytheme_options_page_save() {
$nonce = $_POST['ajaxnonce'];
if ( ! wp_verify_nonce( $nonce, 'options_form' ) ){
die ('BUSTED');
}
if (isset($_POST['text_color'])) {
update_option('text_color', stripslashes( $_POST['text_color']) );
$text_color = stripslashes( $_POST['text_color'] );
}
if( isset($_POST['text_color']) ) {
die();
}
}
}
这只是呈现带有隐藏输入字段的表单，您将在其中初始化颜色选择器。最后一部分当然是javascript。在你options.js添加
jQuery(document).ready(function($){
'use strict';
$('#text_color').wpColorPicker();
/* AJAX Options Save */
$('#options_form').submit(function(){
var $form = $(this);
var str= $form.serialize() + '&action=mytheme_options_page_save';
$.ajax({
type: 'POST',
url: options_ajax.ajaxurl,
data: str,
success: function(){
$('.saved_options').text(options_ajax.settings_saved).delay(2000).fadeOut();
},
beforeSend : function () {
$('.saved_options').text('').show();
$('#options_form .spinner').css('visibility', 'visible');
},
error : function (jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown);
},
complete : function () {
$('#options_form .spinner').css('visibility', 'hidden');
}
});
return false;
});
});
将$('#text_color').wpColorPicker();初始化颜色选择器，其余用于 AJAX 保存。
完成所有这些后，您将拥有以下内容：
你选择
get_option('text_color', '');
如果您愿意，您可以在颜色选择器和get_option(). 在上面的链接中，您拥有所需的所有信息。
希望这有帮助:)
编辑
在您s3-options.php的第 374 行添加
public function scripts() {
wp_enqueue_media();
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );
wp_print_scripts( 'jquery-ui-tabs' );
wp_enqueue_style( 'wp-color-picker' );
}
而在script.js
jQuery(document).ready(function($) {
$('#header_text_color_id').wpColorPicker();
});
现在，你script.js的写得不好。你有四个
jQuery(document).ready(function($){});
块。做什么的？你只需要一个，把所有东西都放在里面。
现在如果
jQuery(document).ready(function($) {
$('#header_text_color_id').wpColorPicker();
});
由于某种原因无法使用，您可以尝试：
$('.color_picker input[type="text"]').each(function(){
$(this).wpColorPicker();
});
这应该会在您的颜色输入字段上触发颜色选择器。
大编辑
所以我不得不深入研究你的框架，但我让它工作了。您需要对其进行修改（删除不必要的文本字段，以及控制旧farbtastic触发器的 javascript）。
首先注释掉（完成编辑后删除）文件farbtastic中的样式和脚本s3-options.php
public function scripts() {
wp_enqueue_media();
// wp_enqueue_style( 'farbtastic' );
// wp_enqueue_script( 'farbtastic' );
wp_print_scripts( 'jquery-ui-tabs' );
}
在你的script.js你需要注释掉（删除）
// $('#header_background_color_id').farbtastic('#header_background_color');
以及会干扰颜色选择器的淡入淡出方法。
接下来，回到s3-options.php里面__construct()之后
add_action( 'admin_init', array( &$this, 'register_settings' ) );
添加
add_action( 'admin_enqueue_scripts', array( &$this, 'my_enqueue_color_picker' ) );
之后添加：
/**
* Add color picker enqueue
*
* @since 1.0
*/
public function my_enqueue_color_picker( $hook_suffix ) {
// first check that $hook_suffix is appropriate for your admin page
if ($hook_suffix == 'toplevel_page_s3-theme-options') {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', get_bloginfo( 'stylesheet_directory' ) . '/s3framework/assets/options.js', array('wp-color-picker'), false, true );
}
}
我已将其设置为您有options.js文件，但您也可以将其更改为您的scripts.js文件。里面options.js只是：
jQuery(document).ready(function($) {
$('#header_text_color_id').wpColorPicker();
});
其中补充说：
其余的，只需将输入字段设置为隐藏，并删除旧字段和不必要的脚本。
我想使用 IRIS 请帮助完成它。如果你能在 github 上做到这一点，对我来说理解它会很棒。