web-dev-qa-db-ja.com

投稿やページのカラーピッカー

管理者メニューでワードプレスの投稿やページにカラーピッカーを追加したい。私はカラーピッカーのためにこのコードを持っています：

add_action( 'admin_enqueue_scripts', 'add_color_picker' );
function add_color_picker( $hook ) {

  if( is_admin() ) { 

      // Add the color picker css file       
      wp_enqueue_style( 'wp-color-picker' ); 

      // Include our custom jQuery file with WordPress Color Picker dependency
      wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); 
   }
}

そしてjsコード

(function( $ ) {


    // Add Color Picker to all inputs that have 'color-field' class
    $(function() {
        $('.color-field').wpColorPicker();
    });

})( jQuery );

私の質問は、どのように私はすべての管理ポストまたはページだけにカラーピッカーでメタボックスを加えるのにこのコードを使うことができるかということですか？

wp-adminmetaboxcolor-picker
1
Narek Zakarian

私は DenisŽoljomの投稿に解決策を見つけました

1） - 私はこのようにmetaboxを追加しました

add_action（ 'add_meta_boxes'、 'mytheme_add_meta_box'）;

if ( ! function_exists( 'mytheme_add_meta_box' ) ) {
    function mytheme_add_meta_box(){
        add_meta_box( 'header-page-metabox-options', esc_html__('Header Color', 'mytheme' ), 'mytheme_header_meta_box', 'page', 'side', 'low');
    }
}

2） - カラーピッカーのスタイルとスクリプトをエンキューする

add_action( 'admin_enqueue_scripts', 'mytheme_backend_scripts');

if ( ! function_exists( 'mytheme_backend_scripts' ) ){
    function mytheme_backend_scripts( $hook ) {
        wp_enqueue_style( 'wp-color-picker');
        wp_enqueue_script( 'wp-color-picker');
    }
}

3） - カラーピッカー、説明テキスト、入力フィールド用のHTMLコンテナを作成する

if ( ! function_exists( 'mytheme_header_meta_box' ) ) {
    function mytheme_header_meta_box( $post ) {
        $custom = get_post_custom( $post->ID );
        $header_color = ( isset( $custom['header_color'][0] ) ) ? $custom['header_color'][0] : '';
        wp_nonce_field( 'mytheme_header_meta_box', 'mytheme_header_meta_box_nonce' );
        ?>
        <script>
        jQuery(document).ready(function($){
            $('.color_field').each(function(){
                $(this).wpColorPicker();
                });
        });
        </script>
        <div class="pagebox">
            <p><?php esc_attr_e('Choosse a color for your post header.', 'mytheme' ); ?></p>
            <input class="color_field" type="hidden" name="header_color" value="<?php esc_attr_e( $header_color ); ?>"/>
        </div>
        <?php
    }
}

4） - メタボックスを保存する

if ( ! function_exists( 'mytheme_save_header_meta_box' ) ) {
    function mytheme_save_header_meta_box( $post_id ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
        }
        if( !current_user_can( 'edit_pages' ) ) {
            return;
        }
        if ( !isset( $_POST['header_color'] ) || !wp_verify_nonce( $_POST['mytheme_header_meta_box_nonce'], 'mytheme_header_meta_box' ) ) {
            return;
        }
        $header_color = (isset($_POST['header_color']) && $_POST['header_color']!='') ? $_POST['header_color'] : '';
        update_post_meta($post_id, 'header_color', $header_color);
    }
}

add_action( 'save_post', 'mytheme_save_header_meta_box' );

Yeeeeeh）））これが他の誰かに役立つことを願っています;）

0
Narek Zakarian