Bạn có muốn thêm các kiểu tùy chỉnh trên trình chỉnh sửa trực quan WordPress không? Thêm kiểu tùy chỉnh cho phép bạn nhanh chóng áp dụng định dạng mà không cần đến trình soạn thảo văn bản. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm các kiểu tùy chỉnh vào trình chỉnh sửa trực quan WordPress.
Remarque: Hướng dẫn này đòi hỏi kiến thức cơ bản về CSS.
Khi sẽ bạn cần thêm kiểu tùy chỉnh trên WordPress Visual Editor?
Theo mặc định, trình chỉnh sửa trực quan của WordPress cung cấp các tùy chọn định dạng và kiểu dáng cơ bản. Tuy nhiên, đôi khi bạn sẽ cần có sẵn các kiểu tùy chỉnh để cho phép bạn, chẳng hạn như thêm các nút CSS, nội dung, móc, v.v.
Bạn luôn có thể chuyển từ trình soạn thảo trực quan sang trình soạn thảo văn bản và thêm 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 hơn nên thêm chúng vào trình chỉnh sửa trực quan để 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 rất nhiều thời gian và cũng cho phép bạn luôn sử dụng cùng một kiểu ở mọi nơi trên Website.
Quan trọng hơn, bạn có thể dễ dàng chỉnh sửa hoặc cập nhật các kiểu mà không cần phải chỉnh sửa các bài viết trên trang web của bạn.
Bây giờ chúng tôi sẽ khám phá cách làm điều này trên WordPress.
Phương pháp 1: Thêm một kiểu tùy chỉnh với một plugin
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin " Các kiểu tùy chỉnh TinyMCE ". Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt Plugin WordPress.
Sau khi kích hoạt, bạn phải truy cập " Cài đặt> Cài đặt »Kiểu tùy chỉnh TinyMCE Để cấu hình các cài đặt plugin.
Plugin cho phép bạn chọn vị trí của các tệp biểu định kiểu. Nó có thể sử dụng chủ đề của bạn hoặc phong cách chủ đề con hoặc bạn có thể chọn một vị trí tùy chỉnh.
Sau đó, bạn phải bấm vào nút " lưu tất cả các cài đặt Để lưu trữ các thiết lập 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 cuộn đến phần kiểu và bấm vào nút Thêm phong cách mới '.
Đầu tiên bạn phải nhập tiêu đề cho phong cách. Tiêu đề này sẽ được hiển thị trong menu thả xuống. Sau đó, bạn cần phải xác định. Cho dù đó là một hàng, một khối hay một phần tử lựa chọn.
Sau đó, thêm một lớp CSS và sau đó thêm các quy tắc CSS của bạn như được hiển thị trong ảnh chụp màn hình bên dưới.
Khi bạn đã thêm kiểu 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ây giờ bạn có thể chỉnh sửa một bài viết hiện có hoặc tạo một bài viết mới. Bạn sẽ thấy một định dạng trong menu thả xuống, ở hàng thứ hai của trình soạn thảo trực quan WordPress.
Chỉ cần chọn một văn bản trong trình chỉnh sửa, sau đó chọn kiểu tùy chỉnh của bạn từ menu thả xuống để áp dụng.
Bây giờ bạn có thể xem trước bài viết của mình để xem các kiểu tùy chỉnh của bạn có áp dụng chính xác không.
Phương pháp 2: Thêm kiểu thủ công vào Trình soạn thảo trực quan
Phương pháp này yêu cầu bạn thêm mã vào các tệp WordPress của mình theo cách thủ công. Nếu đây là lần đầu tiên bạn làm điều này, hãy xem hướng dẫn của chúng tôi về cách thêm Plugin WordPress.
Bước 1: Thêm một kiểu tùy chỉnh từ menu thả xuống của WordPress Visual Editor.
Đầu tiên, chúng tôi sẽ thêm một menu thả xuống trên trình chỉnh sửa trực quan của WordPress. Sau đó, menu thả xuống này sẽ cho phép chúng tôi chọn và áp dụng các kiểu tùy chỉnh của mình.
Bạn phải thêm mã sau vào tệp tin functions.php hoặc plugin của mình.
function wpb_mce_buttons_2 ($ button) {array_unshift ($ button, 'styleselect'); trở lại các nút $; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Bước 2: Cách thêm tùy chọn trong menu thả xuống
Bây giờ bạn sẽ cần thêm một số tùy chọn vào menu thả xuống mà bạn vừa tạo. Sau đó, bạn sẽ có thể chọn và áp dụng các tùy chọn này từ các định dạng trong menu thả xuống.
Đối với hướng dẫn này, chúng tôi sẽ thêm ba kiểu tùy chỉnh để tạo nội dung khối và các nút.
Bạn sẽ cần thêm mã sau vào tệp "functions.php" của functions.php hoặc một plugin cụ thể.
/ * * Hàm gọi lại để lọc cài đặt MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Định nghĩa mảng style_formats $ style_formats = array (/ * * Mỗi mảng con là một định dạng với cài đặt riêng * Chú ý rằng mỗi mảng có tiêu đề , các đối số khối, các lớp và trình bao bọc * Tiêu đề là nhãn sẽ hiển thị trong menu Định dạng * Khối xác định xem nó là kiểu span, div, bộ chọn hay nội tuyến * Các lớp cho phép bạn xác định các lớp CSS * Trình bao bọc có hay không thêm một phần tử cấp khối mới xung quanh bất kỳ phần tử nào đã chọn * / array ('title' => 'Content Block', 'block' => 'span', 'class' => 'content-block', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'class' => 'blue-button', 'wrapper' => true,), array ('title' => 'Red Button', 'block' => 'span', 'class' => 'red-button', 'wrapper' => true,),); // Chèn mảng, JSON ENCODED, vào 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); trả về $ init_array; } // Đính kèm lệnh 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 trên WordPress và nhấp vào các định dạng từ trình đơn thả xuống của 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 hiện đã được hiển thị.
Tuy nhiên, lựa chọn của họ sẽ không tạo ra bất kỳ sự khác biệt nào trên trình chỉnh sửa trực quan của WordPress.
Bước 3: Thêm một kiểu CSS
Bây giờ bước cuối cùng là thêm quy tắc kiểu CSS cho kiểu tùy chỉnh của bạn.
Bạn sẽ cần thêm CSS này trong tệp style.css của chủ đề của bạn hoặc của chủ đề con.
.content-block {border: 1px solid #eee; đệm: 3px; nền: #ccc; chiều rộng tối đa: 250px; float: phải; text-align: center; } .content-block: sau {clear: cả hai; } .blue-button {background-color: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; bán kính đường viền: 6px; viền: 1px solid # 057fd0; display: inline-block; con trỏ: trỏ; màu: #ffffff; đệm: 6px 24px; văn bản-trang trí: không có; } .red-button {background-color: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; bán kính đường viền: 6px; viền: 1px solid # 942911; display: inline-block; con trỏ: trỏ; màu: #ffffff; đệm: 6px 24px; văn bản-trang trí: không có; }
Bảng định kiểu của trình soạn thảo kiểm soát sự xuất hiện của nội dung trong trình soạn thảo trực quan. Kiểm tra tài liệu để biết cách tìm vị trí của tệp này.
Nếu chủ đề của bạn không có tệp biểu định kiểu, thì bạn luôn có thể tạo một tệp. Chỉ cần tạo một tệp CSS mới và đặt tên cho nó " Custom-biên tập style.css '.
Bạn cần tải tệp này lên thư mục gốc của chủ đề, sau đó thêm mã này vào tệp "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 vừa thêm các kiểu tùy chỉnh của mình trong trình chỉnh sửa trực quan WordPress. Bây giờ bạn có thể thực hiện các tùy chỉnh mà bạn cho là đúng.
Hãy chia sẻ hướng dẫn này với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.
