Nếu bạn là nhà phát triển WordPress, sau đó tại một số điểm bạn có thể đi qua tuỳ chỉnh hoặc mở rộng WordPress Visual Editor. Ví dụ: bạn có thể muốn thêm một nút vào thanh công cụ của Visual Editor để cho phép khách hàng của bạn dễ dàng chèn một hộp văn bản hoặc một nút gọi hành động mà không cần viết bất kỳ mã HTML nào. Trong bài này, chúng tôi sẽ chỉ cho bạn cách tạo một plugin TinyMCE trong WordPress.
Yêu cầu
Hướng dẫn này dành cho người dùng nâng cao. Nếu bạn là người mới bắt đầu sử dụng, người chỉ muốn mở rộng trình chỉnh sửa hình ảnh, vui lòng kiểm tra plugin TinyMCE Advanced hoặc xem các mẹo này về cách sử dụng trình chỉnh sửa hình ảnh WordPress.
Đối với hướng dẫn này, bạn sẽ cần các kỹ năng mã hóa cơ bản, truy cập WordPress cài đặt nơi bạn có thể kiểm tra nó.
Đó là một thực tế không tốt để phát triển các plugin trên một trang web trực tiếp. Một lỗi nhỏ trong đoạn mã có thể làm cho trang web của bạn không thể truy cập. Nhưng nếu bạn phải làm nó trên một trang web trực tiếp, sau đó ít nhất sao lưu WordPress đầu tiên.
Tạo trình cắm TinyMCE đầu tiên của bạn
Chúng tôi sẽ bắt đầu bằng cách tạo một plugin WordPress để đăng ký nút thanh công cụ TinyMCE tùy chỉnh của chúng tôi. Khi được nhấp vào, nút này sẽ cho phép người dùng thêm một liên kết với một lớp CSS tùy chỉnh.
Mã nguồn sẽ được cung cấp đầy đủ ở cuối bài viết này, nhưng cho đến khi đó, hãy tạo plugin từng bước.
Trước tiên, bạn cần phải tạo một thư mục trong wp-content / plugins thư mục cài đặt WordPress của bạn. Đặt tên thư mục này tinymce-custom-link-class .
Từ đây, chúng tôi sẽ bắt đầu thêm mã plugin của chúng tôi.
Tiêu đề Plugin
Tạo một tệp tin mới trong thư mục plugin mà chúng tôi vừa tạo và đặt tên tệp này tinymce-custom-link-class.php . Thêm mã này vào tệp và lưu nó.
/ ** * Tên Trình cắm: TinyMCE Custom Link Class * Plugin URI: http://site.com Phiên bản: 1.0 * Tác giả: trang web * URI Tác giả: http://www.site.com * Mô tả: Một TinyMCE Plugin đơn giản để thêm một lớp liên kết tuỳ chỉnh trong Visual Editor * Giấy phép: GPL2 * /
Đây chỉ là một nhận xét về PHP, nó nói với WordPress tên của plugin, cũng như tác giả và một mô tả.
Trong khu vực quản trị WordPress, kích hoạt plugin mới của bạn bằng cách vào Plugins> Installed Plugins, sau đó kích Activate bên cạnh plugin TinyMCE Custom Link Class:
Thiết lập Lớp Plugin của chúng tôi
Nếu hai plugin WordPress có chức năng có cùng tên, thì điều này sẽ gây ra lỗi. Chúng ta sẽ tránh vấn đề này bằng cách sử dụng các hàm của chúng ta trong một lớp.
lớp TinyMCE_Custom_Link_Class {
/ **
* Constructor. Được gọi khi plugin được khởi tạo.
* /
chức năng __construct () {
}
}
$ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
Điều này tạo ra lớp PHP của chúng ta, cùng với một cấu trúc, được gọi là khi chúng ta đến được đường $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; .
Bất kỳ chức năng nào chúng ta thêm bên trong lớp này không được xung đột với các plugin WordPress khác.
Bắt đầu Thiết lập Plugin TinyMCE của chúng tôi
Tiếp theo, chúng ta cần phải nói với TinyMCE rằng chúng ta có thể muốn thêm nút tùy chỉnh của chúng ta vào thanh công cụ của Visual Editor. Để làm điều này, chúng ta có thể sử dụng các hành động của WordPress – cụ thể là trong đó hoạt động.
Thêm mã sau vào plugin của bạn __xây dựng() chức năng:
if (is_admin ()) {
add_action ('init', mảng ($ this, 'setup_tinymce_plugin'));
}
Việc này sẽ kiểm tra xem chúng tôi có trong giao diện WordPress Administration hay không. Nếu có, thì nó sẽ hỏi WordPress để chạy setup_tinymce_plugin chức năng bên trong lớp học của chúng tôi khi WordPress đã hoàn thành thủ tục tải ban đầu của nó.
Tiếp theo, thêm setup_tinymce_plugin chức năng:
/ **
* Kiểm tra nếu người dùng hiện tại có thể sửa Bài viết hoặc trang, và đang sử dụng Visual Editor
* Nếu có, thêm một số bộ lọc để chúng tôi có thể đăng ký plugin của chúng tôi
* /
hàm setup_tinymce_plugin () {
// Kiểm tra xem người dùng WordPress đã đăng nhập có thể chỉnh sửa Bài viết hoặc Trang
/ / Nếu không, không đăng ký plugin TinyMCE của chúng tôi
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
trở về;
}
// Kiểm tra xem người dùng WordPress đã đăng nhập có bật Visual Editor chưa
/ / Nếu không, không đăng ký plugin TinyMCE của chúng tôi
if (get_user_option ('rich_editing')! == 'đúng') {
trở về;
}
/ / Thiết lập một số bộ lọc
add_filter ('mce_external_plugins', mảng (& $ this, 'add_tinymce_plugin'));
add_filter ('mce_buttons', mảng (& $ this, 'add_tinymce_toolbar_button'));
}
Thao tác này sẽ kiểm tra xem hiện tại người dùng WordPress đã đăng nhập có thể sửa Bài viết hoặc Trang. Nếu họ không thể, không có điểm nào trong việc đăng ký TinyMCE Plugin của chúng ta cho Người dùng đó, vì họ sẽ không bao giờ nhìn thấy Visual Editor.
Sau đó chúng tôi kiểm tra nếu người dùng đang sử dụng Visual Editor, như một số người dùng WordPress tắt tính năng này thông qua Người dùng> Hồ sơ của bạn. Một lần nữa, nếu người dùng không sử dụng Visual Editor, chúng ta sẽ quay lại (exit) chức năng, vì chúng ta không cần phải làm gì khác.
Cuối cùng, chúng ta thêm hai bộ lọc WordPress – mce_external_plugins và mce_buttons , để gọi các hàm của chúng ta sẽ nạp tệp Javascript yêu cầu cho TinyMCE, và thêm một nút vào thanh công cụ TinyMCE.
Đăng ký tệp Javascript và Nút để Visual Editor
Hãy tiếp tục và thêm add_tinymce_plugin chức năng:
/ **
* Thêm một tệp tin JS tương thích với TinyMCE plugin vào ví dụ TinyMCE / Visual Editor
*
* @param array $ plugin_array Mảng của các plugin TinyMCE đã đăng ký
* @reurn mảng Đã sửa đổi mảng các TinyMCE Plugins đã đăng ký
* /
hàm add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'tinymce-custom-link-class.js';
trở lại $ plugin_array;
}
Chức năng này cho TinyMCE biết rằng nó cần tải các tệp Javascript được lưu trữ trong $ plugin_array mảng. Các tập tin Javascript sẽ cho TinyMCE biết phải làm gì.
Chúng tôi cũng cần thêm một số mã vào add_tinymce_toolbar_button , để nói với TinyMCE về nút mà chúng ta muốn thêm vào thanh công cụ:
/ **
* Thêm một nút vào TinyMCE / Visual Editor mà người dùng có thể click
* để chèn một liên kết với một lớp CSS tùy chỉnh.
*
* @param array $ buttons Mảng của các nút TinyMCE đã đăng ký
* @reurn mảng Sửa đổi mảng các nút TinyMCE đã đăng ký
* /
chức năng add_tinymce_toolbar_button ($ nút) {
array_push ($ buttons, '|', 'custom_link_class');
trở lại $ nút;
}
Thao tác này đẩy hai mục lên mảng các nút TinyMCE: dấu phân tách (|) và tên chương trình của nút của chúng ta ( custom_link_class ).
Lưu plugin của bạn, và sau đó chỉnh sửa một Trang hoặc Đăng để xem Visual Editor. Rất có thể, thanh công cụ hiện không hiển thị:
Đừng lo lắng – nếu chúng ta sử dụng bảng điều khiển của trình duyệt web của chúng tôi, chúng tôi sẽ phát hiện ra lỗi 404 và thông báo đã được tạo ra bởi TinyMCE, cho chúng tôi biết rằng nó không thể tìm thấy tệp Javascript của chúng tôi.
Điều đó tốt – có nghĩa là chúng tôi đã đăng ký thành công plugin tùy chỉnh TinyMCE của chúng tôi và bây giờ cần phải tạo tệp Javascript để cho TinyMCE biết phải làm gì.
Tạo trình cắm Javascript
Tạo một tập tin mới trong wp-content / plugins / tinymce-custom-link-class và đặt tên cho nó tinymce-custom-link-class.js . Thêm mã này vào tệp js của bạn:
(chức năng() {
tinymce.PluginManager.add ('custom_link_class', chức năng (trình biên tập, url) {
});
}) ();
Điều này gọi lớp TinyMCE Plugin Manager, mà chúng ta có thể sử dụng để thực hiện một số hành động liên quan đến plugin TinyMCE. Cụ thể, chúng tôi đang thêm plugin của chúng tôi vào TinyMCE bằng cách sử dụng thêm vào chức năng.
Điều này chấp nhận hai mục; tên của plugin ( custom_link_class ) và một chức năng nặc danh.
Nếu bạn đã quen thuộc với khái niệm hàm trong mã hóa, một hàm ẩn danh chỉ đơn giản là một hàm không có tên. Ví dụ, chức năng foobar () {...} là một chức năng mà chúng ta có thể gọi ở đâu đó trong mã của chúng ta bằng cách sử dụng foobar () .
Với một hàm ẩn danh, chúng ta không thể gọi hàm đó ở nơi khác trong mã của chúng ta – nó chỉ được gọi vào thời điểm thêm vào() chức năng được gọi.
Lưu tập tin Javascript của bạn, và sau đó chỉnh sửa một Trang hoặc Đăng để xem Visual Editor. Nếu mọi thứ đã hoạt động, bạn sẽ thấy thanh công cụ:
Ngay bây giờ, nút của chúng tôi đã không được thêm vào thanh công cụ đó. Đó là bởi vì chúng tôi chỉ nói với TinyMCE rằng chúng tôi là một plugin tùy chỉnh. Bây giờ chúng ta cần phải nói cho TinyMCE biết phải làm gì – nghĩa là, thêm một nút vào thanh công cụ.
Cập nhật tệp Javascript của bạn, thay thế mã hiện có của bạn với các điều sau:
(chức năng() {
tinymce.PluginManager.add ('custom_link_class', chức năng (trình biên tập, url) {
// Thêm nút vào thanh công cụ Visual Editor
editor.addButton ('custom_link_class', {
tiêu đề: 'Insert Button Link',
cmd: 'custom_link_class',
});
});
}) ();
Chú ý rằng hàm ẩn danh của chúng ta có hai đối số. Đầu tiên là người biên tập instance – đây là TinyMCE Visual Editor. Trong cùng một cách, chúng ta có thể gọi các chức năng khác nhau trên Plugin Manager , chúng tôi cũng có thể gọi các chức năng khác nhau trên người biên tập . Trong trường hợp này, chúng tôi đang gọi thêm nút , để thêm một nút vào thanh công cụ.
Lưu tệp Javascript của bạn và quay lại Visual Editor. Ở cái nhìn đầu tiên, không có gì dường như đã thay đổi. Tuy nhiên, nếu bạn di chuột qua bên phải biểu tượng bên phải phía trên cùng của hàng đầu, bạn sẽ thấy một chú giải công cụ xuất hiện:
Chúng tôi đã thêm một nút vào thanh công cụ, nhưng nó cần một hình ảnh. Thêm thông số sau vào thêm nút chức năng, bên dưới chức vụ: hàng:
image: url + '/icon.png',
url là URL cho plugin của chúng tôi. Điều này rất tiện dụng nếu chúng ta muốn tham chiếu tệp hình ảnh trong thư mục plugin của chúng tôi, vì chúng ta có thể nối tên tệp hình ảnh vào URL. Trong trường hợp này, chúng tôi sẽ cần một hình ảnh được gọi là icon.png trong thư mục plugin của chúng tôi. Sử dụng biểu tượng bên dưới: 
Tải lại Visual Editor, và bây giờ bạn sẽ thấy nút của bạn với biểu tượng: 
Định nghĩa một lệnh để chạy
Ngay bây giờ, nếu bạn nhấp vào nút, sẽ không có gì xảy ra. Hãy thêm một lệnh để TinyMCE nói với nó phải làm gì khi nút của chúng tôi được nhấp.
Trong tệp Javascript của chúng tôi, hãy thêm mã dưới đây vào cuối kết thúc editor.addButton phần:
// Thêm lệnh khi nút được nhấp
editor.addCommand ('custom_link_class', function () {
cảnh báo ('Nút nhấn!');
});
Tải lại Trình chỉnh sửa Trực quan của chúng tôi, nhấp vào nút và một cảnh báo sẽ xuất hiện xác nhận, chúng tôi chỉ cần nhấp vào nút:
Hãy thay thế cảnh báo bằng dấu nhắc, yêu cầu người dùng liên kết họ muốn quấn quanh văn bản đã chọn trong Visual Editor:
// Thêm lệnh khi nút được nhấp
editor.addCommand ('custom_link_class', function () {
// Kiểm tra xem chúng ta đã chọn một số văn bản mà chúng ta muốn liên kết
var text = editor.selection.getContent ({
'định dạng': 'html'
});
if (text.length === 0) {
cảnh báo ('Hãy chọn một số văn bản để liên kết.');
trở về;
}
/ / Yêu cầu người dùng nhập một URL
var result = prompt ('Nhập liên kết');
if (! result) {
// Người dùng hủy - thoát
trở về;
}
if (result.length === 0) {
// Người dùng không nhập URL - thoát
trở về;
}
// Chèn văn bản đã chọn vào trình soạn thảo, đóng gói nó trong một thẻ neo
editor.execCommand ('mceReplaceContent', false, '' + text + '');
});
Khối mã này thực hiện một vài hành động.
Đầu tiên, chúng ta kiểm tra nếu người dùng chọn một số văn bản để được liên kết trong Visual Editor. Nếu không, họ sẽ thấy một cảnh báo yêu cầu họ chọn một số văn bản để liên kết.
Tiếp theo, chúng tôi yêu cầu họ nhập một liên kết, một lần nữa kiểm tra nếu họ đã làm. Nếu họ hủy bỏ, hoặc không nhập bất cứ điều gì, chúng tôi không làm gì khác.
Cuối cùng, chúng tôi chạy execCommand chức năng trên trình soạn thảo TinyMCE, đặc biệt chạy mceReplaceContent hoạt động. Điều này sẽ thay thế văn bản được chọn bằng mã HTML của chúng tôi, bao gồm liên kết anchor với nút “class =”, sử dụng văn bản người dùng đã chọn.
Nếu mọi thứ đã hoạt động, bạn sẽ thấy văn bản đã chọn của bạn bây giờ đã được liên kết trong khung nhìn Visual Editor và Text, với lớp được thiết lập để nút :
Tóm lược
Chúng tôi đã thành công tạo một plugin WordPress bổ sung một nút vào trình biên tập hình ảnh TinyMCE trong WordPress. Hướng dẫn này cũng đã đề cập đến một số vấn đề cơ bản của bộ lọc TinyMCE API và WordPress dành cho tích hợp TinyMCE.
Chúng tôi đã thêm mã để khi người dùng nhấp vào nút tùy chỉnh của chúng tôi, chúng sẽ được nhắc nhở chọn một số văn bản trong Visual Editor, sau đó họ có thể liên kết đến một URL mà họ chọn. Cuối cùng, plugin của chúng tôi sẽ thay thế văn bản đã chọn bằng một phiên bản được liên kết có chứa một lớp CSS tùy chỉnh được gọi là nút .
Chúng tôi hy vọng hướng dẫn này giúp bạn tìm hiểu cách tạo một plugin WordPress TinyMCE. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tạo một plugin WordPress cho trang web cụ thể.