web-dev-qa-db-ja.com

カスタム投稿タイプのメタボックスでWordPressカラーピッカーAPIを使用する方法

" バナー "というカスタム投稿タイプがあります。これには、2つの高度なフィールド " タイトル "（テキストフィールド）と " カラー "（カラーピッカー）のカスタムメタボックスがあります。色の分野でWP Color Picker APIを使用する方法を教えてください。これが私の最初の分野の仕事をするためのコードですが、2番目の部分を開発する方法を混同しました！

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

ありがとう、

plugin-developmenttheme-developmentmetaboxcolor-picker
2
Behseini

カラーピッカーでメタボックスを一度作成しました。あなたはadmin_enqueue_scriptsフックにカラーピッカースタイルとスクリプトを含めて、それからそれを初期化する必要があります。

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

私の 要旨 から：

<?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

あなたはクラスcolor-fieldで入力フィールドを作成しなければなりません。

例えば：

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

data-属性を使ってデフォルトの色を指定することもできます。

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

0
Kirill Polevsky