it-swarm.com.de

Verwendung der WordPress-Farbwähler-API in der Metabox für benutzerdefinierte Post-Typen

Ich habe einen benutzerdefinierten Beitragstyp namens " Banner ", der ein benutzerdefiniertes Metafeld mit zwei erweiterten Feldern " Titel " (Textfeld) und " Farbe " (Farbauswahl) enthält. Können Sie mir bitte mitteilen, wie die WP Color Picker-API im Farbbereich verwendet wird? Hier ist mein Code, um die Arbeit für das erste Feld zu erledigen, aber verwirrt, wie man den zweiten Teil entwickelt!

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

Vielen Dank,

2
Behseini

Ich habe einmal eine Metabox mit Color Picker erstellt. Sie müssen den Stil und das Skript für die Farbauswahl in Ihren admin_enqueue_scripts-Hook aufnehmen und dann mit initialisieren

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

Aus meinem Kern :

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

Sie müssen ein Eingabefeld mit der Klasse color-field erstellen.

Zum Beispiel:

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

Sie können die Standardfarbe auch mit dem Attribut data- angeben.

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

0
Kirill Polevsky