Khi chúng tôi tạo hoặc chỉnh sửa bài đăng trong WordPress, chúng tôi có hai trình chỉnh sửa nội dung để chọn. trình soạn thảo trực quan TinyMCE và trình soạn thảo văn bản WordPress. Cái sau bao gồm một phần tử vùng văn bản được tăng cường bởi các nút cung cấp một cách nhanh chóng để đưa mã HTML vào nội dung bài đăng
Người dùng có thể dễ dàng chuyển từ chế độ hình ảnh sang văn bản bằng cách nhấp vào nhãn phía trên bên phải. WordPress sẽ giữ nguyên nội dung bài đăng, nhưng TinyMCE sẽ chuyển đổi các ký tự đặc biệt thành các thực thể HTML tương ứng. Vì lý do này, bạn có thể thích
đề nghị đọc
Đi sâu vào Trình chỉnh sửa Gutenberg WordPress mới [Ưu và nhược điểm]
Có gì mới trong WordPress 5. 0 [Cách chuẩn bị cho Gutenberg]
Trình soạn thảo văn bản hiển thị chính xác cấu trúc HTML của nội dung bài đăng và nó cấp quyền kiểm soát hoàn toàn đối với đầu vào của người dùng, vì vậy bài đăng này là tất cả về trình soạn thảo văn bản WordPress. Đầu tiên, chúng ta sẽ đi sâu vào chủ đề từ góc độ nhà phát triển. chúng ta sẽ xem xét API Quicktags JS, bộ lọc quicktags_settings và hàm wp_editor[]
Phần cuối cùng của bài đăng này dành riêng cho những người không phải là nhà phát triển. Tôi sẽ giới thiệu cho bạn một plugin cho phép người dùng định cấu hình trình soạn thảo văn bản từ bảng quản trị WordPress một cách nhanh chóng
Trình soạn thảo văn bản WordPress
Nếu bạn đã quen với việc thêm nhiều mã vào bài đăng của mình hoặc bạn muốn xem trước cấu trúc HTML chính xác của nội dung của mình, thì bạn có thể thích trình soạn thảo văn bản barebones hơn là trình soạn thảo trực quan nâng cao dễ sử dụng
Xem kế hoạchCần phải hét lên ở đây. Kinsta thật tuyệt vời, tôi sử dụng nó cho trang web cá nhân của mình. Hỗ trợ nhanh chóng và xuất sắc, và máy chủ của họ là nhanh nhất cho WordPress
Phillip Stemann
Tuy nhiên, trình soạn thảo văn bản không chỉ là một phần tử biểu mẫu. Thanh công cụ của trình soạn thảo cung cấp một tập hợp các nút [được gọi là thẻ nhanh] cho phép người dùng nhanh chóng đưa một số lượng lớn các thẻ vào cấu trúc bài viết HTML
Theo mặc định, WordPress cung cấp các thẻ nhanh sau
- a
- mạnh
- mã số
- xóa
- em
- ol
- u
- li
- hình ảnh
- trích dẫn khối
- bên trong
- toàn màn hình
- tra cứu
- đóng lại
Cài đặt mặc định có thể bị ghi đè nhờ Quicktags API. API JavaScript cung cấp một cách dễ dàng để thêm các nút tùy chỉnh cũng như đưa mã và nội dung vào vùng văn bản của trình chỉnh sửa.
Các QTag. Phương thức addButton thêm một nút vào thanh công cụ và được định nghĩa như sau.
QTags.addButton[
id,
display,
arg1,
arg2,
access_key,
title,
priority,
instance ];
Phương pháp này giữ các tham số sau
- id [chuỗi] [bắt buộc] là id HTML cho nút;
- hiển thị [chuỗi] [bắt buộc] là giá trị HTML;
- arg1 [chuỗi] [bắt buộc] là thẻ mở được bao gồm hoặc chức năng gọi lại tùy chỉnh sẽ được chạy khi nhấp vào nút;
- arg2[string] [tùy chọn] là thẻ đóng;
- access_key [chuỗi] [tùy chọn] là phím tắt cho nút;
- tiêu đề [chuỗi] [tùy chọn] là tiêu đề HTML;
- priority[int] [tùy chọn] là số thể hiện vị trí của nút trên thanh công cụ;
- phiên bản [chuỗi] [tùy chọn] giới hạn nút ở một phiên bản cụ thể của Quicktags
Bây giờ, giả sử chúng ta muốn thêm các thẻ theo yêu cầu của công cụ đánh dấu cú pháp như Prism và chúng ta muốn cung cấp cho thanh công cụ trình chỉnh sửa các nút in đánh dấu sau
Để hoàn thành nhiệm vụ này, chúng ta cần thêm đoạn mã sau vào tệp chính của plugin
function my_quicktags[] {
if [ wp_script_is[ 'quicktags' ] ] {
?>
QTags.addButton[ 'eg_php', 'PHP', '', '
', 'p', 'PHP Code', 100 ];
QTags.addButton[ 'eg_css', 'CSS', '', '
', 'q', 'CSS Code', 100 ];
QTags.addButton[ 'eg_html', 'HTML', '', '
', 'r', 'HTML Code', 100 ];
QTags.addButton[ 'eg_callback', 'CSS div', css_callback ];
function css_callback[]{
var css_class = prompt[ 'Class name:', '' ];
if [ css_class && css_class !== '' ] {
QTags.insertContent[''];
}
}