Bạn có muốn thêm phong cách tùy chỉnh trong trình chỉnh sửa hình ảnh WordPress? Thêm phong cách 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 phong cách tùy chỉnh vào trình soạn thảo hình ảnh WordPress.
Chú thích: 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 phong cách. Tuy nhiên, đôi khi bạn có thể cần phong cách 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 phong cách trên trang web của bạn.
Quan trọng nhất, bạn có thể dễ dàng tinh chỉnh hoặc cập nhật các phong cách 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 phong cách 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
Khi kích hoạt, bạn cần truy cập Cài đặt »Các kiểu Tuỳ chỉnh của TinyMCE để đị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ụng bả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 phong cách 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 phong cách. 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 phong cách 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ạn hiện có thể chỉnh sửa bài đăng hiện tại 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 phong cách 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 phong cách 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
Bước 1: Thêm một menu thả xuống phong cách 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 phong cách 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ột plugin cụ thể cho trang web.
chức năng wpb_mce_buttons_2 ($ nút) {
array_unshift ($ buttons, 'styleselect');
trở lại $ nút;
}
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.
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.
/ *
Chức năng gọi lại để lọc các thiết lập MCE
* /
hàm my_mce_before_init_insert_formats ($ init_array) {
/ / Định nghĩa mảng styles_formats
$ style_formats = mảng (
/ *
* Mỗi mảng con là một định dạng với các thiết lập của riêng
* Lưu ý rằng mỗi mảng có tiêu đề, khối, các lớp và các đối số wrapper
* Tiêu đề là nhãn sẽ hiển thị trong trình đơn Định dạng
* Chặn xác định xem nó là một span, div, selector, hoặc phong cách nội tuyến
* Lớp học cho phép bạn xác định lớp CSS
* Bao bì có hoặc không để thêm một yếu tố cấp độ khối mới xung quanh bất kỳ yếu tố được chọn
* /
mảng(
'title' => 'Content Block',
'block' => 'span',
'classes' => 'khối nội dung',
'wrapper' => đúng,
),
mảng(
'title' => 'Blue Button',
'block' => 'span',
'classes' => 'blue-button',
'wrapper' => đúng,
),
mảng(
'title' => 'Nút Đỏ',
'block' => 'span',
'classes' => 'nút màu đỏ',
'wrapper' => đúng,
),
);
// 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 vào '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 lựa chọn chúng không làm cho bất kỳ sự khác biệt trong biên tập bài viết 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 phong cách 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.
.content-block {
biên giới: 1px rắn #eee;
padding: 3px;
nền: #ccc;
chiều rộng tối đa: 250px;
float: phải;
text-align: trung tâm;
}
.content-block: sau khi {
rõ ràng: cả hai;
}
.blue-button {
màu nền: # 33bdef;
-moz-border-bán kính: 6px;
-bộ phận mạng-biên giới bán kính: 6px;
bán kính biên giới: 6px;
biên giới: 1px rắn # 057fd0;
hiển thị: inline-block;
con trỏ: con trỏ;
màu sắc: #ffffff;
đệm: 6px 24px;
văn bản-trang trí: không có;
}
.red-button {
màu nền: # bc3315;
-moz-border-bán kính: 6px;
-bộ phận mạng-biên giới bán kính: 6px;
bán kính biên giới: 6px;
biên giới: 1px solid # 942911;
hiển thị: inline-block;
con trỏ: con trỏ;
màu sắc: #ffffff;
đệm: 6px 24px;
văn bản-trang trí: không có;
}
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ủ đề.
hàm 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à phong cách.