Share
Lorsque vous développez un nouveau site WordPress, vous voudrez souvent ajouter du texte factice à vos publications et à vos pages afin que vous puissiez voir à quoi le site ressemblera avant la publication du contenu. Dans ce tutoriel, vous apprendrez à accélérer ce processus en développant un plugin qui génère du texte factice pour vous..
Le plugin que vous allez créer ajoutera un bouton à l'éditeur WYSIWYG qui, une fois cliqué dessus, ouvrira une fenêtre et demandera le nombre de paragraphes de texte factice à créer. L'utilisateur entrera un numéro et le contenu sera inséré!
Veuillez noter que ce plugin utilise la bibliothèque TinyMCE 4.0, récemment intégrée à WordPress 3.9, ce qui signifie que ce plugin ne fonctionnera que dans les versions 3.9 et plus récentes..
Pour commencer, créez un nouveau dossier dans le dossier wp-content / plugins répertoire de votre site, et lui donner un titre. Dans ce didacticiel, je vais utiliser «Dummy-text-generator» comme titre, mais comme vous utiliserez des liens relatifs dans vos fichiers de plug-in, cela pourrait être n'importe quoi..
Ensuite, ajoutez un nouveau fichier PHP dans votre nouveau répertoire avec le titre de votre répertoire, suivi du .php extension. Par exemple, dummy-text-generator.php.
Vous devez maintenant notifier à WordPress que vous avez ajouté un nouveau plugin à votre site. Pour ce faire, vous devez ajouter le code suivant en haut de votre nouveau fichier..
Simplement, ce texte indique à WordPress comment s'appelle votre plugin, ce qu'il fait, son numéro de version, son auteur et plus. Cette information peut être vue dans l’administrateur WordPress, sur la page Plugins.
Étape 4
Vous devez également créer un nouveau répertoire dans le dossier de votre plugin, appelé
jset créez un nouveau fichier appelétinymce-plugin.js. Vous en aurez besoin plus tard, mais pour le moment, laissez le champ vide..Étape 5
La dernière étape consiste à activer votre nouveau plugin, ce qui peut être fait via le Plugins page dans le backend de votre site. Une fois que vous avez activé votre plugin, vous êtes prêt à coder le plugin lui-même..
Ajout des fonctions
Ce plugin utilise plusieurs fonctions principales: une pour vérifier le type de message et l'inclure dans un message ou une page, une pour ajouter un bouton à l'éditeur WYSIWYG, une pour inclure le fichier JavaScript nécessaire au fonctionnement du plug-in, et on initialise les actions du bouton.
Étape 1
La première fonction à inclure est celle de vérifier le type de message que nous traitons et d'indiquer à WordPress que s'il s'agit d'un message ou d'une page, le plug-in doit commencer à faire son travail.
Cette fonction ajoute également le bouton à l'éditeur. Ceci peut être réalisé avec le code suivant, et devrait être ajouté directement après nos informations d'en-tête.
add_action ('admin_head', 'add_tinymce_dummytext'); fonction add_tinymce_dummytext () global $ typenow; // uniquement sur Post Type: post et page if (! in_array ($ typenow, array ('post', 'page')))) return; add_filter ('mce_external_plugins', 'add_tinymce_dummytext_plugin'); // Ajouter à la ligne 1 de la forme WP TinyMCE add_filter ('mce_buttons', 'add_tinymce_dummytext_button');Étape 2
La deuxième fonction appelle le fichier JavaScript que vous avez créé précédemment et indique au plug-in où il se trouve..
// inclut le js pour la fonction tinymce add_tinymce_dummytext_plugin ($ plugin_array) $ plugin_array ['dummytext_plugin'] = plugins_url ('/js/tinymce-plugin.js', __FILE__); return $ plugin_array;Étape 3
La dernière fonction que vous serez en train d'inclure initialise votre nouveau bouton de texte factice dans l'éditeur WYSIWYG, puis lui indique de l'imprimer dans l'éditeur de publication..
// Ajoute la clé de bouton pour l'adresse via la fonction JS add_tinymce_dummytext_button ($ buttons) array_push ($ buttons, 'dummytext_button'); // Imprimer tous les boutons // var_dump ($ buttons); retourne les boutons $;Étape 4
Vous avez maintenant initialisé toutes les fonctions et actions dont vous avez besoin pour que le plugin fonctionne. Votre fichier PHP doit maintenant contenir les informations d’en-tête et les trois fonctions que vous venez de créer..
Générer le texte factice
Le texte factice que vous allez créer se trouve dans le fichier JavaScript créé précédemment, appelé
tinymce-plugin.jsdans lejsannuaire.Étape 1
Commençons par dire à WordPress que nous ajoutons une fonction et que "dummyContent" est égal à un paragraphe HTML contenant du texte factice "Lorem ipsum"..
(function () dummyContent = 'Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit 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.
';Étape 2
Vous allez maintenant initialiser la fonction 'dummytext_plugin' dans l'éditeur que vous avez créé précédemment dans le fichier PHP.
tinymce.PluginManager.add ('dummytext_plugin', fonction (éditeur, url)Étape 3
Maintenant, vous allez dire au plug-in d'initialiser le bouton pour pouvoir ajouter le texte factice dans la publication et définir ses champs et propriétés..
// Ajout d'un bouton ouvrant une fenêtre editor.addButton ('dummytext_button', text: 'Générateur de texte factice', icon: false, onclick: function () // Ouvre une fenêtre editor.windowManager.open (title: ' Générateur de texte factice ', corps: [type:' zone de texte ', nom:' numéro ', libellé:' Nombre de paragraphes '],Étape 4
Indiquons au plug-in quoi faire si un nombre non valide est entré et comment insérer le contenu lorsque les informations du formulaire de fenêtre sont soumises.
onsubmit: function (e) if (isNaN (e.data.number)) alert ('Veuillez entrer un nombre valide'); return; // Insérer le contenu lorsque le formulaire de fenêtre est soumis pour (var i = 0; i < e.data.number; i++) editor.insertContent( dummyContent );Étape 5
La dernière étape consiste à fermer tous les crochets ouverts lors de la création du fichier JavaScript. Une fois cette opération effectuée, enregistrez vos modifications dans les fichiers PHP et JS..
); ); ); ) ();Étape 6
Enfin, votre fichier JavaScript ressemblera à celui ci-dessous et vous pourrez maintenant tester et utiliser le plugin que vous avez créé.!
(function () dummyContent = 'Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit 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', fonction (éditeur, url) // Ajouter un bouton ouvrant une fenêtre editor.addButton ('dummytext_button', texte: 'Générateur de texte factice', icône: false, onclick: fonction () // Ouvre une fenêtre editor.windowManager.open (titre: 'Générateur de texte factice', corps: [type: 'zone de texte', nom: 'numéro', libellé: 'Nombre de paragraphes'], à envoyer: function (e) if (isNaN (e.data.number)) alert ('Veuillez entrer un nombre valide'); return; // Insérer le contenu lorsque le formulaire de fenêtre est soumis pour (var i = 0; i < e.data.number; i++) editor.insertContent( dummyContent ); ); ); ); )();En résumé
Voilà donc, vous avez réussi à créer votre propre plugin de texte factice dans WordPress en utilisant PHP et JavaScript.!
Si vous avez des questions sur ce plugin, n'hésitez pas à laisser un commentaire ci-dessous et je ne manquerai pas de vous revenir.
Accentsconagua