Kung ikaw ay nag-develop ng WordPress, pagkatapos ay sa isang punto maaari mong makita ang pagpapasadya o pagpapalawak ng WordPress Visual Editor. Halimbawa, maaaring gusto mong magdagdag ng isang pindutan sa toolbar ng Visual Editor upang payagan ang iyong kliyente na madaling magsingit ng isang text box o isang pindutan ng call to action nang hindi nagsusulat ng anumang HTML code. Sa artikulong ito, ipapakita namin sa iyo kung paano lumikha ng isang TinyMCE plugin sa WordPress.
Mga Kinakailangan
Ang tutorial na ito ay inilaan para sa mga advanced na user. Kung ikaw ay isang gumagamit ng antas ng beginner na nais lamang upang palawigin ang visual na editor, pagkatapos ay mangyaring tingnan ang TinyMCE Advanced na plugin o tingnan ang mga tip na ito gamit ang WordPress visual na editor.
Para sa tutorial na ito, kakailanganin mo ang mga pangunahing kasanayan sa pag-coding, pag-access sa isang WordPress-install kung saan maaari mong subukan ito.
Ito ay isang masamang kasanayan upang bumuo ng mga plugin sa isang live na website. Ang isang maliit na pagkakamali sa code ay maaaring gawing hindi naa-access ang iyong site. Ngunit kung kailangan mong gawin ito sa isang live na site, pagkatapos ay hindi bababa sa backup WordPress muna.
Paglikha ng Iyong Unang TinyMCE Plugin
Magsisimula kami sa pamamagitan ng paglikha ng isang WordPress plugin upang irehistro ang aming pasadyang pindutan ng toolbar ng TinyMCE. Kapag nag-click, ang button na ito ay magpapahintulot sa user na magdagdag ng isang link sa isang pasadyang klase ng CSS.
Ang source code ay ipagkakaloob nang buo sa dulo ng artikulong ito, ngunit hanggang ngayon, lumikha ng plugin na hakbang-hakbang.
Una, kailangan mong lumikha ng direktoryo sa wp-content / plugins folder ng iyong WordPress install. Pangalanan ang folder na ito tinymce-custom-link-class .
Mula rito, sisimulan naming idagdag ang aming plugin code.
Ang Plugin Header
Lumikha ng isang bagong file sa direktoryo ng plugin na aming nilikha at pangalanan ang file na ito tinymce-custom-link-class.php . Idagdag ang code na ito sa file at i-save ito.
/ ** * Pangalan ng Plugin: TinyMCE Custom Link Class * Plugin URI: http://site.com * Bersyon: 1.0 * May-akda: site * May-akda URI: http://www.site.com * Paglalarawan: Isang simpleng TinyMCE Plugin upang magdagdag ng isang pasadyang uri ng link sa Visual Editor * Lisensya: GPL2 * /
Ito ay isang komento lamang ng PHP, na nagsasabi sa WordPress ng pangalan ng plugin, pati na rin ang may-akda at isang paglalarawan.
Sa lugar na admin ng WordPress, buhayin ang iyong bagong plugin sa pamamagitan ng pagpunta sa Mga Plugin> Naka-install na Plugin, at pagkatapos ay i-click ang I-activate sa tabi ng plugin ng Plugin ng Custom na TinyMCE Class:
Pag-set Up ng aming Plugin Class
Kung may dalawang mga plugin ng WordPress na may mga function na may parehong pangalan, pagkatapos ito ay magiging sanhi ng isang error. Iiwasan namin ang problemang ito sa pamamagitan ng pagkakaroon ng aming mga function na nakabalot sa isang klase.
klase TinyMCE_Custom_Link_Class {
/ **
* Constructor. Tinatawag na ang initialization ng plugin.
* /
function __construct () {
}
}
$ tinymce_custom_link_class = bagong TinyMCE_Custom_Link_Class;
Lumilikha ito ng aming klase sa PHP, kasama ang isang construct, na kung saan ay tinatawag na kapag naabot namin ang linya $ tinymce_custom_link_class = bagong TinyMCE_Custom_Link_Class; .
Ang anumang mga pag-andar na idaragdag namin sa loob ng klase na ito ay hindi dapat sumasalungat sa iba pang mga plugin ng WordPress.
Simulan ang Pag-set Up ng aming TinyMCE Plugin
Susunod, kailangan naming sabihin sa TinyMCE na maaaring gusto naming idagdag ang aming custom na pindutan sa toolbar ng Visual Editor. Upang gawin ito, maaari naming gamitin ang mga pagkilos ng WordPress – partikular, ang sa loob aksyon.
Idagdag ang sumusunod na code sa loob ng iyong plugin __construct () function:
kung (is_admin ()) {
add_action ('init', array ($ this, 'setup_tinymce_plugin'));
}
Sinusuri ito kung nasa interface ng WordPress Administration kami. Kung kami ay, pagkatapos ay tinatanong nito ang WordPress na patakbuhin ang setup_tinymce_plugin function sa loob ng aming klase kapag ang WordPress ay tapos na ang kanyang paunang pag-load na gawain.
Susunod, idagdag ang setup_tinymce_plugin function:
/ **
* Suriin kung ang kasalukuyang gumagamit ay maaaring mag-edit ng Mga Post o Pahina, at ginagamit ang Visual Editor
* Kung oo, magdagdag ng ilang mga filter upang mairehistro namin ang aming plugin
* /
function setup_tinymce_plugin () {
/ Suriin kung ang naka-log in WordPress Maaaring mag-edit ng User ang Mga Post o Mga Pahina
/ / Kung hindi, huwag irehistro ang aming TinyMCE plugin
kung (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
bumalik;
}
/ Suriin kung ang naka-log in WordPress Pinagana ng Visual User ang Visual Editor
/ / Kung hindi, huwag irehistro ang aming TinyMCE plugin
kung (get_user_option ('rich_editing')! == 'true') {
bumalik;
}
/ / I-setup ang ilang mga filter
add_filter ('mce_external_plugins', array (& $ this, 'add_tinymce_plugin'));
add_filter ('mce_buttons', array (& $ this, 'add_tinymce_toolbar_button'));
}
Ang mga tseke kung ang kasalukuyang naka-log in na gumagamit ng WordPress ay maaaring mag-edit ng Mga Post o Mga Pahina. Kung hindi nila magagawa, walang punto sa pagpaparehistro sa aming TinyMCE Plugin para sa Gumagamit na iyon, dahil hindi nila makikita ang Visual Editor.
Pagkatapos ay tinitingnan namin kung gumagamit ang gumagamit ng Visual Editor, tulad ng ilang mga gumagamit ng WordPress na i-off ito sa pamamagitan ng Mga User> Your Profile. Muli, kung ang gumagamit ay hindi gumagamit ng Visual Editor, bumalik kami (lumabas) sa pag-andar, dahil hindi na namin kailangang gumawa ng anumang bagay.
Sa wakas, nagdagdag kami ng dalawang Mga Filter ng WordPress – mce_external_plugins at mce_buttons , upang tawagan ang aming mga pag-andar na kung saan ay i-load ang kinakailangang file na Javascript para sa TinyMCE, at magdagdag ng isang pindutan sa TinyMCE toolbar.
Pagrehistro ng Javascript File at Pindutan sa Visual Editor
Magpatuloy tayo at idagdag ang add_tinymce_plugin function:
/ **
* Nagdadagdag ng isang TinyMCE plugin katugmang JS file sa halimbawa ng TinyMCE / Visual Editor
*
* @param array $ plugin_array Array of registered TinyMCE Plugins
* @return array Modified array ng mga rehistradong TinyMCE Plugin
* /
function add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'tinymce-custom-link-class.js';
bumalik $ plugin_array;
}
Ang pag-andar na ito ay nagsasabi sa TinyMCE na kailangang ma-load ang mga file na Javascript na naka-imbak sa $ plugin_array array. Ang mga file na Javascript ay magsasabi sa TinyMCE kung ano ang gagawin.
Kailangan din naming magdagdag ng ilang code sa add_tinymce_toolbar_button function, upang sabihin sa TinyMCE ang tungkol sa pindutan na gusto naming idagdag sa toolbar:
/ **
* Nagdadagdag ng isang pindutan sa TinyMCE / Visual Editor kung saan maaaring mag-click ang user
* upang magpasok ng isang link gamit ang isang pasadyang klase ng CSS.
*
* @param array $ buttons Array of registered Buttons TinyMCE
* @return array Modified array ng mga nakarehistrong mga Pindutan ng TinyMCE
* /
function add_tinymce_toolbar_button ($ buttons) {
array_push ($ pindutan, '|', 'custom_link_class');
bumalik $ na mga pindutan;
}
Itinutulak nito ang dalawang bagay sa hanay ng mga pindutan ng TinyMCE: isang separator (|), at ang programmatic na pangalan ng aming button ( custom_link_class ).
I-save ang iyong plugin, at pagkatapos ay i-edit ang isang Page o Post upang tingnan ang Visual Editor. Malamang, ang toolbar ay hindi nagpapakita ngayon:
Huwag mag-alala – kung gagamitin namin ang console ng inspector ng aming web browser, makikita namin na ang isang 404 na error at paunawa ay nalikha ng TinyMCE, na nagsasabi sa amin na hindi ito mahanap ang aming file na Javascript.
Iyan ay mabuti – nangangahulugan ito na matagumpay naming nakarehistro ang aming Custom na TinyMCE plugin, at ngayon kailangan mong lumikha ng Javascript file upang sabihin sa TinyMCE kung ano ang gagawin.
Paglikha ng Javascript Plugin
Lumikha ng isang bagong file sa iyong wp-content / plugins / tinymce-custom-link-class folder, at pangalanan ito tinymce-custom-link-class.js . Idagdag ang code na ito sa iyong js file:
(function () {
tinymce.PluginManager.add ('custom_link_class', function (editor, url) {
});
}) ();
Tinatawag nito ang klase ng TinyMCE Plugin Manager, na magagamit namin upang maisagawa ang isang bilang ng mga pagkilos na may kaugnayan sa TinyMCE plugin. Sa partikular, nagdadagdag kami ng aming plugin sa TinyMCE gamit ang idagdag function.
Tinatanggap nito ang dalawang item; ang pangalan ng plugin ( custom_link_class ) at isang hindi kilalang function.
Kung pamilyar ka sa konsepto ng mga pag-andar sa coding, isang hindi kilalang function ay isang function na walang pangalan. Halimbawa, function foobar () {...} ay isang function na maaari naming tumawag sa ibang lugar sa aming code sa pamamagitan ng paggamit foobar () .
Sa pamamagitan ng isang hindi kilalang function, hindi namin maaaring tumawag sa pag-andar na iyon sa ibang lugar sa aming code – ito ay tinatawag na lamang sa punto ng idagdag () ginagamit ang pag-andar.
I-save ang iyong Javascript file, at pagkatapos ay i-edit ang isang Page o Post upang tingnan ang Visual Editor. Kung ang lahat ay nagtrabaho, makikita mo ang toolbar:
Sa ngayon, ang aming pindutan ay hindi naidagdag sa toolbar na iyon. Iyon ay dahil sinabi lamang namin sa TinyMCE na kami ay isang pasadyang plugin. Kailangan namin ngayon upang sabihin sa TinyMCE kung ano ang gagawin – iyon ay, magdagdag ng isang pindutan sa toolbar.
I-update ang iyong file na Javascript, palitan ang iyong umiiral na code sa mga sumusunod:
(function () {
tinymce.PluginManager.add ('custom_link_class', function (editor, url) {
/ / Magdagdag ng Pindutan sa Visual Editor Toolbar
editor.addButton ('custom_link_class', {
pamagat: 'Ipasok ang Link ng Pindutan',
cmd: 'custom_link_class',
});
});
}) ();
Pansinin ang aming hindi kilalang function ay may dalawang argumento. Ang una ay ang editor Halimbawa – ito ang TinyMCE Visual Editor. Sa parehong paraan maaari naming tawagan ang iba’t ibang mga function sa PluginManager , maaari rin kaming tumawag sa iba’t ibang mga function sa editor . Sa kasong ito, tinatawagan namin ang addButton function, upang magdagdag ng isang pindutan sa toolbar.
I-save ang iyong file na Javascript, at bumalik sa iyong Visual Editor. Sa unang pagtingin, walang mukhang nagbago. Gayunpaman, kung hover mo ang iyong mouse cursor sa kanan ng tuktok na hilera ng icon ng tuktok, dapat mong makita ang isang tooltip lilitaw:
Matagumpay kaming nagdagdag ng isang pindutan sa toolbar, ngunit nangangailangan ito ng isang imahe. Idagdag ang sumusunod na parameter sa addButton function, sa ibaba ng pamagat: linya:
larawan: url + '/icon.png',
url ay ang URL sa aming plugin. Ito ay madaling gamitin kung gusto naming isangguni ang isang file ng imahe sa loob ng aming plugin na folder, dahil maaari naming maipasok ang pangalan ng file ng imahe sa URL. Sa kasong ito, kakailanganin namin ang isang imahe na tinatawag icon.png sa folder ng aming plugin. Gamitin ang icon sa ibaba: 
I-reload ang aming Visual Editor, at makikita mo na ngayon ang iyong pindutan gamit ang icon: 
Pagtukoy sa isang Command upang Patakbuhin
Sa ngayon, kung na-click mo ang pindutan, wala nang mangyayari. Magdaragdag kami ng isang command sa TinyMCE na nagsasabi kung ano ang dapat gawin kapag na-click ang aming pindutan.
Sa aming Javascript file, idagdag ang sumusunod na code sa ibaba ng katapusan ng editor.addButton seksyon:
// Magdagdag ng Command kapag na-click ang Button
editor.addCommand ('custom_link_class', function () {
alert ('na-click ang Button!');
});
I-reload ang aming Visual Editor, i-click ang pindutan at lilitaw ang isang alerto na nagpapatunay na na-click lang namin ang pindutan:
Palitan natin ang alerto ng isang prompt, na humihiling sa user para sa link na gusto nilang balutin sa napiling teksto sa Visual Editor:
// Magdagdag ng Command kapag na-click ang Button
editor.addCommand ('custom_link_class', function () {
/ / Suriin namin ang ilang mga teksto na gusto naming i-link
var text = editor.selection.getContent ({
'format': 'html'
});
kung (text.length === 0) {
alerto ('Mangyaring pumili ng ilang teksto upang i-link.');
bumalik;
}
// Hilingin sa gumagamit na magpasok ng isang URL
var result = prompt ('Ipasok ang link');
kung (! resulta) {
/ Kinansela ang user - exit
bumalik;
}
kung (result.length === 0) {
// Hindi gumagamit ng user ang isang URL - lumabas
bumalik;
}
/ / Ilagay ang napiling teksto pabalik sa editor, pambalot ito sa isang tag na anchor
editor.execCommand ('mceReplaceContent', false, '' + text + '');
});
Gumagana ang bloke ng code ng ilang mga pagkilos.
Una, sinusuri namin kung pinili ng gumagamit ang ilang teksto na ma-link sa Visual Editor. Kung hindi, makikita nila ang isang alerto na nagsasabi sa kanila na pumili ng ilang teksto na mag-link.
Susunod, hinihiling namin sa kanila na magpasok ng isang link, muli suriin kung ginawa nila. Kung nakansela sila, o hindi pumasok sa anumang bagay, wala kaming ginagawa.
Sa wakas, pinatatakbo namin ang execCommand gumana sa editor ng TinyMCE, partikular na tumatakbo ang mceReplaceContent aksyon. Pinalitan nito ang piniling teksto sa aming HTML code, na binubuo ng isang link ng anchor na may klase = “button”, gamit ang teksto na pinili ng gumagamit.
Kung ang lahat ng bagay ay nagtrabaho, makikita mo na ang iyong napiling teksto ay naka-link na ngayon sa mga view ng Visual Editor at Teksto, kasama ang hanay ng klase na pindutan :
Buod
Matagumpay kaming nakagawa ng isang WordPress plugin na nagdaragdag ng isang pindutan sa TinyMCE visual na editor sa WordPress. Ang tutorial na ito ay may sakop din sa ilan sa mga pangunahing kaalaman ng TinyMCE API at mga filter ng WordPress na magagamit para sa mga integrasyon ng TinyMCE.
Nagdagdag kami ng code upang kapag nag-click ang isang user sa aming custom na pindutan, sinenyasan sila upang pumili ng ilang teksto sa Visual Editor, na maaari nilang mag-link sa isang URL na gusto nila. Sa wakas, ang aming plugin ay pinapalitan ang napiling teksto na may naka-link na bersyon na naglalaman ng isang pasadyang klase ng CSS na tinatawag na pindutan .
Umaasa kami na nakatulong ang tutorial na ito na matutunan mo kung paano lumikha ng isang plugin ng TinyMCE WordPress. Maaari mo ring tingnan ang aming gabay sa kung paano lumikha ng WordPress plugin na tukoy sa site.