Trình soạn thảo văn bản trong wordpress ở đâu?

Jodi đã phát triển một số khóa học thiết kế web bao gồm Khóa học dành cho người mới bắt đầu về WordPress và Xây dựng trang web WordPress của riêng bạn dành cho doanh nghiệp nhỏ và khóa đào tạo SEO được cá nhân hóa dành riêng cho doanh nghiệp nhỏ. Các khóa học này sẽ dạy bạn cách cập nhật và quản lý trang web của bạn liên tục. Cung cấp cho chủ sở hữu trang web nhiều quyền kiểm soát hơn đối với trang web của họ, do đó giúp giảm chi phí. Và cách xếp hạng tốt trên Google cho các từ khóa bạn đã chọn

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 trong wordpress ở đâu?
Trình chỉnh sửa hình ảnh và văn bản được so sánh

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

Cầ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

Trình soạn thảo văn bản trong wordpress ở đâu?
Phillip Stemann
Xem kế hoạch

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
Trình soạn thảo văn bản trong wordpress ở đâu?
Hình ảnh hiển thị các nút mặc định của trình soạn thảo văn bản WordPress

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' ) ) {
	?>
	
	

admin_print_footer_scripts là một hook hành động được sử dụng để in các tập lệnh ở chân trang của trang quản trị. Hàm gọi lại kiểm tra xem tập lệnh quicktags có đang được sử dụng hay không, sau đó in mã JS.
Tập lệnh này thêm ba nút khác vào bất kỳ phiên bản nào của Quicktags trong bảng quản trị, như minh họa trong hình bên dưới.

Trình soạn thảo văn bản trong wordpress ở đâu?
Hình ảnh hiển thị các nút tùy chỉnh mới của chúng tôi

Việc thêm các nút vào thanh công cụ của trình soạn thảo tương đối đơn giản nhưng chúng ta có thể làm được nhiều hơn thế với API Quicktags. Ví dụ: chúng ta có thể chuyển QTags. phương thức addButton một chức năng gọi lại để chạy khi người dùng nhấp vào nút tương ứng. Hãy xem xét đoạn mã sau

function custom_quicktags() {

	if ( wp_script_is( 'quicktags' ) ) {
	?>
	
	

css_callback là một chức năng JS tùy chỉnh để chạy khi người dùng nhấp vào nút tùy chỉnh. Trong ví dụ của chúng tôi, hàm nhắc một hộp nhập liệu để cho phép người dùng đặt tên lớp cho phần tử div.
Các QTag. phương thức insertContent sẽ in chuỗi đã chỉ định vào vùng văn bản của trình soạn thảo.

Trình soạn thảo văn bản trong wordpress ở đâu?
Hàm gọi lại trong ví dụ của chúng tôi sẽ nhắc hộp nhập liệu cho phép người dùng đặt tên lớp

Cho đến nay, chúng tôi đã thêm thẻ nhanh vào trình chỉnh sửa WordPress trong trang quản trị nhờ hành động admin_print_footer_scripts. Nếu bạn có bất kỳ phiên bản trình chỉnh sửa nào trong giao diện người dùng của trang web, thay vào đó, bạn nên nối chức năng gọi lại với hành động wp_print_footer_scripts

Dù sao, trong quá trình sản xuất, bạn nên xem xét việc đưa các tệp JavaScript của mình vào các tập lệnh đã đăng ký của WordPress, như được giải thích trong Cách liệt kê nội dung của bạn trong WordPress. Một công cụ hữu ích để tạo thẻ nhanh tùy chỉnh là Trình tạo thẻ nhanh của GenerateWP

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Ghi đè cài đặt thẻ nhanh

API Quicktags cung cấp một phương pháp để thêm các nút mới vào thanh công cụ. WordPress cũng cho phép chúng tôi xóa các nút nhờ bộ lọc quicktags_settings

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

Hàm gọi lại giữ hai đối số. $qtInit là một mảng cài đặt và $editor_id là ID duy nhất của trình chỉnh sửa. Trong ví dụ của chúng tôi, $editor_id mặc định là ‘nội dung’ — ID của vùng văn bản của trình soạn thảo trong việc chỉnh sửa các trang bài đăng

Lưu ý rằng các tên thẻ trong danh sách thẻ nhanh được phân tách bằng dấu phẩy không theo sau bởi khoảng trống

Chức năng này sẽ ghi đè cài đặt mặc định và cũng có thể được sử dụng để xóa tất cả các nút khỏi thanh công cụ

function my_quicktags( $qtInit, $editor_id = 'content' ) {
	$qtInit['buttons'] = ',';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

Chúng tôi đã chỉ định dấu phẩy làm giá trị cho phần tử 'nút' của mảng $qtInit. Chuỗi rỗng sẽ không hoạt động như mong đợi và cài đặt mặc định sẽ không bị ghi đè

Bao gồm Trình chỉnh sửa WordPress vào Trang trước

Có sẵn từ phiên bản 3. 3, chức năng wp_editor cung cấp một cách dễ dàng để bao gồm các trình chỉnh sửa WordPress ở bất kỳ đâu trên trang web

Hàm được xác định trong wp-gộp/chung-mẫu. tập tin php như sau

wp_editor( $content, $editor_id, $settings = array() );
  • $content (string) (bắt buộc) đặt nội dung ban đầu của trình chỉnh sửa;
  • $editor_id (string) (bắt buộc) đặt thuộc tính id cho vùng văn bản và trình soạn thảo TinyMCE (chỉ có thể chứa các chữ cái viết thường và dấu gạch dưới);
  • $settings (mảng) (tùy chọn) một mảng đối số

Mảng đối số cho phép thiết lập rất nhiều thông số cấu hình cho cả 2 trình soạn thảo. Một đối số cụ thể có thể chuyển cài đặt trực tiếp tới Quicktags (xem danh sách đầy đủ các đối số trong Codex)

Đấu tranh với thời gian chết và các vấn đề về WordPress? . Kiểm tra các tính năng của chúng tôi

Ví dụ: bạn có thể muốn đưa trình chỉnh sửa vào mẫu trang. Xem xét ví dụ sau

$content = '';
	$editor_id = 'mycustomeditor';
	$settings = array( 
		'wpautop' => false, 
		'media_buttons' => false, 
		'quicktags' => array(
				'buttons' => 'strong,em,del,ul,ol,li,block,close'
			),
	);
wp_editor( $content, $editor_id, $settings );

Một vài dòng mã này in một trình chỉnh sửa trống có id là 'myeditor' và các nút được chỉ định vào thanh công cụ của trình soạn thảo văn bản

  • Đối số wpautop được đặt thành false để các phần tử

    sẽ được sử dụng để bọc các đoạn văn vào trình chỉnh sửa

  • Đối số media_buttons được đặt thành false để người dùng không thể tải tệp phương tiện lên
  • Mảng thẻ nhanh xác định các nút sẽ hiển thị trên thanh công cụ soạn thảo văn bản

Đối với trình soạn thảo văn bản WordPress, sự khác biệt chính giữa hàm wp_editor() và bộ lọc quicktags_settings là hàm này áp dụng cho một phiên bản cụ thể của trình soạn thảo. Bạn có thể sử dụng nó để bao gồm các trình chỉnh sửa mới ở bất kỳ đâu trên trang web (như mẫu trang), trong khi bộ lọc quicktags_settings lọc tất cả các phiên bản hiện có và không thể được sử dụng để tạo các phiên bản trình chỉnh sửa mới

Mã hoàn chỉnh của các ví dụ trên có sẵn trên Gist

Tăng cường Trình soạn thảo văn bản WordPress với Plugin AddQuicktag

Nếu bạn cần một công cụ để thêm các nút vào trình soạn thảo văn bản WordPress một cách nhanh chóng thì AddQuicktag là plugin dành cho bạn

Trình soạn thảo văn bản trong wordpress ở đâu?
AddQuicktag cho phép người dùng thêm các nút tùy chỉnh vào trình soạn thảo văn bản WordPress

Plugin cung cấp một trang tùy chọn có thể truy cập từ menu Cài đặt. Trên trang này, người dùng quản trị có thể thêm các nút tùy chỉnh và xóa các nút hiện có

AddQuicktag cho phép định cấu hình trình chỉnh sửa cụ thể cho các bài đăng, trang và các vùng văn bản hỗ trợ trình chỉnh sửa khác (nhận xét, tiện ích văn bản, v.v.)

Plugin cũng thêm Quicktags vào trình chỉnh sửa trực quan. Chỉ cần chọn tùy chọn »Trực quan» và trình chỉnh sửa trực quan sẽ hiển thị menu thả xuống Quicktags với các nút tùy chỉnh của bạn

Phần thứ hai của trang tùy chọn AddQuicktag dành riêng cho cấu hình thẻ nhanh tích hợp. Trong phần này, có thể xóa các nút trong các vùng văn bản cụ thể

Trình soạn thảo văn bản trong wordpress ở đâu?
Ba nút đã bị xóa khỏi trình soạn thảo văn bản của trang chỉnh sửa

Phần cuối cùng cung cấp các chức năng bổ sung cho thanh công cụ soạn thảo. Hàng tùy chọn đầu tiên nâng cao nút mã mặc định, cung cấp menu chọn đặt lớp CSS cho thẻ mã tùy thuộc vào ngôn ngữ đã chọn

Hàng thứ hai cung cấp hai nút mã hóa và giải mã các ký tự đặc biệt (htmlentities)

Trình soạn thảo văn bản trong wordpress ở đâu?
Các tính năng AddQuicktag nâng cao

Tóm lược

Nếu bạn là nhà phát triển, bạn có thể thấy hữu ích khi thêm chủ đề hoặc các tính năng dành riêng cho plugin vào trình chỉnh sửa WordPress. API Quicktags cùng nhiều bộ lọc và chức năng cung cấp các công cụ có giá trị để gia tăng giá trị cho các sản phẩm của chúng tôi. Và nếu bạn không phải là nhà phát triển, bạn cũng có thể định cấu hình trình chỉnh sửa WordPress, nhờ một số plugin có sẵn miễn phí trong Thư mục plugin WordPress, chẳng hạn như plugin AddQuicktag được trình bày trong bài đăng này

Bạn có bất kỳ ý tưởng nào khác về các tính năng có giá trị để thêm vào trình soạn thảo văn bản WordPress không?


Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn

Các công cụ chỉnh sửa trong WordPress ở đâu?

Truy cập cài đặt plugin bằng cách điều hướng đến Cài đặt > Công cụ chỉnh sửa nâng cao (TinyMCE Advanced) trong menu bên trái của trang tổng quan .

Trình chỉnh sửa trực quan trong WordPress ở đâu?

Trước tiên, hãy truy cập bảng điều khiển WordPress của bạn và nhấp vào liên kết “Giao diện” trong menu bên trái. Trên màn hình tiếp theo, bạn sẽ thấy danh sách các tùy chọn bên dưới tiêu đề “Trình chỉnh sửa”. Nhấp vào liên kết “Trình chỉnh sửa trực quan” để bật nó

Trình chỉnh sửa nội dung WordPress là gì?

Trình chỉnh sửa nội dung trong WordPress là trình chỉnh sửa WYSIWYG trực quan đầy đủ . Tuy nhiên, bạn vẫn có thể thêm mã HTML nếu cần. Cách dễ nhất để làm điều này là thêm khối HTML tùy chỉnh vào bài đăng của bạn. Sau đó, bạn chỉ cần dán mã HTML mà bạn muốn thêm vào.