Я хочу добавить подборку цветов в сообщения WordPress и страницы в меню администратора. У меня есть этот код для выбора цвета:
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 ); } } И код js
(function( $ ) { // Add Color Picker to all inputs that have 'color-field' class $(function() { $('.color-field').wpColorPicker(); }); })( jQuery );
мой вопрос в том, как я могу использовать этот код для добавления метабокса с помощью набора цветов для каждого сообщения администратора или страницы?
Я нашел решение на посту Дениса Жолжома
1). Я добавил metabox как это
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) – введите стиль и сценарий выбора цвета
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) – создать HTML-контейнер для выбора цвета, некоторый текст описания и поле ввода
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) – сохранить мета-окно
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))) Надеюсь, это поможет кому-то еще;)