我已经在我的主题选项页面上安装了虹膜颜色选择器，但单击“保存”不会保存所选的值，它只会重置为空白（或预设值）。我错过了什么？
功能。php：
function accelerator_admin_scripts(){
wp_enqueue_script( \'custom-js\', get_template_directory_uri() . \'/js/custom.js\', array(\'jquery\'), \'1.0.0\', true );
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 );
}
add_action(\'admin_enqueue_scripts\',\'accelerator_admin_scripts\');
选项。php：
function add_theme_menu_item()
{
add_menu_page("Theme Options", "Theme Options", "manage_options", "theme-options", "theme_settings_page", null, 99);
}
add_action("admin_menu", "add_theme_menu_item");
function theme_settings_page(){
?>
<div class="wrap">
<h1>Theme Options</h1>
<form method="post" action="options.php">
<?php
settings_fields("section");
do_settings_sections("theme-options");
submit_button();
?>
</form>
</div>
<?php
}
function display_color_option()
{
echo \'<div id="color-box" style="width:50px; height:30px;margin:2px 20px 5px 0;"></div>\';
?>
<input type="text" class="color-picker" name="primary_color" id=\'color-picker\' value="#000000" />
<?php
}
function display_theme_panel_fields()
{
add_settings_field("primary_color", "Primary Theme Color", "display_color_option", "theme-options", "section");
register_setting("section", "primary_color");
}
add_action("admin_init", "display_theme_panel_fields");
自定义。js公司：
jQuery(document).ready(function($){
$(\'#color-picker\').iris({
hide: true,
palettes: true,
change: function(event, ui) {
// event = standard jQuery event, produced by whichever control was changed.
// ui = standard jQuery UI object, with a color member containing a Color.js object
// change the preview box color
$("#color-box").css( \'background-color\', ui.color.toString());
}
});
});
保存后：
在标题中。php：
$main_color = get_option(\'primary_color\');
返回空白。
最合适的回答,由SO网友:Sally CJ 整理而成
所以你已经corrected it, 但正如注释中所指出的，代码中的主要问题是颜色输入没有使用调用时定义的正确名称register_setting().
一、 e.第二个参数（数据库选项名称）是应在输入中使用的名称name 属性
// The option name is primary_color:
register_setting("section", "primary_color"); // BTW, "section" is a too generic name..
// So use that in the <input> name:
<input type="text" class="color-picker" name="primary_color" id=\'color-picker\' value="#000000" />
实际上还有另一个问题：颜色输入的值总是
#000000 因为它在HTML中是静态设置的，或者您没有显示保存在数据库中的。
为了解决这个问题，您可以使用get_option() 获取保存的值并在输入中回显。例如。
<input type="text" class="color-picker" name="primary_color" id=\'color-picker\'
value="<?php echo esc_attr( get_option( \'primary_color\', \'#000000\' ) ); ?>" />
<如果您想使用
Iris 而不是
enhanced WordPress color picker / wp-color-picker, 那么你只需要设置
iris 作为自定义JS脚本的依赖项-无需将
wp-color-picker 样式：
function accelerator_admin_scripts() {
wp_enqueue_script( \'custom-js\', get_template_directory_uri() . \'/js/custom.js\',
// Add iris as a dependency for custom.js.
array( \'jquery\', \'iris\' ), \'1.0.0\', true );
}
wp-color-picker 样式和设置
wp-color-picker 作为脚本的依赖项：
function accelerator_admin_scripts() {
wp_enqueue_style( \'wp-color-picker\' );
wp_enqueue_script( \'custom-js\', get_template_directory_uri() . \'/js/custom.js\',
// Add wp-color-picker as a dependency for custom.js.
array( \'jquery\', \'wp-color-picker\' ), \'1.0.0\', true );
}
然后在JS脚本中，使用
$( \'#color-picker\' ).wpColorPicker() 代替
$( \'#color-picker\' ).iris().
您的代码缺少对的调用add_settings_section(), 但我假设你的实际代码有这个调用？
一般来说，打电话register_setting() 首先，然后是add_settings_section() 然后add_settings_field(). :)
