Trình chỉnh sửa bài đăng trong WordPress, như tên gọi của nó, có nghĩa là cho phép bạn chỉnh sửa bài đăng và nội dung. Theo mặc định, nó không cho phép bạn thêm vào các lớp CSS tùy chỉnh. Nếu bạn muốn thêm các kiểu hoặc lớp CSS tùy chỉnh, cách duy nhất là chuyển sang chế độ "Văn bản" và thêm nó vào mã HTML.

Vì WordPress rất tùy biến, có nhiều cách để làm cho cuộc sống của bạn dễ dàng hơn bằng cách thêm tùy chọn kiểu tùy chỉnh vào trình chỉnh sửa bài đăng WordPress. Sử dụng các tùy chọn tùy chỉnh này, bạn có thể áp dụng các kiểu CSS chỉ với một vài cú nhấp chuột. Bạn không còn phải chuyển sang chế độ văn bản hoặc nhớ tất cả các lớp CSS đi vào bài viết của bạn để làm cho chúng trông đẹp hơn.

Có một vài cách bạn có thể thêm tùy chọn kiểu tùy chỉnh vào trình chỉnh sửa bài đăng WordPress. Đầu tiên là sử dụng plugin miễn phí và thứ hai là thêm đoạn mã. Cả hai phương pháp đều hoạt động rất giống nhau, vì vậy hãy làm theo cách bạn cảm thấy thoải mái.

Lưu ý : trước khi tiếp tục, tôi giả sử rằng bạn biết HTML và CSS cơ bản và có thể hiểu những thứ như lớp CSS, yếu tố cấp khối, phần tử HTML, thuộc tính, v.v.

1. Sử dụng một Plugin

Cách dễ nhất để thêm tùy chọn kiểu tùy chỉnh trong trình chỉnh sửa bài đăng WordPress là sử dụng plugin có tên là Kiểu tùy chỉnh TinyMCE.

Điều tốt về plugin này là nó sẽ tự động tạo một bảng định kiểu trình soạn thảo nơi bạn có thể thêm các kiểu CSS tùy chỉnh. Điều này rất hữu ích khi bạn muốn xem các kiểu giao diện người dùng có liên quan đến các liên kết, hình ảnh, biểu mẫu, nút, v.v., được áp dụng bên trong trình chỉnh sửa bài đăng.

1. Để bắt đầu, tải xuống, cài đặt và kích hoạt TinyMCE Custom Styles giống như bất kỳ plugin WordPress nào khác. Sau khi kích hoạt, hãy truy cập trang cài đặt plugin bằng cách điều hướng đến “Cài đặt -> Kiểu tùy chỉnh TinyMCE”.

2. Phải tắt dơi, plugin sẽ hiển thị thông báo lỗi yêu cầu chọn nơi bạn muốn đặt tệp biểu định kiểu trình soạn thảo. Tùy thuộc vào chủ đề của bạn, bạn có thể chọn giữa ba tùy chọn. Đọc kỹ các tùy chọn đó và chọn tùy chọn phù hợp với bạn. Trong trường hợp của tôi, tôi đã chọn tùy chọn thứ hai bởi vì tôi đang sử dụng một chủ đề con Genesis tùy chỉnh. Nhấp vào nút "Lưu tất cả cài đặt" để lưu các thay đổi.

3. Cuộn xuống và nhấp vào nút “Thêm kiểu mới”. Bây giờ, nhập tên của phong cách, chọn một loại (tức là, nội tuyến, khối hoặc bộ chọn), nhập giá trị kiểu, và sau đó là lớp CSS.

4. Ở phía trên cùng bên phải, đừng quên chọn nếu phần tử là “Wrapper” hay không. Nếu bạn chọn tùy chọn này, kiểu sẽ tạo một phần tử cấp khối mới xung quanh phần tử mức khối đã chọn trong trình chỉnh sửa bài đăng.

5. Nếu bạn muốn bạn thậm chí có thể trực tiếp thêm phong cách CSS tùy chỉnh bằng cách nhấp vào "Thêm kiểu mới" xuất hiện trong danh mục "Kiểu CSS". Tuy nhiên, tôi khuyên bạn nên thêm các kiểu đó trong tệp “editor-style.css” nằm trong thư mục chủ đề của bạn (nếu bạn đã chọn tùy chọn thứ hai như tôi trong bước thứ hai). Nó giúp bạn dễ dàng quản lý.

6. Khi bạn đã hoàn tất, nhấp vào nút "Lưu tất cả cài đặt" xuất hiện ở cuối trang.

7. Đó là nó. Từ bây giờ bạn sẽ thấy một menu thả xuống mới được gọi là "Định dạng" trong trình chỉnh sửa bài đăng. Trong trình đơn thả xuống đó, bạn có thể tìm thấy tùy chọn kiểu tùy chỉnh mới được thêm cùng với các tùy chọn được định cấu hình trước khác. Để sử dụng phong cách, chỉ cần nhấp vào nó và mã CSS cần thiết sẽ tự động được thêm vào trình chỉnh sửa bài đăng. Bạn thấy mã đó ở chế độ văn bản.

8. Nếu bạn đã thêm các kiểu bắt buộc vào tệp editor-style.css, các kiểu đó sẽ được phản ánh trong trình chỉnh sửa bài đăng khi bạn sử dụng tùy chọn kiểu từ trình đơn thả xuống.

Trong tương lai nếu bạn tắt hoặc xóa plugin, biểu định kiểu trình chỉnh sửa sẽ không bị xóa. Tuy nhiên, bạn không còn có thể truy cập các tùy chọn tùy chỉnh trong trình chỉnh sửa bài đăng.

Liên quan : Làm thế nào để xóa bảng cơ sở dữ liệu không sử dụng trong WordPress

2. Phương pháp thủ công

Nếu bạn không thích sử dụng plugin, bạn có thể đạt được điều tương tự bằng cách thêm đoạn mã đơn giản vào tệp “functions.php” của mình. Có hai phần trong phần này: một là để thêm nút vào thanh công cụ để chèn mã CSS và thứ hai là tạo kiểu CSS trực tiếp trong trình chỉnh sửa bài đăng.

Thêm các nút kiểu CSS tùy chỉnh vào Thanh công cụ

Thêm phần sau vào cuối tệp "functions.php" của bạn. Mã này thực sự được cung cấp bởi chính WordPress.

 // Chức năng gọi lại để chèn 'styleselect' vào chức năng mảng $ nút my_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); trả về các nút $; } // Đăng ký gọi lại của chúng tôi tới bộ lọc thích hợp add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // Chức năng gọi lại để lọc các thiết lập MCE function my_mce_before_init_insert_formats ($ init_array) {// Xác định mảng style_formats $ style_formats = array (// Mỗi mảng con là một định dạng với mảng thiết lập riêng của nó ('title' => '.translation', 'block' => 'blockquote', 'classes' => 'translation', 'wrapper' => true, ), mảng ('title' => '⇠.rtl', 'block' => 'blockquote', 'classes' => 'rtl', 'wrapper' => true, ), mảng ('title' => '.ltr⇢', 'block' => 'blockquote', 'classes' => 'ltr', ' wrapper '=> true, ), ); // Chèn mảng, JSON ENCODED, vào 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Đính kèm gọi lại đến 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Bạn cần phải tùy chỉnh mã để phản ánh các tùy chọn kiểu của bạn. Trong đoạn mã trên, mỗi mảng là một tùy chọn kiểu riêng biệt. Nhập tiêu đề phong cách của bạn bên cạnh “tiêu đề”, loại chặn bên cạnh “chặn”, lớp CSS bên cạnh “lớp” và nếu phần tử là trình bao bọc, hãy nhập “true” bên cạnh “trình bao bọc”. Nếu không, hãy nhập "sai."

Bất cứ lúc nào bạn muốn thêm một tùy chọn kiểu mới, chỉ cần sao chép mảng và sửa đổi các trường. Trong trường hợp của tôi, tôi đã điền vào mảng đầu tiên để phản ánh tùy chọn “Nút xanh” của tôi.

Khi bạn đã hoàn tất việc tùy chỉnh, hãy lưu và tải lên tệp “functions.php” đã sửa đổi vào máy chủ của bạn.

Tạo Biểu định kiểu Editor

Tạo một tệp có tên “editor-style.css.” Bây giờ, hãy thêm các kiểu CSS có liên quan mà bạn muốn thấy trong trình chỉnh sửa bài đăng. Đừng quên rằng các lớp CSS bạn đang tạo trong tệp “editor-style.css” phải khớp với các lớp CSS trong mã tùy chọn kiểu ở trên.

Bây giờ, hãy mở tệp "functions.php" của chủ đề và thêm mã sau đây.

 // Thêm chức năng biểu định kiểu trình soạn thảo tùy chỉnh mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles');

Tải lên cả tệp “editor-style.css” và “functions.php” vào máy chủ của bạn. Đó là tất cả những gì cần làm. Từ bây giờ, bạn có thể sử dụng các tùy chọn kiểu tùy chỉnh từ trình chỉnh sửa bài đăng WordPress.

Bạn có thể thấy các kiểu được áp dụng trong thời gian thực.

Nhận xét bên dưới chia sẻ suy nghĩ và kinh nghiệm của bạn về việc sử dụng các phương pháp trên để thêm tùy chọn kiểu tùy chỉnh trong trình chỉnh sửa bài đăng WordPress.