" バナー "というカスタム投稿タイプがあります。これには、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 ) );
}
}
?>
ありがとう、
カラーピッカーでメタボックスを一度作成しました。あなたは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' );
あなたはクラス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/ /