Thêm Editor vào customize wordpress
wordpress
9
PHP
78
Male avatar

Doan Van Manh viết ngày 10/11/2015

alt text.
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.
alt text

Để 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 !!!.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

Doan Van Manh

4 bài viết.
7 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
9 1
Để bắt đầu làm thêm của riêng bạn thì ban đầu bạn phải có một theme trắng ( Blank theme ) để bắt đầu Theme trắng là gồm có các thư mục và file cơ b...
Doan Van Manh viết hơn 2 năm trước
9 1
Male avatar
3 0
7 bước làm trang web bán hàng ( phần 1 ) Với wordpress , thì việc làm 1 site bán hàng thì plugin woocommerce là một lựa chọn khá là hợp lý. Nhưng ...
Doan Van Manh viết hơn 2 năm trước
3 0
Male avatar
3 3
Vấn đề bảo mật website nói chung và bảo mật website wordpress là một vấn đề rất được quan tâm. Vì có rất nhiều hacker muốn phá web của bạn. Nhiều k...
Doan Van Manh viết hơn 2 năm trước
3 3
Bài viết liên quan
White
2 2
Bash script to fast serve Laravel project Lười gõ dòng lệnh quá nên tạo ra cái script để gõ nhanh :D laravelstart.sh /bin/bash if z "$1" ] ...
Vũ Hoàng Chung viết hơn 1 năm trước
2 2
Male avatar
9 1
Để bắt đầu làm thêm của riêng bạn thì ban đầu bạn phải có một theme trắng ( Blank theme ) để bắt đầu Theme trắng là gồm có các thư mục và file cơ b...
Doan Van Manh viết hơn 2 năm trước
9 1
Male avatar
1 0
Một ngày nào đó, bạn mới dựng source code lên. Bạn luôn hi vọng khi vào site sẽ hiển thị đẹp mắt và yếu tố đẹp mắt ban đầu sẽ là text của site của ...
skul169 viết gần 2 năm trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
7 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!