Thêm Editor vào customize wordpress

.
Việc thêm editor vào cusomter giúp cho theme của bạn linh động hơn rất nhiều.
Mình đang làm một theme mà trên header của mình có phần tiêu đề cho phép người dùng nhập vào.

Để có linh động và ứng dụng được nhiều, thay vì chọn textarea, input ( vì nó tính cứng nhắc ) nên mình đã chọn Editor để giải quyết vấn đề này.

Đầu tiên các bạn vào tạo file customizer.php trong theme của bạn để chứa đoạn code dưới đây.
Tiếp đến là vào file function.php thêm đoạn code require get_template_directory() . '/customizer.php'; để require file customizer.php vào theme

/**
 * Register theme options in the Customizer
 * @package TheFour
 */
class TheFour_Customizer
{
    /**
     * Add hooks for customizer
     */
    public function __construct()
    {
        add_action( 'customize_register', array( $this, 'register' ) );
        add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue' ) );
    }

    /**
     * Register customizer settings
     * @param WP_Customize_Manager $wp_customize WordPress customizer manager instance
     */
    public function register( WP_Customize_Manager $wp_customize )
    {
        require_once get_template_directory() . '/control-editor.php';

        // Theme option panel
        $wp_customize->add_panel( 'thefour', array(
            'title' => __( 'Theme Options', 'thefour' ),
        ) );

        // Theme option sections
        $wp_customize->add_section( 'header', array(
            'title' => __( 'Header', 'thefour' ),
            'panel' => 'thefour',
        ) );

        // Hero content
        $wp_customize->add_setting( 'hero_content' );
        $wp_customize->add_control( new TheFour_Customize_Control_Editor(
            $wp_customize,
            'hero_content',
            array(
                'label'       => __( 'Hero content', 'thefour' ),
                'section'     => 'header',
                'settings'    => 'hero_content',
                'description' => __( 'Use this setting to enter custom content for the hero area. This content will replace the website title and description. You can use HTML code (including images) and shortcodes.', 'thefour' ),
            )
        ) );
    }

    /**
     * Enqueue script for customizer control
     */
    public function enqueue()
    {
        wp_enqueue_script( 'thefour-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'jquery' ) );
    }

}

Trong đoạn code trên đã đăng ký tùy chỉnh Hero content và thêm js cho phần customizer.

Tiếp đến là chỉnh lại markup của control trong customizer.
Bằng cách kế thừa class WP_Customize_Control của wordpess.
Bạn thêm file control-editor.php và thêm đoạn code dưới vào .
Lời gọi file require_once get_template_directory() . '/control-editor.php'; đã được thực hiện ở file customizer.php.

/**
 * Register custom control for editor.
 * @link    https://github.com/aristath/kirki/blob/master/includes/controls/class-kirki-controls-editor-control.php
 * @link    https://github.com/paulund/wordpress-theme-customizer-custom-controls/blob/master/text/text-editor-custom-control.php
 * @package The Four
 */

/**
 * Register custom control for editor.
 */
class TheFour_Customize_Control_Editor extends WP_Customize_Control
{
    /**
     * @var string Control type
     */
    public $type = 'editor';

    /**
     * Render the content on the theme customizer page.
     */
    public function render_content()
    {
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
        </label>
        <input type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>">
        <?php
        wp_editor( $this->value(), $this->id, array(
            'textarea_name' => $this->id,
        ) );
        do_action( 'admin_footer' );
        do_action( 'admin_print_footer_scripts' );
        ?>
        <?php
    }
}

Cuối cùng là jquery cho control editor.

Bạn tạo file customizer.js trong thư mục js trong thư mục theme của bạn. Sau đó chèn đoạn code đưới vào.

 * Script for customizer controls.
 */
(function ( $, api )
{
    // Editor control.
    $( window ).load( function ()
    {
        $( 'textarea.wp-editor-area' ).each( function ()
        {
            var $this = $( this ),
                id = $this.attr( 'id' ),
                $input = $( 'input[data-customize-setting-link="' + id + '"]' ),
                editor = tinyMCE.get( id ),
                setChange,
                content;

            if ( editor )
            {
                editor.on( 'change', function ( e )
                {
                    editor.save();
                    content = editor.getContent();
                    clearTimeout( setChange );
                    setChange = setTimeout( function ()
                    {
                        $input.val( content ).trigger( 'change' );
                    }, 500 );
                } );
            }

            $this.css( 'visibility', 'visible' ).on( 'keyup', function ()
            {
                content = $this.val();
                clearTimeout( setChange );
                setChange = setTimeout( function ()
                {
                    $input.val( content ).trigger( 'change' );
                }, 500 );
            } );
        } );
    } );

})( jQuery, wp.customize );

Chúc các bạn thành công !!!.