Question

自Farbtastic is deprecated我想在互联网搜索上花费数小时后在我的主题选项页面中使用Iris (Colour picker)我发现了很多东西我尝试了其中一些但是没有为我工作可能有人在这里更天才可以帮助我弄明白我犯了什么错误。下面是我目前使用farbtastic工作正常的代码示例。

这是我的repo on github

第374行s3-options.php中的

public function scripts() {
    wp_enqueue_media();
    wp_enqueue_style( 'farbtastic' );
    wp_enqueue_script( 'farbtastic' );
    wp_print_scripts( 'jquery-ui-tabs' );
}

和第74行assets/script.js中的自定义脚本

$('#header_text_color_id').hide();
$('#header_text_color_id').farbtastic('#header_text_color');

$('#header_text_color').click(function() {
    $('#header_text_color_id').fadeIn();
});

$(document).mousedown(function() {
    $('#header_text_color_id').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

$('#header_background_color_id').hide();
$('#header_background_color_id').farbtastic('#header_background_color');

$('#header_background_color').click(function() {
    $('#header_background_color_id').fadeIn();
});

$(document).mousedown(function() {
    $('#header_background_color_id').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

我的css是

.color-picker{
    position:relative;
}
.color-picker .color-picker-box{
    position:absolute;
    z-index:1;
    border:solid 1px #f1f1f1;
    padding:1em;
    background:#ffffff;
}

这就像魅力一样现在我想使用IRIS请帮忙完成它。如果你能在github上做到这一点对我来说很好理解。

Answer 1

好的，如果我理解正确，你需要以下内容。我手边有东西，所以我根据你的需要改了一下。

首先我创建了一个子菜单页面（我正在测试它以查看它是否有效，但你可以在你自己的选项中实现它，它应该工作得很好）

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中，但如果您愿意，可以将其添加到单独的选项页面中。

根据建议[{3}}我正在检查我的选项页面上是否有if ($hook_suffix == 'toplevel_page_theme_options')，然后我将我的脚本排入队列。

接下来是页面渲染和ajax save：

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保存。

一旦这一切进入，你就会有：

here

你可以选择

get_option('text_color', '');

如果您愿意，可以在颜色选择器和get_option()中设置默认颜色。在上面的链接中，您可以获得所需的所有信息。

希望这有助于：）

修改

在第374行的s3-options.php添加

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

这应该会在颜色输入字段上触发颜色选择器。

BIG EDIT

所以我不得不在你的框架中挖掘一下，但我得到了它的工作。您需要对其进行修改（删除不必要的文本字段以及管理旧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颜色选择器而不是farbtastic

1 个答案:

BIG EDIT