web-dev-qa-db-fra.com

Sélecteur de couleur pour les articles et les pages

Je veux ajouter un sélecteur de couleur aux publications et pages WordPress dans le menu administrateur. J'ai ce code pour le sélecteur de couleur:

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

Et js code

(function( $ ) {


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

})( jQuery );

ma question est comment puis-je utiliser ce code pour ajouter le metabox avec sélecteur de couleur à chaque poste ou page d’administrateur uniquement?

wp-adminmetaboxcolor-picker
1
Narek Zakarian

J'ai trouvé la solution sur Le message de Denis Žoljom

1) - J'ai ajouté la metabox comme ceci

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) - mettre en file d'attente le style et le script du sélecteur de couleur

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) - créer un conteneur HTML pour le sélecteur de couleur, du texte de description et le champ de saisie

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) - sauvegarder la meta box

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))) J'espère que cela aidera quelqu'un d'autre;)

0
Narek Zakarian