wordpress - farbtastic の代わりに IRIS Color Picker を使用する方法

Question

Farbtastic は廃止されたので、インターネット検索に何時間も費やした後、代わりにテーマオプションページでIris (カラーピッカー)を使用したいと思います。私がどこで間違いを犯しているのかを理解するために。以下は、私が現在正常に動作している farbtastic で使用しているコードの例です。

ここにgithubの私のレポがあります

s3-options.phpの374 行目

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でそれを行うことができれば、私がそれを理解するのは素晴らしいことです.

score 1 · Accepted Answer

わかりました。あなたが正しく理解している場合は、次のものが必要です。手元に何かがあったので、あなたのニーズに合わせて少し変更しました。

まず、サブメニューページを作成しました (動作するかどうかをテストしていましたが、独自のオプションでこれを実装するだけで問題なく動作するはずです)。

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書き方は下手です。あなたは4つ持っています

jQuery(document).ready(function($){});

ブロック。何のために？必要なものは 1 つだけで、すべてを中に入れることができます。

今なら

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

これは次を追加します：

あとは、入力フィールドを非表示にスタイル設定し、古いフィールドと不要なスクリプトを削除するだけです。

wordpress - farbtastic の代わりに IRIS Color Picker を使用する方法

1 に答える 1

大きな編集

Related

Reference