Добавление текстового редактора в Theme Customizer

Для добавления текстового редактора в Theme Customizer создадим класс, расширяющий WP_Customize_Control:

if (class_exists('WP_Customize_Control'))
{
    class Text_Editor_Custom_Control extends WP_Customize_Control
    {
        /**
         * The type of control being rendered
         */
        public $type = 'tinymce_editor';

        /**
         * Enqueue our scripts and styles
         */
        public function enqueue()
        {
            wp_enqueue_script('in_custom_controls_js', trailingslashit(get_template_directory_uri()) . 'js/customizer.js', array('jquery'), '1.0', true);
            wp_enqueue_editor();
        }

        /**
         * Pass our TinyMCE toolbar string to JavaScript
         */
        public function to_json()
        {
            parent::to_json();
            $this->json['intinymcetoolbar1'] = isset($this->input_attrs['toolbar1']) ? esc_attr($this->input_attrs['toolbar1']) : 'bold italic bullist numlist alignleft aligncenter alignright link';
            $this->json['intinymcetoolbar2'] = isset($this->input_attrs['toolbar2']) ? esc_attr($this->input_attrs['toolbar2']) : '';
        }

        /**
         * Render the control in the customizer
         */
        public function render_content()
        {
            ?>
            <div class="tinymce-control">
                <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
                <?php if (!empty($this->description)) { ?>
                    <span class="customize-control-description"><?php echo esc_html($this->description); ?></span>
                <?php } ?>
                <textarea rows="10" id="<?php echo esc_attr($this->id); ?>"
                          class="customize-control-tinymce-editor" <?php $this->link(); ?>><?php echo esc_attr($this->value()); ?></textarea>
            </div>
            <?php
        }
    }
}

Добавление настройки в секцию:

$wp_customize->add_setting( 'desc' , array(
    'transport'   => 'postMessage',
    'sanitize_callback' => 'wp_kses_post'
) );
$wp_customize->selective_refresh->add_partial( 'desc', array(
    'selector' => '.desc'
) );
$wp_customize->add_control( new Text_Editor_Custom_control( $wp_customize, 'desc', array(
    'label'    =>  'Описание',
    'section' => 'section_1',
) ) );

Скачать код добавления визуального редактора.

Подключить класс можно в functions.php:

include_once( dirname( __FILE__ ) . '/mce-custom-control/text_editor_custom_control.php' );

Обновлено: 10.05.2018

Вам помогла эта статья? Оцените!
(5 оценок, среднее: 2,20 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *