Thêm Custom Styles vào Visual Editor WordPress

Visual Editor (Trình soạn thảo trực quan) của WordPress là một công cụ mạnh mẽ giúp người dùng tạo và chỉnh sửa nội dung trang web một cách dễ dàng. Tuy nhiên, đôi khi những styles mặc định không đủ để đáp ứng nhu cầu thiết kế riêng của bạn. Bài viết này sẽ hướng dẫn bạn cách thêm custom styles vào Visual Editor của WordPress, giúp bạn có thể tạo ra những trang web độc đáo và chuyên nghiệp hơn.

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

Việc thêm custom styles vào Visual Editor mang lại nhiều lợi ích:

• Tính nhất quán: Đảm bảo rằng styles được sử dụng trên trang web phù hợp với branding và thiết kế tổng thể.
• Tiết kiệm thời gian: Thay vì phải viết code HTML/CSS mỗi lần muốn áp dụng một style đặc biệt, bạn có thể dễ dàng chọn nó từ Visual Editor.
• Cải thiện trải nghiệm người dùng: Giúp người dùng dễ dàng tạo ra nội dung đẹp mắt và chuyên nghiệp mà không cần kiến thức về code.
• Mở rộng khả năng tùy biến: Cho phép bạn tạo ra những styles độc đáo, đáp ứng nhu cầu thiết kế riêng của dự án.

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 Visual Editor của WordPress. Dưới đây là một số phương pháp phổ biến:

• Sử dụng Plugin
• Thêm trực tiếp vào Theme Functions File (functions.php)
• Sử dụng Child Theme

Sử dụng Plugin

Đây là phương pháp đơn giản và nhanh chóng nhất, đặc biệt phù hợp với người dùng không có nhiều kiến thức về code. Có nhiều plugin miễn phí và trả phí có thể giúp bạn thêm custom styles vào Visual Editor.

Plugin ví dụ: TinyMCE Advanced

TinyMCE Advanced là một plugin phổ biến cho phép bạn tùy chỉnh Visual Editor một cách dễ dàng. Nó cung cấp nhiều tùy chọn cấu hình, bao gồm cả khả năng thêm custom styles.

1. Cài đặt và kích hoạt plugin TinyMCE Advanced.
2. Truy cập trang cài đặt của plugin (Settings > TinyMCE Advanced).
3. Trong tab “Classic Editor” (nếu bạn sử dụng Classic Editor) hoặc “Block Editor” (nếu bạn sử dụng Gutenberg), kéo các nút và tùy chọn mà bạn muốn thêm vào thanh công cụ của Visual Editor.
4. Để thêm custom styles, bạn cần tạo một file CSS riêng và sau đó liên kết nó với Visual Editor. Tham khảo tài liệu của plugin để biết cách thực hiện.

Thêm trực tiếp vào Theme Functions File (functions.php)

Phương pháp này đòi hỏi bạn có một chút kiến thức về code PHP. Bạn sẽ thêm code vào file `functions.php` của theme để liên kết file CSS chứa custom styles với Visual Editor.

Lưu ý quan trọng: Trước khi chỉnh sửa file `functions.php`, hãy sao lưu nó để tránh mất dữ liệu nếu có lỗi xảy ra. Tốt nhất là sử dụng Child Theme để tránh mất các thay đổi khi theme được cập nhật.

Ví dụ code:

  <?php
  add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );
  function my_theme_add_editor_styles() {
      add_editor_style( 'custom-editor-style.css' );
  }
  ?>
  

Trong đoạn code trên:

• `add_action( ‘after_setup_theme’, ‘my_theme_add_editor_styles’ )`: Hàm này đảm bảo rằng hàm `my_theme_add_editor_styles` sẽ được thực thi sau khi theme đã được thiết lập.
• `add_editor_style( ‘custom-editor-style.css’ )`: Hàm này liên kết file CSS `custom-editor-style.css` với Visual Editor.

Bạn cần tạo một file CSS có tên `custom-editor-style.css` và đặt nó trong thư mục theme của bạn. Trong file CSS này, bạn sẽ định nghĩa các custom styles của mình.

Sử dụng Child Theme

Đây là phương pháp được khuyến khích nhất vì nó giúp bạn tránh mất các thay đổi khi theme gốc được cập nhật. Child Theme kế thừa tất cả các chức năng và thiết kế của theme gốc, nhưng bạn có thể chỉnh sửa nó mà không ảnh hưởng đến theme gốc.

1. Tạo một Child Theme.
2. Copy file `functions.php` từ theme gốc sang Child Theme (nếu nó chưa tồn tại).
3. Thêm code để liên kết file CSS với Visual Editor vào file `functions.php` của Child Theme (tương tự như phương pháp thêm trực tiếp vào Theme Functions File).
4. Tạo file CSS chứa custom styles và đặt nó trong thư mục Child Theme.

Tạo File CSS chứa Custom Styles

Dù bạn chọn phương pháp nào, bạn cũng cần tạo một file CSS chứa các custom styles của mình. File CSS này sẽ định nghĩa các styles mà bạn muốn sử dụng trong Visual Editor.

Ví dụ về nội dung của file `custom-editor-style.css`:

  /* Custom Styles for Visual Editor */

  body {
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
  }

  .custom-heading {
      font-size: 24px;
      font-weight: bold;
      color: #333;
  }

  .custom-button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
  }

  .custom-highlight {
    background-color: yellow;
  }
  

Trong ví dụ trên, chúng ta định nghĩa các styles cho:

• `body`: Style cho toàn bộ nội dung trong Visual Editor.
• `.custom-heading`: Style cho tiêu đề tùy chỉnh.
• `.custom-button`: Style cho nút tùy chỉnh.
• `.custom-highlight`: Style cho phần văn bản được đánh dấu.

Bạn có thể thêm bất kỳ styles nào khác mà bạn muốn sử dụng trong Visual Editor. Hãy nhớ đặt tên class một cách rõ ràng và dễ hiểu để dễ dàng sử dụng sau này.

Sử dụng Custom Styles trong Visual Editor

Sau khi đã thêm custom styles và liên kết file CSS với Visual Editor, bạn có thể bắt đầu sử dụng chúng. Cách sử dụng tùy thuộc vào loại trình soạn thảo bạn đang sử dụng (Classic Editor hoặc Gutenberg).

Sử dụng trong Classic Editor

Trong Classic Editor, bạn cần thêm một nút vào thanh công cụ cho phép bạn chọn các custom styles. Plugin TinyMCE Advanced có thể giúp bạn thực hiện việc này.

1. Trong trang cài đặt của TinyMCE Advanced, kéo nút “Styles” (hoặc “Formats”) vào thanh công cụ.
2. Lưu các thay đổi.
3. Khi chỉnh sửa bài viết hoặc trang, bạn sẽ thấy một nút mới trên thanh công cụ cho phép bạn chọn các custom styles mà bạn đã định nghĩa trong file CSS.
4. Chọn đoạn văn bản hoặc phần tử mà bạn muốn áp dụng style, sau đó chọn style từ menu.

Sử dụng trong Gutenberg (Block Editor)

Trong Gutenberg, bạn có thể sử dụng các Block có sẵn hoặc tạo custom Block để áp dụng custom styles.

Sử dụng Block có sẵn:

1. Chọn Block mà bạn muốn áp dụng style.
2. Trong bảng điều khiển bên phải, tìm mục “Advanced” (Nâng cao).
3. Trong mục “Additional CSS Class(es)” (Lớp CSS bổ sung), nhập tên class của custom style mà bạn muốn áp dụng. Ví dụ: `custom-heading`.
4. Gutenberg sẽ tự động áp dụng style từ file CSS vào Block đó.

Tạo Custom Block:

Nếu bạn muốn tạo một Block đặc biệt với custom styles, bạn có thể sử dụng các plugin như Advanced Custom Fields (ACF) hoặc Gutenberg Blocks Plugin để tạo custom Block. Việc này đòi hỏi kiến thức về code JavaScript và React.

Lời khuyên và Lưu ý quan trọng

• Luôn sử dụng Child Theme để tránh mất các thay đổi khi theme được cập nhật.
• Sao lưu file `functions.php` trước khi chỉnh sửa.
• Sử dụng các tên class rõ ràng và dễ hiểu.
• Kiểm tra kỹ các styles trên nhiều trình duyệt và thiết bị khác nhau để đảm bảo tính nhất quán.
• Nếu bạn gặp khó khăn, hãy tham khảo tài liệu của plugin hoặc tìm kiếm sự giúp đỡ từ cộng đồng WordPress.

Kết luận

Thêm custom styles vào Visual Editor của WordPress là một cách tuyệt vời để tạo ra những trang web độc đáo và chuyên nghiệp hơn. 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 tùy chỉnh Visual Editor và tạo ra những trải nghiệm người dùng tốt hơn.