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 các 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 lớp hoặc kiểu 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 có thể tùy chỉnh, nê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 các 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 ghi nhớ tất cả các lớp CSS có trong bài đăng của mình để làm cho chúng trông đẹp hơn.
Có một số cách để bạn có thể thêm các tùy chọn kiểu tùy chỉnh vào trình chỉnh sửa bài đăng của WordPress. Cách đầu tiên là sử dụng plugin miễn phí và cách 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 phương pháp mà 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, phần 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 các 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 một plugin có tên là TinyMCE Custom Styles.
Điều tốt về plugin này là nó tự động tạo một biểu định kiểu của trình chỉnh sửa 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 liên quan đến 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, hãy 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. Ngay lập tức, 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 của trình chỉnh sửa. 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 một 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 vì tôi đang sử dụng 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ờ, hãy nhập tên của kiểu, chọn kiểu (tức là nội dòng, khối hoặc bộ chọn), nhập giá trị kiểu, sau đó nhập lớp CSS.
4. Ở phía ngoài cùng bên phải, đừng quên chọn phần tử có phải 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ử cấp khối đã chọn trong trình chỉnh sửa bài đăng.
5. Nếu muốn, bạn thậm chí có thể thêm trực tiếp các kiểu 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 đó vào 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 giống như tôi ở bước thứ hai). Nó giúp bạn dễ dàng quản lý.
6. Khi bạn đã hoàn tất, hãy 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ó tên là “Định dạng” trong trình chỉnh sửa bài đăng. Trong menu 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 vào cùng với các tùy chọn được định cấu hình trước khác. Để sử dụng kiểu, chỉ cần nhấp vào kiểu đó 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, những 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 của 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.
2. Phương pháp thủ công
Nếu bạn không thích sử dụng một plugin, thì bạn có thể đạt được điều tương tự bằng cách thêm một đoạn mã đơn giản vào tệp “functions.php” của mình. Điều này có hai phần:một là để thêm nút vào thanh công cụ để chèn mã CSS và thứ hai là làm cho kiểu CSS tồn tại 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ự do chính WordPress cung cấp.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
// 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
array(
'title' => '.translation',
'block' => 'blockquote',
'classes' => 'translation',
'wrapper' => true,
),
array(
'title' => '⇠.rtl',
'block' => 'blockquote',
'classes' => 'rtl',
'wrapper' => true,
),
array(
'title' => '.ltr⇢',
'block' => 'blockquote',
'classes' => 'ltr',
'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ạn cần tùy chỉnh mã để phản ánh các tùy chọn phong cách của mình. 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 đề kiểu của bạn bên cạnh “tiêu đề”, loại khối bên cạnh “khối”, 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 “false”.
Bất cứ khi 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 mảng đầu tiên để phản ánh tùy chọn “Nút màu xanh lam” của tôi.
Khi bạn đã hoàn tất việc tùy chỉnh, hãy lưu và tải tệp “functions.php” đã sửa đổi lên máy chủ của bạn.
Tạo biểu định kiểu của trình soạn thảo
Tạo một tệp với 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 xem 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.
//Add custom editor stylesheet
function mte_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'mte_add_editor_styles' ); Tải cả tệp “editor-style.css” và “functions.php” lên máy chủ của bạn. Đó là tất cả những gì phải 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ể xem các kiểu được áp dụng trong thời gian thực.
Bình luận 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 các tùy chọn kiểu tùy chỉnh trong trình chỉnh sửa bài đăng WordPress.