Opprette Dummy Text i WordPress

Når du utvikler et nytt WordPress-nettsted, vil du ofte legge til litt dummy-tekst på dine innlegg og sider, slik at du kan se hvordan nettstedet vil se ut før innholdet publiseres. I denne opplæringen lærer du hvordan du fremskynder denne prosessen ved å utvikle et plugin som genererer dummy-tekst for deg.

Pluginet du skal opprette, vil legge til en knapp i WYSIWYG-editoren som, når den klikker, åpner et vindu og ber om antall stykker dummy-tekst som skal opprettes. Brukeren vil skrive inn et nummer, og innholdet vil bli satt inn!

Vær oppmerksom på at dette pluginet bruker TinyMCE 4.0-biblioteket, som nylig ble integrert i WordPress 3.9, noe som betyr at dette pluginet bare vil fungere i 3,9 og nyere.

Initialiser plugin

Trinn 1

For å komme i gang, opprett en ny mappe i wp-innhold / tillegg katalog over nettstedet ditt, og gi det en tittel. I denne opplæringen bruker jeg "dummy-text-generator" som tittel, selv om du vil bruke relative lenker i plugin-filene dine, kan dette være noe.

Steg 2

Deretter legger du til en ny PHP-fil i din nye katalog med tittelen på katalogen din, etterfulgt av .php forlengelse. For eksempel, dummy-tekst-generator.php.

Trinn 3

Du må nå varsle WordPress som du har lagt til et nytt plugin på nettstedet ditt, og for å gjøre dette, bør du legge til følgende kode øverst på den nye filen.

Bare denne teksten forteller WordPress hva pluginet ditt kalles, hva det gjør, dets versionsnummer, forfatter og mer. Denne informasjonen kan ses i WordPress-administrasjonen, på Plugins-siden.

Trinn 4

Du bør også opprette en ny katalog i plugin-mappen din, kalt js og opprett en ny fil som heter TinyMCE-plugin.js. Du trenger dette senere, men for nå, la det være tomt.

Trinn 5

Det siste trinnet er å aktivere det nye pluginet ditt, som kan gjøres via plugins side i baksiden av nettstedet ditt. Når du har aktivert pluginet ditt, er du klar til å flytte på koding av pluginet selv.

Legge til funksjonene

Denne plugin bruker noen hovedfunksjoner: en for å sjekke posttypen og inkludere pluginens funksjonalitet når det er på et innlegg eller en side, en for å legge til en knapp i WYSIWYG-editoren, en for å inkludere JavaScript-filen som trengs for pluginet til å fungere, og en initierer knappens handlinger.

Trinn 1

Den første funksjonen vi må inkludere, er den som sjekker hvilken type post vi har å gjøre med, og for å fortelle WordPress at hvis det er et innlegg eller en side, skal plugin begynne å gjøre sitt arbeid.

Denne funksjonen legger også til knappen til redaktøren. Dette kan oppnås med følgende kode, og skal legges direkte etter vår headerinformasjon.

add_action ('admin_head', 'add_tinymce_dummytext'); funksjon add_tinymce_dummytext () global $ typow; // bare på posttype: post og side hvis (! in_array ($ typegods, array ('innlegg', 'side'))) return;  add_filter ('mce_external_plugins', 'add_tinymce_dummytext_plugin'); // Legg til linje 1 skjema WP TinyMCE add_filter ('mce_buttons', 'add_tinymce_dummytext_button');

Steg 2

Den andre funksjonen kaller til JavaScript-filen du laget tidligere, og forteller pluginet der den kan bli funnet.

// inkludere js for tinymce-funksjonen add_tinymce_dummytext_plugin ($ plugin_array) $ plugin_array ['dummytext_plugin'] = plugins_url ('/js/tinymce-plugin.js', __FILE__); returner $ plugin_array;

Trinn 3

Den endelige funksjonen du vil inkludere, initialiserer den nye dummy-tekstknappen i WYSIWYG-editoren, og forteller at den skal skrive ut den på postredigeren.

// Legg til knappetasten for adresse via JS-funksjonen add_tinymce_dummytext_button ($ knapper) array_push ($ buttons, 'dummytext_button'); // Skriv ut alle knapper // var_dump ($ knapper); returner $ knapper;

Trinn 4

Du har nå initialisert alle funksjonene og handlingene du trenger for at pluginet skal fungere. Din PHP-fil skal nå inneholde headerinformasjonen, og alle tre funksjonene du nettopp har opprettet.

Genererer Dummy Text
Dummy-teksten du skal lage er i JavaScript-filen du opprettet tidligere, kalt TinyMCE-plugin.js i js katalog.
Trinn 1
La oss begynne med å fortelle WordPress at vi legger til en funksjon, og at "dummyContent" er lik et HTML-avsnitt som inneholder noen "Lorem ipsum" dummy tekst.
(funksjon () dummyContent = 'Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
';
Steg 2
Du skal nå initialisere 'dummytext_plugin' -funksjonen i redigeringsprogrammet du tidligere har laget i PHP-filen.
 tinymce.PluginManager.add ('dummytext_plugin', funksjon (editor, url) 
Trinn 3
Nå skal du fortelle pluginet for å initialisere knappen for å kunne legge til dummy-teksten i innlegget, og definere feltene og egenskapene.
// Legg til en knapp som åpner et vindu editor.addButton ('dummytext_button', text: 'Dummy Text Generator', ikon: false, onclick: function () // Åpne vindu editor.windowManager.open (title: ' Dummy Text Generator ', body: [type:' textbox ', navn:' nummer ', etikett:' Antall stykker '],
Trinn 4
La oss fortelle pluggen hva du skal gjøre hvis det er oppført et ugyldig nummer, og å sette inn innholdet når informasjonen fra vinduskjemaet er sendt inn.
 onsubmit: funksjon (e) hvis (isNaN (e.data.number)) alert ('Vennligst skriv inn et gyldig nummer'); returnere; // Sett inn innhold når vinduskjemaet er sendt inn for (var i = 0; i < e.data.number; i++)  editor.insertContent( dummyContent );  
Trinn 5
Det siste trinnet er å lukke alle parentesene som ble åpnet under utarbeidelsen av JavaScript-filen, og når du har gjort det, lagre endringene til både PHP og JS-filene.
 ); ); ); ) ();
Trinn 6
Endelig vil JavaScript-filen din se ut som den nedenfor, og du kan nå teste og nyte å bruke pluginet du har laget!
(funksjon () dummyContent = 'Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
'; tinymce.PluginManager.add ('dummytext_plugin', funksjon (editor, url) // Legg til en knapp som åpner et vindu editor.addButton ('dummytext_button', text: 'Dummy Text Generator', ikon: false, onclick: function () // Åpne vindu editor.windowManager.open (title: 'Dummy Text Generator', body: [type: 'textbox', navn: 'nummer', etikett: 'Antall stykker'], onsubmit: funksjon (e) if (isNaN (e.data.number)) alarm ('Vennligst skriv inn et gyldig nummer'); return; // Sett inn innhold når vinduet skjemaet er sendt inn for (var i = 0; < e.data.number; i++)  editor.insertContent( dummyContent );    );   );  );  )();
Oppsummert
Så det er det - du har nå gjort en egen dummy tekst plugin i WordPress ved hjelp av PHP og JavaScript!
Hvis du har spørsmål om dette pluginet, vær så snill å legge igjen en kommentar nedenfor, og jeg vil være sikker på å få deg tilbake.



		
			
	   
	




Kode