Ghid pentru crearea propriilor butoane editor WordPress

Probabil că știți că WordPress este asociat cu editorul HTML WYSIWYG, TinyMCE. Varietatea de caracteristici și capacitatea de a fi extinse prin pluginuri îl fac cel mai folosit editor WYSIWYG din lume. Cu toate acestea, WordPress nu utilizează toate caracteristicile sale. WordPress personalizează și păstrează doar părți care sunt într-adevăr utile pentru utilizatori, evitând dezordinea interfeței cu utilizatorul. Aceasta înseamnă, de asemenea, că unele funcții, de exemplu butoane, au fost ascunse de utilizatori. Puteți activa în totalitate butoanele MCE ascunse. De obicei, ele sunt stylesheet, Sub, cina butoane. Dacă chiar și cele ascunse încă nu satisfac nevoile dvs., atunci trebuie să creați un plugin TinyMCE pentru a adăuga propriul dvs.. În acest tutorial, vă voi trece prin elementele de bază ale adăugării butoanelor editorului WordPress, prin crearea unui plugin TinyMCE.

Înainte de a începe

După cum am menționat mai devreme, vom crea un nou plugin TinyMCE a cărui sarcină este să adăugăm noile butoane pe care le dorim. Deci, care butoane vom adauga? Vom încerca să adăugăm două butoane simple: Dropcap și Postări recente, în care primul vă dă posibilitatea de a converti o literă selectată într-o scrisoare cu vârf de coborâre, iar aceasta din urmă va afișa postări recente. Codul generează aceste butoane afișate mai jos.

Să creați un nou dosar numit wptuts-editor-butoane (desigur, îl poți schimba la altceva dacă vrei) în directorul temei (folosind TwentyTweve). Continuați să creați două fișiere noi, wptuts.php care invocă PHP personalizat, iar celălalt numit wptuts-plugin.js unde vor fi localizate fragmentele de cod JavaScript. În cele din urmă, deschideți tema functions.php fișier și includeți noul creat wptuts.php fișier în el. Notă, rețineți că ați definit calea exactă:

 cer ('wptuts-editor-buttons / wptuts.php');

Apoi trebuie să pregătim un cod pentru acele două butoane:

Dropcap - Modul ideal de a face o literă în capacele de picătură este de a împacheta pur și simplu litera selectată de utilizator într-o clasă de span predefinită HTML care stiluri acea literă să arate ca capace de picătură. Codul CSS al clasei de mai jos, doar îl adaugă la tema proprie style.css fişier:
```
 / * Adăugați acest cod în stil.css * / .dropcap float: left; font-size: 80px; padding-right: 7px; linia-înălțime: 72px; 
```

Postări recente - Vom face un scurtcod care va adăuga o listă de postări recente în pagină, deschideți wptuts.php fișier și adăugați următorul cod:

 add_shortcode ("posturi recente", "wptuts_recent_posts"); funcția wptuts_recent_posts ($ atts) extract (shortcode_atts (array ('numere' => '5',) $ atts)); $ rposts = noul WP_Query (array ('posts_per_page' => $ numere, 'orderby' => 'date')); dacă ($ rposts-> have_posts ()) $ html = 'Postări recente
„; în timp ce ($ rposts-> have_posts ()) $ rposts-> the_post (); $ html. = sprintf ('% s
', get_permalink ($ rposts-> post-> identificare), get_the_title (), get_the_title ());  $ html. = '
„;  wp_reset_query (); returnați $ html;

Presupunem că atunci când utilizatorii fac clic pe Postări recente , browserul va afișa un dialog care îi va cere numărul de postări pe care doresc să le arate. După ce are numărul respectiv, editorul îl va completa ca argument în codul scurt de mai sus. De exemplu, dacă dorim să afișăm șapte postări recente, codul scurt este generat după cum urmează:

 [numere recente-posturi = "7" /]

Înregistrarea unui nou plug-in TinyMCE

Presupunând că avem deja pluginul nou, atunci trebuie să îl înregistrăm cu WordPress pentru al integra în editorul TinyMCE. Codul este prezentat mai jos:

 add_action ('init', 'wptuts_buttons'); funcția wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons');  funcția wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). '/Wptuts-editor-buttons/wptuts-plugin.js'; retur $ plugin_array;  funcția wptuts_register_buttons ($ butoane) array_push ($ butoane, 'dropcap', 'showrecent'); // dropcap ',' recentposts return $ butoane;

Cârligul important al filtrului mce_external_plugins este folosit pentru a cupla noul plug-in la TinyMCE. Trebuie să transmitem un ID plugin (wptuts) și URL-ul absolut care ne indică wptuts-plugin.js fişier. mce_buttons cârligul este folosit pentru a spune editorului TinyMCE care butoane din pluginul nostru dorim să afișăm. dropcap și showrecent sunt valorile ID ale acestor butoane pe care intenționăm să le creăm. Țineți cont de aceste valori, acestea vor fi utilizate mai târziu.

Configurarea pluginului TinyMCE

În general, cred că cea mai bună modalitate de a extinde sau de a dezvolta ceva pe o platformă este să consultați documentația pentru acea platformă. TinyMCE are propriul wiki pe care îl puteți găsi util. Urmând un exemplu de cum se creează un plugin TinyMCE, avem următorul cod de inițializare:

 (funcția () tinymce.create ('tinymce.plugins.wptuts', / ** * Inițializează plugin-ul, acesta va fi executat după crearea pluginului. * Acest apel este făcut înainte ca instanța editorului să fi terminat inițializarea astfel încât să folosiți evenimentul onInit * al instanței editorului pentru a intercepta acel eveniment. * * @param tinymce.Editor ed Editorul instanței că pluginul este inițializat în. * @param string url URL absolut în locul unde este localizat pluginul. * / init: function (ed, url) , / ** * Creeaza instante de control bazate pe numele incoming.Aceasta metoda nu este in mod normal necesara deoarece metoda addButton a clasei tinymce.Editor este o modalitate mai usoara de a adauga * * @ @ param String n Numele controlului de creat. * @param tinymce.ControlManager  cm Manager de control pentru a folosi inorder pentru a crea un control nou. * @return tinymce.ui.Control New control inst ance sau null dacă nu a fost creat niciun control. * / createControl: funcția (n, cm) return null; , / ** * Returnează informații despre plugin ca nume / valoare matrice. * Cheile curente sunt numele de nume, autorul, autorul, infoula și versiunea. * * @return Object Nume / valoare matrice conținând informații despre plugin. * / getInfo: function () retur nume lung: 'Wptuts Buttons', autor: 'Lee', authorurl: 'http://wp.tutsplus.com/author/leepham', infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ", versiunea:" 0.1 "; ); // Înregistrează pluginul tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) ();

Nu uitați să adăugați acest cod în wptuts-plugin.js fişier. Am lăsat comentariile codului pentru a înțelege cu ușurință ce se întâmplă. Codul de mai sus are doar două sarcini principale:

În primul rând, definirea unui nou plugin TinyMCE într-un mod sigur, prin apelarea lui TinyMCE crea metodă. Comportamentul pluginului nostru va fi definit în init și createControl funcții. Puteți vedea că informațiile pluginului sunt declarate în obtine informatii funcția de asemenea. Pluginul nostru va avea numele Wptuts și ID-ul wptuts după cum puteți vedea.
În cele din urmă, pur și simplu adăugați noul nostru plug-in în TinyMCE Plugin Manager.

Crearea butoanelor

În init funcția, începem să creăm butoanele noastre. Codul văzut după cum urmează:

 (funcția () tinymce.create ('tinymce.plugins.wptuts', init: function (ed, url) ed.addButton ('dropcap' url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Adăugați ultimele postări shortcode', cmd: 'showrecent', imagine: url + '/recent.jpg') // ... Cod ascuns); // Inregistreaza pluginul tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) ();

Prin utilizarea funcției addButton metodă a ed obiect, îi spunem editorului curent că vrem să creăm toate aceste butoane. Această metodă acceptă două argumente:

Primul este ID-ul butonului. În secțiunea anterioară am menționat-o. Trebuie să fie același cu cel pe care l-am definit anterior. În caz contrar, nu va funcționa corect.
Al doilea este obiectul care conține informațiile butonului, cum ar fi:
- Titlul butonului
- Cel mai important: sarcina pe care o va face butonul. Uitați-vă la cmd proprietate, are valoarea lui showrecent. Aceasta este ID-ul comenzii care este executat de fiecare dată când este chemat, vom trece în detaliu în scurt timp
- Imaginea butonului. Rețineți că parametrul URL deține adresa URL a directorului absolut în care este localizat plugin-ul nostru, ceea ce face mai ușor să faceți referire la imaginea pe care o doriți. Deci, trebuie să plasați imaginea în dosarul pluginului și să vă asigurați că numele acestuia este setat exact la imaginede valoare.

Acum, verificați editorul WordPress și vom vedea că apare butoanele noastre. Cu toate acestea, ei nu fac nimic acum.

Butoanele noastre au apărut.

Adăugarea comenzilor butoanelor

Am definit numele comenzilor pe care butoanele noastre le vor executa, dar nu au definit încă ce vor executa. În acest pas, vom seta lucrurile pe care le vor face butoanele noastre. În interiorul init funcția, continuați să adăugați acest cod după cum se arată:

 (funcția () tinymce.create ('tinymce.plugins.wptuts', init: function (ed, url) ed.addButton ('dropcap' url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Adăugați posturi recente shortcode', cmd: 'showrecent', imagine: url + '/recent.jpg'); addCommand ('dropcap', funcția () var select_text = ed.selection.getContent (); var return_text = "; return_text = ''+ select_text +'„; ed.execCommand ('mceInsertContent', 0, return_text); ); ed.addCommand ('showrecent', function () var numărul = prompt ("Câte postări doriți să afișați?"), shortcode; > 0 && număr <= 20)  shortcode = '[recent-post number="' + number + '"/]'; ed.execCommand('mceInsertContent', 0, shortcode);  else  alert("The number value is invalid. It should be from 0 to 20.");   ); , //… Hidden code ); // Register plugin tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts ); )();

Acum ed.addCommand metoda ne va ajuta să adăugăm o comandă nouă. Trebuie să treci ID-ul comenzii și funcția de apel invers care va fi executată dacă a fost apelată de către ed.execCommand metodă. Rețineți că ed reprezintă tinyMCE.activeEditor obiect. Să aruncăm o privire la funcțiile de apel invers:

În dropcap comandă, dorința dorită este când un utilizator selectează o literă și dă clic pe DropCap butonul va fi apoi transformat în formularul cu picătură. Deci, cum obținem acea scrisoare? Ei bine, ed.selection.getContent metoda va face asta pentru noi. Apoi, odată ce am primit scrisoarea, o înfășurăm într-un deschidere element. Nu uitați să setați valoarea de clasă a acestui element dropcap pe care am definit-o inainte, nu? În cele din urmă, avem textul complet care trebuie inserat înapoi în editor. TinyMCE are o comandă implicită cu numele mceInsertContent care se utilizează pentru a insera un anumit conținut în editor, modul de utilizare a acestuia este prezentat mai sus. Conținutul va fi trecut ca al treilea argument al mceInsertContent metodă.
Un lucru similar se întâmplă în showrecent comandă ca în dropcap comandă, cu excepția faptului că nu este nevoie să obțineți conținutul selectat al utilizatorului. Noi pur și simplu afișăm un dialog prin care îi întrebăm pe utilizator cât de multe posturi doresc să apară, apoi inserați valoarea respectivă într-o sintaxă de cod scurt.

Înregistrarea CSS personalizată pentru butoane (opțional)

În loc să adăugați text pur atunci când butoanele inserați conținutul în editorul vizual, putem să îl facem mult mai vizibil prin înregistrarea CSS personalizată pentru butoanele noastre. Depinde de tipul de date de conținut și puteți alege un stil adecvat. De exemplu, ale noastre Dropcappoate avea acelasi stil ca cel prezentat pe front-end. Deci, puteți lua codul său CSS chiar în partea de sus a acestui post, apoi puneți-l în Editor-style.css fișier (pentru implicit, a se vedea add_editor_style pentru detașare).

Pentru codurile scurte, s-ar putea să nu aibă ele însele un element HTML. Cum ar trebui să le formăm? Ei bine, această situație este mult mai complexă pentru a obține rezultatul, dar nu este imposibil deși (puteți vedea unele butoane WordPress implicite, cum ar fi "Adăugați mass-media"). Cu toate acestea, poate fi încă dificil, prin împachetarea acelui cod scurt într-un element HTML și apoi prin styling-ul acelui element la fel ca mai sus. E destul de simplu, nu chiar perfect. În acest post, nu ne vom concentra pe prelucrarea complexă.

Rezultate

În cele din urmă, rezultatele obținute sunt afișate după cum urmează:

Testați butonul Dropcap.

Apoi, pe front-end:

Dropcap letter în front-end.

Iar butonul Mesaje recente funcționează bine:

Postul pentru mesajele recente a funcționat.

Concluzie

Bine, am acoperit o practică care este destul de simplă și ușor de urmărit. S-ar putea să observați că butonul Mesaje recente vă permite să ajustați o setare (numărul de postări care se vor afișa). Cu siguranță știți că am folosit JavaScript-ul implicit, prompt, pentru a realiza acest lucru. Ce se întâmplă dacă doriți un popup mai complex, care are mai multe setări decât unul singur? Ei bine, într-un alt post vom discuta acest lucru și vom încerca o altă abordare.

Orice feedback despre acest post va fi apreciat. Vă mulțumim pentru lectură și vă vom vedea mai târziu.

Referinţă

TinyMCE_Custom_Buttons
Crearea unui plugin TinyMCE

Cod