Dummy-tekst maken in WordPress

Wanneer u een nieuwe WordPress-site ontwikkelt, wilt u vaak dummy-tekst toevoegen aan uw berichten en pagina's, zodat u kunt zien hoe de site eruitziet voordat de inhoud wordt gepubliceerd. In deze zelfstudie leert u hoe u dit proces versnelt door een plug-in te ontwikkelen die dummy-tekst voor u genereert.

De plug-in die u gaat maken zal een knop toevoegen aan de WYSIWYG-editor die, wanneer erop wordt geklikt, een venster opent en vraagt om het aantal te creëren paragrafen van dummy-tekst. De gebruiker voert een nummer in en de inhoud wordt ingevoegd!

Let op: deze plug-in maakt gebruik van de TinyMCE 4.0-bibliotheek, die onlangs is geïntegreerd in WordPress 3.9, wat betekent dat deze plug-in alleen werkt in 3.9 en nieuwer.

De plug-in initialiseren

Stap 1

Maak een nieuwe map om aan de slag te gaan in de wp-content / plugins map van uw site en geef deze een titel. In deze zelfstudie gebruik ik 'dummy-text-generator' als mijn titel, maar aangezien u relatieve links in uw plug-inbestanden gebruikt, kan dit van alles zijn.

Stap 2

Voeg vervolgens een nieuw PHP-bestand toe in uw nieuwe map met de titel van uw directory, gevolgd door de .php uitbreiding. Bijvoorbeeld, dummy-text-generator.php.

Stap 3

U moet WordPress nu melden dat u een nieuwe plug-in hebt toegevoegd aan uw site en om dit te doen, moet u de volgende code toevoegen aan de bovenkant van uw nieuwe bestand.

Eenvoudig gezegd, deze tekst vertelt WordPress hoe uw plug-in wordt genoemd, wat hij doet, zijn versienummer, auteur en meer. Deze informatie is te zien in de WordPress-beheerder, op de pagina Plug-ins.
Stap 4
U moet ook een nieuwe map maken in de map van uw plug-in, genaamd js en maak een nieuw bestand met de naam tinymce-plugin.js. Je hebt dit later nodig, maar laat het voor nu leeg.
Stap 5
De laatste stap is om uw nieuwe plug-in te activeren, die u kunt doen via de plugins pagina in de backend van uw site. Zodra u uw plug-in hebt geactiveerd, bent u klaar om verder te gaan met het coderen van de plug-in zelf.
De functies toevoegen
Deze plug-in gebruikt een paar hoofdfuncties: een om het berichttype te controleren en de functionaliteit van de plug-in bij een post of pagina, een om een knop toe te voegen aan de WYSIWYG-editor, een om het JavaScript-bestand op te nemen dat nodig is om de plug-in te laten werken, en één initialiseert de acties van de knop.
Stap 1
De eerste functie die we moeten opnemen, is die om te controleren met wat voor soort bericht we te maken hebben, en om WordPress te vertellen dat als het een post of pagina is, de plug-in zou moeten beginnen met zijn werk te doen.
Deze functie voegt ook de knop toe aan de editor. Dit kan worden bereikt met de volgende code en moet direct na onze header-informatie worden toegevoegd.
add_action ('admin_head', 'add_tinymce_dummytext'); functie add_tinymce_dummytext () global $ typenow; // alleen op berichttype: bericht en pagina als (! in_array ($ typenow, array ('post', 'page'))) return;  add_filter ('mce_external_plugins', 'add_tinymce_dummytext_plugin'); // Voeg toe aan regel 1 formulier WP TinyMCE add_filter ('mce_buttons', 'add_tinymce_dummytext_button'); 
Stap 2
De tweede functie roept het JavaScript-bestand aan dat u eerder hebt gemaakt en vertelt de plug-in waar het kan worden gevonden.
// include de js voor tinymce-functie add_tinymce_dummytext_plugin ($ plugin_array) $ plugin_array ['dummytext_plugin'] = plugins_url ('/js/tinymce-plugin.js', __FILE__); return $ plugin_array; 
Stap 3
De laatste functie die je zult zijn, initialiseert je nieuwe dummy-tekstknop in de WYSIWYG-editor en vertelt hem vervolgens om deze uit te printen naar de berichteditor.
// Voeg de knop toe voor adres via JS-functie add_tinymce_dummytext_button ($ buttons) array_push ($ buttons, 'dummytext_button'); // Druk alle knoppen af // var_dump ($ buttons); terug $ -knoppen; 
Stap 4
U hebt nu alle functies en acties geïnitialiseerd die u nodig hebt om de plug-in te laten werken. Uw PHP-bestand zou nu de header-informatie moeten bevatten en alle drie de functies die u zojuist hebt gemaakt.
De dummytekst genereren
De dummy-tekst die je gaat maken, staat in het JavaScript-bestand dat je eerder hebt gemaakt, genaamd tinymce-plugin.js in de js directory.
Stap 1
Laten we beginnen met WordPress te vertellen dat we een functie toevoegen, en dat 'dummyContent' gelijk is aan een HTML-paragraaf met wat dummy-tekst 'Lorem ipsum'.
(function () dummyContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
';
Stap 2
Je gaat nu de 'dummytext_plugin'-functie initialiseren in de editor die je eerder in het PHP-bestand hebt gemaakt.
 tinymce.PluginManager.add ('dummytext_plugin', function (editor, url) 
Stap 3
Nu ga je de plug-in laten weten dat je de knop moet initialiseren om de dummy-tekst in de post te kunnen invoegen en de velden en eigenschappen ervan te kunnen definiëren..
// Voeg een knop toe die een venstereditor opent.addButton ('dummytext_button', text: 'Dummy Text Generator', icon: false, onclick: function () // Open window editor.windowManager.open (title: ' Dummy Text Generator ', body: [type:' textbox ', name:' number ', label:' Number of Paragraphs '],
Stap 4
Laten we de plug-in vertellen wat te doen als er een ongeldig nummer is ingevoerd en om de inhoud in te voegen wanneer de informatie uit het vensterformulier wordt ingediend.
 onsubmit: function (e) if (isNaN (e.data.number)) alert ('Vul een geldig nummer in'); return; // Inhoud invoegen wanneer het vensterformulier wordt verzonden (var i = 0; i < e.data.number; i++)  editor.insertContent( dummyContent );  
Stap 5
De laatste stap is om alle haakjes te sluiten die werden geopend tijdens het maken van het JavaScript-bestand, en als je dat eenmaal hebt gedaan, sla je je wijzigingen op in zowel de PHP- als JS-bestanden.
 ); ); ); ) ();
Stap 6
Ten slotte zal uw JavaScript-bestand er ongeveer zo uitzien als hieronder, en u kunt nu testen en genieten van het gebruik van de plug-in die u hebt gemaakt!
(function () dummyContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
'; tinymce.PluginManager.add ('dummytext_plugin', functie (editor, url) // Voeg een knop toe die een venster-editor opent.addButton ('dummytext_button', text: 'Dummy Text Generator', icon: false, onclick: function () // Open venster editor.windowManager.open (title: 'Dummy Text Generator', body: [type: 'textbox', name: 'number', label: 'Number of Paragraphs'], onsubmit: functie (e) if (isNaN (e.data.number)) alert ('Vul een geldig nummer in'); return; // Voeg inhoud toe wanneer het vensterformulier wordt verzonden (var i = 0; i < e.data.number; i++)  editor.insertContent( dummyContent );    );   );  );  )();
Samengevat
Dus dat is het - u hebt nu met succes uw eigen dummy-tekstplugin gemaakt in WordPress met behulp van PHP en JavaScript!
Als u vragen over deze plug-in heeft, kunt u hieronder een reactie achterlaten en ik zal u zeker terugbellen.



		
			
	   
	




Code