Cum se creează un Plugin WordPress TinyMCE

Dacă sunteți dezvoltator WordPress, atunci într-un anumit moment puteți întâlni personalizarea sau extinderea editorului vizual WordPress. De exemplu, poate doriți să adăugați un buton în bara de instrumente a editorului vizual pentru a permite clientului dvs. să introducă cu ușurință o casetă de text sau un buton de chemare la acțiune fără a scrie cod HTML. În acest articol, vă vom arăta cum să creați un plugin TinyMCE în WordPress.

cerinţe

Acest tutorial este destinat utilizatorilor avansați. Dacă sunteți utilizator la nivel de începător care doar dorește să extindă editorul vizual, atunci vă rugăm să verificați pluginul TinyMCE Advanced sau să aruncați o privire la aceste sfaturi despre utilizarea editorului vizual WordPress.

Pentru acest tutorial, veți avea nevoie de abilități de codare de bază, acces la o instalare WordPress unde puteți să-l testați.

Este o practică proastă de a dezvolta pluginuri pe un site web live. O mică greșeală în cod poate face site-ul dvs. inaccesibil. Dar dacă trebuie să faceți acest lucru pe un site live, atunci cel puțin WordPress de rezervă mai întâi.

Crearea primului dvs. plugin TinyMCE

Vom începe prin crearea unui plugin WordPress pentru a înregistra butonul personalizat al barei de instrumente TinyMCE. Când se face clic, acest buton va permite utilizatorului să adauge un link cu o clasă CSS personalizată.

Codul sursă va fi furnizat integral la sfârșitul acestui articol, dar până atunci, să creăm pluginul pas cu pas.

În primul rând, trebuie să creați un director în wp-content / plugins folderul de instalare WordPress. Denumiți acest dosar TinyMCE-custom-link-clasă.

De aici vom începe să adăugăm codul pluginului nostru.

Antetul Pluginului

Creați un fișier nou în directorul plugin pe care tocmai l-am creat și denumiți acest fișier TinyMCE-custom-link-class.php. Adăugați acest cod în fișier și salvați-l.

 / ** * Nume Plugin: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Versiune: 1.0 * Autor: WPBeginner * URI autor: https://www.wpbeginner.com * Descriere: Un simplu plug-in TinyMCE pentru a adăuga o clasă de link personalizat în Editorul vizual * Licență: GPL2 * / 

Acesta este doar un comentariu PHP, care spune WordPress numele plugin-ului, precum și autorul și o descriere.

În zona de administrare WordPress, activați plugin-ul dvs. accesând Plugin-e> Plugin-uri instalate, apoi faceți clic pe Activare de lângă pluginul TinyMCE Custom Link Class:

Configurarea clasei noastre Plugin

Dacă două pluginuri WordPress au funcții cu același nume, atunci aceasta ar cauza o eroare. Vom evita această problemă prin faptul că avem funcțiile noastre înfășurate într-o clasă.

 clasa TinyMCE_Custom_Link_Class / ** * Constructor. Chemată când plugin-ul este inițializat. * / funcția __construct ()  $ tinymce_custom_link_class = nou TinyMCE_Custom_Link_Class; 

Aceasta creează clasa noastră PHP, împreună cu o construcție, care se numește atunci când ajungem la linie $ tinymce_custom_link_class = nou TinyMCE_Custom_Link_Class;.

Orice funcții pe care le adăugăm în această clasă nu ar trebui să contravină altor pluginuri WordPress.

Începeți configurarea Pluginului nostru TinyMCE

Apoi, trebuie să-i spunem lui TinyMCE că este posibil să dorim să adăugăm butonul personalizat în bara de instrumente a editorului vizual. Pentru a face acest lucru, putem folosi acțiunile WordPress - în special, init acțiune.

Adăugați următorul cod în plugin-ul dvs. __construi() funcţie:

 dacă is_admin ()) add_action ('init', array ($ this, 'setup_tinymce_plugin'));  

Acest lucru verifică dacă suntem în interfața de administrare WordPress. Dacă suntem, atunci îi cere WordPress să ruleze setup_tinymce_plugin funcționează în clasa noastră când WordPress și-a terminat rutina de încărcare inițială.

Apoi, adăugați setup_tinymce_plugin funcţie:

 / ** * Verificați dacă utilizatorul curent poate edita Mesaje sau Pagini și utilizează Editorul vizual * Dacă da, adăugați niște filtre astfel încât să putem înregistra pluginul nostru * / function setup_tinymce_plugin () // Verificați dacă utilizatorul logat în WordPress poate edita postări sau pagini // Dacă nu, nu înregistrați pluginul TinyMCE dacă (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) return;  // Verificați dacă utilizatorul conectat la WordPress are activat Editorul vizual // Dacă nu, nu înregistrați pluginul TinyMCE dacă (get_user_option ('rich_editing')! == 'true') return;  // Configurarea unor filtre add_filter ('mce_external_plugins', array (& $ this, 'add_tinymce_plugin')); add_filter ('mce_buttons', array (& $ this, 'add_tinymce_toolbar_button'));  

Acest lucru verifică dacă utilizatorul curent înregistrat în WordPress poate să editeze Mesaje sau Pagini. Dacă nu pot, nu are nici un rost să vă înregistrați pluginul TinyMCE pentru acel Utilizator, deoarece nu vor vedea editorul vizual.

Apoi, verificăm dacă utilizatorul utilizează Visual Editor, deoarece unii utilizatori WordPress îl dezactivează prin Utilizatori> Profilul tău. Din nou, dacă utilizatorul nu utilizează Editorul vizual, vom întoarce (ieșim) funcția, deoarece nu trebuie să facem nimic altceva.

În cele din urmă, adăugăm două filtre WordPress - mce_external_plugins și mce_buttons, pentru a apela funcțiile care vor încărca fișierul Javascript necesar pentru TinyMCE și adăugați un buton în bara de instrumente TinyMCE.

Înregistrarea fișierului și a butonului Javascript în Editorul vizual

Să mergem mai departe și să adăugăm add_tinymce_plugin funcţie:

 / ** * adaugă un fișier JS compatibil cu pluginul TinyMCE la instanța TinyMCE / Visual Editor * * @param array $ plugin_array Array de pluginuri TinyMCE înregistrate * @return array Matrice modificată de pluginuri TinyMCE înregistrate * / funcție add_tinymce_plugin ($ plugin_array) $ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'TinyMCE-custom-link-class.js'; retur $ plugin_array;  

Această funcție îi spune TinyMCE că trebuie să încarce fișierele Javascript stocate în $ plugin_array matrice. Aceste fișiere Javascript vor spune TinyMCE ce să facă.

De asemenea, trebuie să adăugăm un anumit cod la add_tinymce_toolbar_button , pentru a le spune TinyMCE despre butonul pe care dorim să-l adăugăm la bara de instrumente:

 / ** * Adaugă un buton la editorul TinyMCE / Visual care utilizatorul poate face clic pe * pentru a insera un link cu o clasă CSS personalizată. * * @param array $ butoane Array de butoane TinyMCE înregistrate * @return array Matrice modificată de butoane TinyMCE înregistrate * / funcție add_tinymce_toolbar_button ($ butoane) array_push ($ butoane, '|', 'custom_link_class'); returnați butoanele $;  

Acest lucru împinge două elemente pe tabloul butoanelor TinyMCE: un separator (|) și numele programului programat al butonului nostru (custom_link_class).

Salvați pluginul, apoi editați o pagină sau postare pentru a vizualiza editorul vizual. Sunt șanse, bara de instrumente nu se afișează chiar acum:

Nu vă faceți griji - dacă folosim consola de inspector pentru browserul nostru web, vom vedea că o eroare și o notificare de la 404 au fost generate de TinyMCE, spunându-ne că nu poate găsi fișierul nostru Javascript.

Asta e bine - inseamna ca am inregistrat cu succes pluginul nostru personalizat TinyMCE si acum trebuie sa cream fisierul Javascript pentru a-i spune TinyMCE ce sa faca.

Crearea Plugin-ului Javascript

Creați un fișier nou în dvs. wp-content / plugins / TinyMCE-custom-link-clasă dosarul și numele acestuia link-class.js TinyMCE-custom-. Adăugați acest cod în fișierul dvs. js:

 (funcția () tinymce.PluginManager.add ('custom_link_class', funcție (editor, url) );) (); 

Aceasta numește clasa TinyMCE Plugin Manager, pe care o putem folosi pentru a efectua o serie de acțiuni legate de pluginul TinyMCE. Mai exact, adăugăm pluginul nostru la TinyMCE folosind adăuga funcţie.

Aceasta acceptă două elemente; numele pluginului (custom_link_class) și o funcție anonimă.

Dacă sunteți familiarizați cu conceptul de funcții în codificare, o funcție anonimă este pur și simplu o funcție fără nume. De exemplu, funcția foobar () ... este o funcție pe care am putea să o folosim în altă parte în codul nostru foobar ().

Cu o funcție anonimă, nu putem numi această funcție în altă parte a codului nostru - este doar numit în punctul respectiv adăuga() funcția este invocată.

Salvați fișierul Javascript și apoi editați o pagină sau postare pentru a vizualiza editorul vizual. Dacă totul a funcționat, veți vedea bara de instrumente:

Momentan, butonul nostru nu a fost adăugat la bara de instrumente respectivă. Asta pentru că am spus doar TinyMCE că suntem un plugin personalizat. Acum trebuie să-i spunem lui TinyMCE ce să facă - adică să adăugați un buton în bara de instrumente.

Actualizați fișierul Javascript, înlocuind codul existent cu următoarele:

 (functie () tinymce.PluginManager.add ('custom_link_class', functie (editor, url) // Adauga Button la Bara de instrumente Editor Editor.addButton ('custom_link_class', title: 'Insert Button Link', cmd: custom_link_class ',););) (); 

Observați că funcția noastră anonimă are două argumente. Primul este editor exemplu - acesta este editorul vizual TinyMCE. În același mod, putem apela diverse funcții pe PluginManager, de asemenea, putem apela diverse funcții pe editor. În acest caz, îl sunăm addButton pentru a adăuga un buton la bara de instrumente.

Salvați fișierul Javascript și reveniți la editorul vizual. La prima vedere, nimic nu pare să se fi schimbat. Cu toate acestea, dacă deplasați mouse-ul peste cursorul mouse-ului în dreapta pictogramei din dreapta sus a rândului, ar trebui să vedeți o sugestie de instrument:

Am adăugat cu succes un buton în bara de instrumente, dar are nevoie de o imagine. Adăugați următorul parametru la addButton funcție, sub titlu: linia:

imagine: url + '/icon.png', 

URL-ul este adresa URL a pluginului nostru. Acest lucru este util dacă vrem să trimitem un fișier imagine în dosarul nostru de plugin, deoarece putem adăuga numele fișierului imagine la adresa URL. În acest caz, avem nevoie de o imagine numită icon.png în dosarul pluginului nostru. Utilizați pictograma de mai jos:

Reîncărcați editorul vizual și acum veți vedea butonul cu pictograma:

Definirea unei comenzi de rulare

Chiar acum, dacă faceți clic pe buton, nu se va întâmpla nimic. Să adăugăm o comandă TinyMCE spunându-i ce să facă atunci când este apăsat butonul nostru.

În fișierul nostru Javascript, adăugați codul de mai jos sub sfârșit editor.addButton secțiune:

 // Adăugați comanda când faceți clic pe butonul Apăsați editor.addCommand ('custom_link_class', function () alert ('Buton clicked!');); 

Reîncărcați editorul vizual, dați clic pe butonul și va apărea o alertă care confirmă că am apăsat butonul:

Să înlocuim alerta cu un prompt solicitând utilizatorului linkul pe care doresc să îl înfășoare în jurul textului selectat în Editorul vizual:

 // Adauga comanda cand butonul clicked editor.addCommand ('custom_link_class', function () // Verificam ca am ales un text pe care dorim sa-l legam var text = editor.selection.getContent ('format': 'html' ); // if (text.length === 0) alert ('Please select some text to link'); dacă (result) = user a fost returnat; dacă (result.length === 0) // Utilizatorul nu a introdus o adresă URL - returnare de ieșire; // Inserați textul selectat înapoi în editor, într-un tag anchor editor.execCommand ('mceReplaceContent', false, '' + text + '');); 

Acest bloc de cod efectuează câteva acțiuni.

În primul rând, verificăm dacă utilizatorul a selectat un anumit text care să fie legat în Editorul vizual. Dacă nu, vor vedea o alertă spunându-le să selecteze un text care să fie legat.

Apoi, le cerem să introducă un link, verificând din nou dacă au făcut-o. Dacă au anulat sau nu au intrat, nu mai facem nimic altceva.

În cele din urmă, conducem ExecCommand funcționează pe editorul TinyMCE, executând în mod special mceReplaceContent acțiune. Acest lucru înlocuiește textul selectat cu codul nostru HTML, care cuprinde o legătură ancoră cu clasa = "buton", folosind textul pe care l-a selectat utilizatorul.

Dacă totul a funcționat, veți vedea că textul selectat este acum legat în vizualizările Editor vizual și text, cu clasa setată la buton:

rezumat

Am creat cu succes un plugin WordPress care adaugă un buton editorului vizual TinyMCE din WordPress. Acest tutorial a acoperit, de asemenea, unele dintre elementele de bază ale filtrelor TinyMCE API și WordPress disponibile pentru integrarea TinyMCE.

Am adăugat un cod astfel încât atunci când un utilizator face clic pe butonul nostru particularizat, vi se solicită să selectați un text în Editorul vizual, pe care apoi să îl poată lega la o adresă URL la alegere. În cele din urmă, pluginul nostru înlocuiește textul selectat cu o versiune legată care conține o clasă CSS personalizată numită buton.

Sperăm că acest tutorial vă va ajuta să învățați cum să creați un plugin WordPress TinyMCE. De asemenea, puteți să consultați ghidul nostru despre cum să creați un plugin WordPress specific site-ului.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.