Bỏ qua đến nội dung chính

Làm thế nào để thêm một phong cách trực quan cho các biên tập viên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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.

stylesinwpeditor

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 cơ bản. Tuy nhiên, đôi khi bạn sẽ cần phải có các kiểu tùy chỉnh cho phép bạn, ví dụ, để thêm các nút CSS, khối nội dung, móc nối, 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 trên toàn bộ trang web của mình.

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.

Control-of-plugin-TinyMCE

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 phong cách của chủ đề hoặc chủ đề con của bạn hoặc bạn có thể chọn một vị trí tùy chỉnh.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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.

cai-of-style-css

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.

phong cách tùy chỉnh-biên tập-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.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

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 tự thêm mã vào các tệp WordPress của mình. Nếu đây là lần đầu tiên bạn làm điều đó, thì 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à 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ó; }

tổng quan-of-nút-TinyMCE-thêm-of-style-cá nhân hoá

Biểu đị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 của bạn trong Trình chỉnh sửa trực quan. Xem tài liệu để biết cách tìm vị trí của tệp này.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
7 cổ phiếu
cổ phiếu6
tweet
Enregistrer1