Home Đây là cách để thêm tùy chỉnh Styles trong WordPress Visual Editor

    Đây là cách để thêm tùy chỉnh Styles trong WordPress Visual Editor

    33
    0
    SHARE

    Bạn có muốn thêm Styles tùy chỉnh trong trình chỉnh sửa hình ảnh WordPress? Thêm Styles tùy chỉnh cho phép bạn nhanh chóng áp dụng định dạng mà không cần chuyển sang trình soạn thảo văn bản. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm Styles tùy chỉnh vào trình soạn thảo hình ảnh WordPress.

    Tham khảo : Backlink tay

    Lưu ý: Hướng dẫn này yêu cầu kiến ​​thức cơ bản về CSS .

    Tại sao và khi bạn cần Các kiểu tùy chỉnh cho WordPress Visual Editor

    Theo mặc định, trình biên tập hình ảnh WordPress đi kèm với một số định dạng cơ bản và các tùy chọn Styles. Tuy nhiên, đôi khi bạn có thể cần Styles tùy chỉnh của riêng bạn để thêm các nút CSS , khối nội dung , dòng giới thiệu, v.v …

    Bạn luôn có thể chuyển đổi từ hình ảnh sang trình soạn thảo văn bản và thêm HTML và CSS tùy chỉnh. Nhưng nếu bạn thường xuyên sử dụng một số kiểu, thì tốt nhất bạn nên thêm chúng vào trình biên tập hình ảnh để bạn có thể dễ dàng sử dụng lại chúng.

    Điều này sẽ giúp bạn tiết kiệm thời gian dành cho việc chuyển đổi qua lại giữa văn bản và trình chỉnh sửa trực quan. Nó cũng sẽ cho phép bạn luôn sử dụng cùng một Styles trên trang web của bạn.

    Xem : http://dichvuseosaigon.com/p/daotaoseowebchuyennghiep.html

    Quan trọng nhất, bạn có thể dễ dàng tinh chỉnh hoặc cập nhật các Styles mà không phải chỉnh sửa các bài viết trên trang web của bạn.

    Có nói rằng, chúng ta hãy xem làm thế nào để thêm Styles tùy chỉnh trong WordPress biên tập trực quan.

    Phương pháp 1: Thêm kiểu tùy chỉnh trong Visual Editor bằng cách sử dụng Plugin

    Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin TinyMCE Custom Styles . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước về cách cài đặt plugin WordPress .

    Khi kích hoạt, bạn cần truy cập vào trang Settings » TinyMCE Custom Styles để định cấu hình cài đặt plugin.

    Plugin cho phép bạn chọn vị trí của các tệp stylesheet. Nó có thể sử dụngbảng định kiểu của theme hoặc theme của child , hoặc bạn có thể chọn một vị trí tùy chỉnh của riêng bạn.

    Sau đó, bạn cần nhấp vào nút ‘Lưu Tất cả Cài đặt’ để lưu trữ thay đổi của bạn.

    Bây giờ bạn có thể thêm Styles tùy chỉnh của bạn. Bạn cần phải cuộn xuống một chút cho phần kiểu và nhấp vào nút Thêm kiểu mới.

    Đầu tiên bạn cần nhập tiêu đề cho Styles. Tiêu đề này sẽ được hiển thị trong trình đơn thả xuống. Tiếp theo, bạn cần phải chọn nó là một phần tử nội tuyến, chặn, hoặc selector.

    Sau đó thêm một lớp CSS và sau đó thêm các quy tắc CSS của bạn như thể hiện trong hình bên dưới.

    Một khi bạn đã thêm một Styles CSS, chỉ cần nhấp vào nút ‘Lưu Tất cả Cài đặt’ để lưu các thay đổi của bạn.

    Bây giờ bạn có thể chỉnh sửa một bài đăng hiện có hoặc tạo một bài đăng mới. Bạn sẽ thấy một trình đơn thả xuống Định dạng trong dòng thứ hai của trình soạn thảo hình ảnh WordPress.

    Đơn giản chỉ cần chọn một số văn bản trong trình soạn thảo và sau đó chọn Styles tùy chỉnh của bạn từ trình đơn thả xuống Định dạng để áp dụng nó.

    Bây giờ bạn có thể xem trước bài viết của bạn để thấy rằng Styles tùy chỉnh của bạn được áp dụng chính xác.

    Phương pháp 2: Thêm Stylish Styles vào WordPress Visual Editor

    Phương pháp này yêu cầu bạn tự thêm mã vào các tệp WordPress của bạn.Nếu đây là lần đầu tiên bạn thêm mã vào WordPress, vui lòng xem hướng dẫn của chúng tôi về cách thêm đoạn mã từ web vào WordPress .

    Bước 1: Thêm một menu thả xuống Styles tùy chỉnh trong WordPress Visual Editor

    Đầu tiên, chúng ta sẽ thêm một trình đơn thả xuống Định dạng trong trình soạn thảo hình ảnh WordPress. Trình đơn thả xuống này sau đó sẽ cho phép chúng tôi lựa chọn và áp dụng Styles tùy chỉnh của chúng tôi.

    Bạn cần phải thêm mã sau vào tệp tin functions.php của chủ đề hoặc mộtplugin cụ thể cho trang web .

    1
    2
    3
    4
    5
    function wpb_mce_buttons_2($buttons) {
        array_unshift($buttons, 'styleselect');
        return $buttons;
    }
    add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

    Bước 2: Thêm tùy chọn chọn để trình đơn thả xuống

    Bây giờ bạn sẽ cần phải thêm các tùy chọn vào trình đơn thả xuống mà bạn vừa tạo. Sau đó, bạn có thể chọn và áp dụng các tùy chọn này từ trình đơn thả xuống Định dạng.

    Vì lợi ích của hướng dẫn này, chúng tôi sẽ thêm ba kiểu tùy chỉnh để tạo khối nội dung và các nút.

    Xem tiếp : Đào tạo SEO

    Bạn sẽ cần thêm mã sau vào tệp functions.php của chủ đề hoặc một plugin cụ thể cho trang web .

    1
    2
    3
    4
    5
    6
    7
    số 8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    /*
    * Callback function to filter the MCE settings
    */
    function my_mce_before_init_insert_formats( $init_array ) { 
    // Define the style_formats array
        $style_formats = array
    /*
    * Each array child is a format with it's own settings
    * Notice that each array has title, block, classes, and wrapper arguments
    * Title is the label which will be visible in Formats menu
    * Block defines whether it is a span, div, selector, or inline style
    * Classes allows you to define CSS classes
    * Wrapper whether or not to add a new block-level element around any selected elements
    */
            array
                'title' => 'Content Block'
                'block' => 'span'
                'classes' => 'content-block',
                'wrapper' => true,
                
            ), 
            array
                'title' => 'Blue Button'
                'block' => 'span'
                'classes' => 'blue-button',
                'wrapper' => true,
            ),
            array
                'title' => 'Red Button'
                'block' => 'span'
                'classes' => 'red-button',
                'wrapper' => true,
            ),
        ); 
        // Insert the array, JSON ENCODED, into 'style_formats'
        $init_array['style_formats'] = json_encode( $style_formats ); 
        
        return $init_array
      
    }
    // Attach callback to 'tiny_mce_before_init'
    add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

    Bây giờ bạn có thể thêm một bài đăng mới trong WordPress và nhấp vào trình đơn thả xuống Định dạng trong trình chỉnh sửa Trực quan. Bạn sẽ nhận thấy rằng các kiểu tùy chỉnh của bạn bây giờ có thể nhìn thấy dưới các định dạng.

    Tuy nhiên, việc chọn chúng không làm cho bất kỳ sự khác biệt nào trong trình chỉnh sửa bài đăng ngay bây giờ.

    Bước 3: Thêm các kiểu CSS

    Bây giờ bước cuối cùng là thêm các quy tắc kiểu CSS cho Styles tùy chỉnh của bạn.

    Bạn sẽ cần phải thêm CSS này vào chủ đề của bạn hoặc các tập tin style.css của style.css và các tệp tin editor-style.css.

    1
    2
    3
    4
    5
    6
    7
    số 8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    .content-block {
        border:1px solid #eee;
        padding:3px;
        background:#ccc;
        max-width:250px;
        float:right;
        text-align:center;
    }
    .content-block:after {
        clear:both;
    }
    .blue-button {
        background-color:#33bdef;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #057fd0;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        padding:6px 24px;
        text-decoration:none;
    }
    .red-button {
        background-color:#bc3315;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #942911;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        padding:6px 24px;
        text-decoration:none;
    }

    Bảng điều khiển của trình biên tập điều khiển sự xuất hiện của nội dung của bạn trong trình chỉnh sửa hình ảnh. Kiểm tra tài liệu của chủ đề của bạn để tìm ra vị trí của tập tin này.

    Nếu chủ đề của bạn không có tệp biên tập của trình soạn thảo, thì bạn luôn có thể tạo một tệp. Đơn giản chỉ cần tạo một tập tin CSS mới và đặt tên nócustom-editor-style.css.

    Bạn cần tải tập tin này lên thư mục gốc của chủ đề và sau đó thêm mã này vào tệp tin functions.php của chủ đề.

    1
    2
    3
    4
    function my_theme_add_editor_styles() {
        add_editor_style( 'custom-editor-style.css' );
    }
    add_action( 'init', 'my_theme_add_editor_styles' );

    Đó là tất cả. Bạn đã thêm thành công kiểu tùy chỉnh của bạn vào trình soạn thảo hình ảnh WordPress. Hãy cảm thấy tự do để chơi với mã bằng cách thêm các yếu tố của riêng bạn và Styles.

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here