web-dev-qa-db-fra.com

Comment utiliser l'API WordPress Color Picker dans Custom Post Type, Metabox

J'ai un type de message personnalisé appelé " Bannière " qui a une boîte de méta personnalisée avec deux champs avancés " Titre " (champ de texte) et " Couleur " (sélecteur de couleur). Pouvez-vous me dire comment utiliser l'API WP Color Picker dans le domaine de la couleur? voici mon code pour faire le travail pour le premier champ mais confus comment développer la deuxième partie!

<?php
add_action( 'add_meta_boxes', 'banner_mtbox' );
function banner_mtbox() {
$post_types = array ( 'bannerCPT');
 foreach( $post_types as $post_type ){
    add_meta_box(
        "banner-text",
        "Banner Details ",
        "render_banner_mtbox",
        $post_type,
        "normal",
        "high"
    );
    }

function render_banner_mtbox( $post )
{
 $bannerVal = get_post_custom( $post->ID );
 $bannerTitle = isset( $bannerVal['title_box'] ) ? esc_attr(   $bannerVal['title_box'][0] ) : '
 ?>
 <label for="title_box">Enter Title : </label>
 <input type="text" name="title_box" id="title_box" value="<?php echo $bannerTitle; ?>" />
<?php
}
add_action( 'save_post', 'banner_mtbox_save' );
function banner_mtbox_save( $post_id )
{

if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['banner_mtbox_nonce'] ) || !wp_verify_nonce( $_POST['banner_mtbox_nonce'], 'banner_mtbox_nonce' ) ) return;
if( !current_user_can( 'edit_post' ) ) return;

$allowed = array( 
    'a' => array( // on allow a tags
        'href' => array() // and those anchords can only have href attribute
    )
);


if( isset( $_POST['title_box'] ) ){
    update_post_meta( $post_id, 'title_box', wp_kses( $_POST['title_box'], $allowed ) );
  }
 }
?>

Merci,

plugin-developmenttheme-developmentmetaboxcolor-picker
2
Behseini

J'ai créé une metabox une fois avec Color Picker. Vous devez inclure le style et le script de sélecteur de couleur dans votre hook admin_enqueue_scripts, puis l’initialiser avec

$('.color-picker').wpColorPicker();

De mon Gist :

<?php
add_action( 'admin_enqueue_scripts', 'mytheme_backend_scripts');
if ( ! function_exists( 'mytheme_backend_scripts' ) ){
    function mytheme_backend_scripts($hook) {
        wp_enqueue_media();
        wp_enqueue_style( 'wp-color-picker');
        wp_enqueue_script( 'wp-color-picker');
    }
}
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');
    }
}
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' );
        ?>
        <style type="text/css">
            .hidden{display: none;}
            .pagebox .separator{padding-top: 20px;margin-top: 20px;border-top: 1px solid #ddd;}
        </style>
        <script>
            $('.color-field').each(function(){
                    $(this).wpColorPicker();
            });
        </script>
        <div class="pagebox">

            <p class="separator">
                <h4><?php esc_attr_e('Header Color', 'mytheme' ); ?></h4>
                <input class="color-field" type="text" name="header_color" value="<?php esc_attr_e($header_color); ?>"/>
            </p>
        </div>
        <?php
    }
}
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' );
3
dingo_d

Vous devez créer un champ de saisie avec une classe color-field.

Par exemple:

<input type="text" value="" data-default-color="#444" class="color-field"></input>

Vous pouvez également spécifier la couleur par défaut avec l'attribut data-.

https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

0
Kirill Polevsky