Thêm custom styles vào visual editor WordPress

1 ngày ago, Hướng dẫn WordPress, 1 Views
Thêm custom styles vào visual editor WordPress

Giới thiệu về việc thêm Custom Styles vào Visual Editor WordPress

Trình soạn thảo trực quan (Visual Editor), hay còn gọi là TinyMCE, là một công cụ vô cùng quan trọng trong WordPress. Nó cho phép người dùng tạo và chỉnh sửa nội dung bài viết và trang một cách trực quan, dễ dàng, mà không cần phải viết mã HTML phức tạp. Tuy nhiên, trình soạn thảo mặc định đôi khi lại không đáp ứng được tất cả các nhu cầu về định dạng và phong cách của người dùng. Việc thêm custom styles vào trình soạn thảo trực quan giúp bạn có thể tạo ra những định dạng độc đáo, phù hợp với thương hiệu và phong cách thiết kế của website.

Bài viết này sẽ hướng dẫn bạn từng bước cách thêm custom styles vào trình soạn thảo trực quan của WordPress, từ những cách đơn giản nhất đến những phương pháp phức tạp hơn, để bạn có thể tùy biến trình soạn thảo theo ý muốn.

Tại sao cần thêm Custom Styles vào Visual Editor?

Việc thêm custom styles vào trình soạn thảo trực quan mang lại rất nhiều lợi ích:

  • Nhất quán về thương hiệu: Đảm bảo rằng tất cả nội dung trên trang web đều sử dụng các phong cách nhất quán, phù hợp với thương hiệu của bạn.
  • Tăng tốc độ làm việc: Giúp người dùng dễ dàng áp dụng các định dạng đã được định nghĩa trước, tiết kiệm thời gian và công sức.
  • Cải thiện trải nghiệm người dùng: Cung cấp các tùy chọn định dạng trực quan, giúp người dùng dễ dàng tạo ra nội dung hấp dẫn và chuyên nghiệp.
  • Đơn giản hóa quy trình: Giảm sự phụ thuộc vào việc chỉnh sửa mã HTML trực tiếp, đặc biệt đối với những người không có nhiều kinh nghiệm về lập trình.

Tóm lại, việc tùy biến trình soạn thảo trực quan giúp bạn tạo ra một quy trình làm việc hiệu quả hơn và đảm bảo tính nhất quán trong thiết kế của trang web.

Các phương pháp thêm Custom Styles vào Visual Editor

Có nhiều cách để thêm custom styles vào trình soạn thảo trực quan của WordPress. Dưới đây là một số phương pháp phổ biến:

1. Sử dụng Theme Functions (functions.php)

Đây là phương pháp phổ biến nhất và thường được khuyến khích vì tính linh hoạt và khả năng kiểm soát cao. Bạn có thể thêm mã CSS trực tiếp vào file `functions.php` của theme đang sử dụng, hoặc tốt hơn là tạo một child theme để tránh mất các tùy chỉnh khi theme được cập nhật.

Bước 1: Mở file `functions.php` của theme (hoặc child theme).

Bước 2: Thêm đoạn mã sau vào file:

    
    function my_theme_add_editor_styles() {
      add_editor_style( 'custom-editor-style.css' );
    }
    add_action( 'admin_init', 'my_theme_add_editor_styles' );

Đoạn mã này sẽ “báo” cho WordPress biết rằng bạn muốn thêm một file CSS có tên `custom-editor-style.css` vào trình soạn thảo trực quan.

Bước 3: Tạo file `custom-editor-style.css` trong thư mục gốc của theme (hoặc child theme).

Bước 4: Thêm các CSS styles mà bạn muốn sử dụng trong trình soạn thảo vào file `custom-editor-style.css`. Ví dụ:

    
    .my-custom-class {
      background-color: #f0f0f0;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .my-highlight {
      color: red;
      font-weight: bold;
    }

Bước 5: Lưu tất cả các file và làm mới trình soạn thảo trực quan. Bạn sẽ thấy các styles mới đã được thêm vào menu “Formats” hoặc “Styles” (tùy thuộc vào theme).

2. Sử dụng Plugin

Nếu bạn không muốn chỉnh sửa file `functions.php` trực tiếp, bạn có thể sử dụng một plugin để thêm custom styles vào trình soạn thảo trực quan. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress Plugin Repository.

Ví dụ:

  • TinyMCE Advanced: Plugin này cho phép bạn tùy chỉnh các nút trên thanh công cụ của trình soạn thảo và thêm các styles CSS của riêng bạn.
  • Styleshout Visual Editor Customizer: Một plugin đơn giản và dễ sử dụng để thêm custom styles vào menu “Formats”.
  • Advanced Editor Tools (previously TinyMCE Advanced): Phiên bản nâng cấp của TinyMCE Advanced, với nhiều tính năng tùy biến hơn.

Các plugin này thường cung cấp giao diện người dùng trực quan để bạn có thể dễ dàng thêm các styles mà không cần phải viết mã.

3. Sử dụng CSS Custom Properties (Variables)

CSS Custom Properties (hay còn gọi là CSS Variables) là một tính năng mạnh mẽ của CSS cho phép bạn định nghĩa các biến số để lưu trữ các giá trị CSS. Bạn có thể sử dụng chúng để tạo ra các styles linh hoạt và dễ bảo trì.

Ví dụ:

Trong file `custom-editor-style.css`, bạn có thể định nghĩa các biến số:

    
    :root {
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      --font-family: Arial, sans-serif;
    }

    .my-custom-button {
      background-color: var(--primary-color);
      color: white;
      font-family: var(--font-family);
      padding: 10px 20px;
      border: none;
    }

Sau đó, bạn có thể sử dụng các biến số này trong các styles khác.

Việc sử dụng CSS Custom Properties giúp bạn dễ dàng thay đổi các giá trị CSS một cách nhất quán trên toàn bộ trang web.

Thêm Custom Styles vào Menu Formats/Styles

Sau khi đã thêm file CSS vào trình soạn thảo trực quan, bạn cần phải cấu hình để các styles này hiển thị trong menu “Formats” hoặc “Styles”. Cách thực hiện có thể khác nhau tùy thuộc vào theme và plugin bạn đang sử dụng.

Ví dụ:

Nếu bạn đang sử dụng TinyMCE Advanced plugin, bạn có thể vào trang cài đặt của plugin và thêm các styles vào danh sách “Formats”.

Nếu bạn đang sử dụng phương pháp thêm styles trực tiếp vào file `functions.php`, bạn có thể sử dụng hàm `mce_buttons` và `mce_external_plugins` để thêm các styles vào menu “Formats”.

    
    function my_theme_mce_buttons( $buttons ) {
      array_unshift( $buttons, 'styleselect' );
      return $buttons;
    }
    add_filter( 'mce_buttons', 'my_theme_mce_buttons' );

    function my_theme_mce_before_init( $settings ) {

      $style_formats = array(
        array(
          'title' => 'My Custom Class',
          'selector' => 'p,h1,h2,h3,h4,h5,h6,td,div',
          'classes' => 'my-custom-class'
        ),
        array(
          'title' => 'My Highlight',
          'inline' => 'span',
          'classes' => 'my-highlight'
        )
      );

      $settings['style_formats'] = json_encode( $style_formats );

      return $settings;
    }
    add_filter( 'tiny_mce_before_init', 'my_theme_mce_before_init' );

Đoạn mã này sẽ thêm một menu “Styles” vào trình soạn thảo và cho phép bạn chọn các styles đã được định nghĩa trong file `custom-editor-style.css`.

Lưu ý khi thêm Custom Styles

Khi thêm custom styles vào trình soạn thảo trực quan, bạn cần lưu ý một số điều sau:

  • Sử dụng child theme: Luôn sử dụng child theme để tránh mất các tùy chỉnh khi theme được cập nhật.
  • Kiểm tra tính tương thích: Đảm bảo rằng các styles bạn thêm vào tương thích với theme và các plugin khác mà bạn đang sử dụng.
  • Tránh sử dụng quá nhiều styles: Chỉ thêm những styles thực sự cần thiết để tránh làm phức tạp trình soạn thảo.

Kết luận

Việc thêm custom styles vào trình soạn thảo trực quan của WordPress là một cách tuyệt vời để tùy biến trang web của bạn và đảm bảo tính nhất quán về thương hiệu. Bằng cách sử dụng các phương pháp được trình bày trong bài viết này, bạn có thể dễ dàng thêm các styles của riêng mình và tạo ra một trải nghiệm người dùng tốt hơn.

Related Topics by Tag
, , , ,

..