Crearea textului dummy în WordPress

Atunci când dezvoltați un nou site WordPress, veți dori adesea să adăugați niște texte inactive în postările și paginile dvs. pentru a vedea cum va arăta site-ul înainte de publicarea conținutului. În acest tutorial, veți învăța cum să accelerați acest proces prin dezvoltarea unui plugin care generează un text inactiv pentru dvs..

Pluginul pe care îl creați va adăuga un buton editorului WYSIWYG care, când se face clic, va deschide o fereastră și va cere numărul de paragrafe ale textului inactiv pentru a crea. Utilizatorul va introduce un număr, iar conținutul va fi introdus!

Rețineți că acest plugin utilizează biblioteca TinyMCE 4.0, care a fost recent integrată în WordPress 3.9, ceea ce înseamnă că acest plugin va funcționa doar la 3.9 și mai recent.

Inițializarea pluginului

Pasul 1

Pentru a începe, creați un nou dosar în wp-content / plugins directorul site-ului dvs. și dați-i un titlu. În acest tutorial, voi folosi "dummy-text-generator" drept titlul meu, deși, pe măsură ce veți folosi link-uri relative în fișierele plugin-ului, acesta ar putea fi orice.

Pasul 2

Apoi, adăugați un nou fișier PHP în noul dvs. director cu titlul directorului dvs., urmat de .php extensie. De exemplu, dummy text-generator.php.

Pasul 3

Acum trebuie să notificați WordPress că ați adăugat un nou plugin pe site-ul dvs. și, pentru a face acest lucru, trebuie să adăugați următorul cod în partea de sus a fișierului dvs. nou.

Pur și simplu, acest text îi spune WordPress ce este numit pluginul dvs., ce face, numărul versiunii, autorul și multe altele. Aceste informații pot fi văzute în administratorul WordPress, pe pagina Plugins.
Pasul 4
De asemenea, trebuie să creați un nou director în dosarul pluginului, numit js și să creați un nou fișier numit TinyMCE-plugin.js. Veți avea nevoie de asta mai târziu, dar deocamdată, lăsați-o goală.
Pasul 5
Ultimul pas este să activezi noul plugin, care se poate face prin Plugin-uri pagină din backend-ul site-ului dvs. Odată ce ați activat plugin-ul, sunteți gata să treceți la codarea pluginului propriu-zis.
Adăugarea funcțiilor
Acest plugin utilizează câteva funcții principale: unul pentru a verifica tipul de postare și include funcționalitatea plugin-ului atunci când este într-o postare sau o pagină, unul pentru a adăuga un buton editorului WYSIWYG, unul pentru a include fișierul JavaScript necesar ca pluginul să funcționeze și una inițializează acțiunile butonului.
Pasul 1
Prima funcție pe care trebuie să o includem este aceea de a verifica ce fel de post avem de-a face și de a spune WordPress că dacă este un post sau o pagină, plugin-ul ar trebui să înceapă să-și facă munca.
Această funcție adaugă, de asemenea, butonul editorului. Acest lucru se poate realiza cu următorul cod și ar trebui adăugat imediat după informațiile din antetul nostru.
add_action ('admin_head', 'add_tinymce_dummytext'); funcția add_tinymce_dummytext () global $ typenow; // numai pe tipul mesajului: post și pagină dacă (! in_array ($ typenow, array ('post', 'page'))) return;  add_filter ('mce_external_plugins', 'add_tinymce_dummytext_plugin'); // adăugați la formularul de linie 1 WP TinyMCE add_filter ('mce_buttons', 'add_tinymce_dummytext_button'); 
Pasul 2
A doua funcție face apel la fișierul JavaScript pe care l-ați făcut mai devreme și îi spune pluginului unde poate fi găsit.
// include funcția js pentru tinymce add_tinymce_dummytext_plugin ($ plugin_array) $ plugin_array ['dummytext_plugin'] = plugins_url ('/js/tinymce-plugin.js', __FILE__); retur $ plugin_array; 
Pasul 3
Funcția finală pe care o veți include include inițializarea noului buton de text fictiv în editorul WYSIWYG și apoi îi spune să-l imprime în editorul post.
// Adăugați butonul pentru adresă prin intermediul funcției JS add_tinymce_dummytext_button ($ butoane) array_push ($ butoane, 'dummytext_button'); // Tipăriți toate butoanele // var_dump ($ buttons); returnați butoanele $; 
Pasul 4
Acum ați inițializat toate funcțiile și acțiunile de care aveți nevoie pentru ca pluginul să funcționeze. Fișierul dvs. PHP ar trebui să conțină acum informațiile despre antet și toate cele trei funcții pe care tocmai le-ați creat.
Generarea textului dummy
Textul fictiv pe care îl veți face este în fișierul JavaScript pe care l-ați creat mai devreme, numit TinyMCE-plugin.js în js director.
Pasul 1
Să începem prin a spune WordPress că adăugăm o funcție și că "dummyContent" este egal cu un paragraf HTML care conține un text inactiv "Lorem ipsum".
(funcția () dummyContent = '
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
„;
Pasul 2
Veți inițializa funcția "dummytext_plugin" în editorul pe care l-ați făcut mai devreme în fișierul PHP.
 tinymce.PluginManager.add ('dummytext_plugin', funcție (editor, url) 
Pasul 3
Acum, veți spune pluginul să inițieze butonul pentru a putea adăuga textul inactiv în post și pentru a defini câmpurile și proprietățile acestuia.
// Adăugați un buton care deschide o fereastră editor.addButton ("dummytext_button", text: "Dummy Text Generator", icon: false, onclick: function () // Open window editor.windowManager.open (title: Dummy Generator de text ", corp: [tip: 'textbox', nume: 'număr', etichetă: 'Număr de paragrafe'],
Pasul 4
Să spunem pluginului ce trebuie să facă în cazul în care este introdus un număr nevalid și să inserați conținutul atunci când sunt trimise informațiile din formularul de fereastră.
 onsubmit: funcția (e) if (isNaN (e.data.number)) alertă ("Introduceți un număr valid"); retur; // Introduceți conținutul atunci când formularul de fereastră este trimis pentru (var i = 0; i < e.data.number; i++)  editor.insertContent( dummyContent );  
Pasul 5
Ultimul pas este să închideți toate parantezele care au fost deschise la crearea fișierului JavaScript și, odată ce ați făcut acest lucru, salvați modificările atât în ​​fișierele PHP, cât și în fișierele JS.
 ); ); ); ) ();
Pasul 6
În cele din urmă, fișierul dvs. JavaScript va arăta cam ca cel de mai jos, iar acum puteți testa și vă bucurați de pluginul pe care l-ați făcut!
(funcția () dummyContent = '
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
„; tinymce.PluginManager.add ('dummytext_plugin', funcție (editor, url) // Adăugați un buton care deschide o fereastră editor.addButton ('dummytext_button', text: 'Dummy Text Generator', icon: false, onclick: () // Open window editor.windowManager.open (title: "Generator de text dummy", corp: [type: 'textbox', nume: 'number', label: 'Number of Paragraphs'], onsubmit: funcția (e) if (isNaN (e.data.number)) alertă ('Introduceți un număr valid'); < e.data.number; i++)  editor.insertContent( dummyContent );    );   );  );  )();
În concluzie
Deci asta a fost - acum v-ati creat propriul plug-in text in WordPress folosind PHP si JavaScript!
Dacă aveți întrebări în legătură cu acest plugin, vă rugăm să nu lăsați un comentariu de mai jos și voi fi sigur că te-am întors.



		
			
	   
	




Cod