Share
Aujourd'hui, nous allons commencer la mini-série sur la façon d'insérer des messages via le front-end. Nous allons couvrir une variété d'aspects différents dans ce tutoriel, en commençant par la validation de formulaire et l'insertion de posts. Alors, préparons-nous et commençons!
Notre objectif, une fois cette mini-série terminée, devrait permettre à l’utilisateur de soumettre des messages via le serveur frontal, de les éditer et de les envoyer à la corbeille; le tout sans être dans le tableau de bord WordPress. Ces méthodes peuvent être utilisées dans un thème ou un plugin et être très adaptables pour réaliser des soumissions très avancées et complexes.
La démo et les fichiers à télécharger constituent un thème simplifié créé uniquement pour les besoins de ce didacticiel..
Alors ouvrez votre éditeur de texte préféré et commençons!
Nous commençons par créer un formulaire qui permettra à l'utilisateur d'entrer les détails relatifs à la création d'un message. Pendant que nous construisons ceci dans un thème, commençons par créer un nouveau modèle de page et appelons-le. template-insert-posts.php. Nous commencerons ensuite à construire notre formulaire et à insérer des étiquettes et des champs de saisie pour le titre de l'article et la zone de texte pour le corps:
Ce que nous venons de créer est un formulaire très simple comportant une entrée de texte permettant à l'utilisateur de saisir le titre et une zone de texte pour le contenu du message..
Maintenant que nos bases sont définies, nous devrons procéder à une validation du formulaire afin de nous assurer que le contenu est correct et que nous n'avons pas d'attaque malveillante contre nos envois..
Nous utiliserons deux formes de validation différentes. Nous utiliserons le plug-in de validation jQuery, ainsi que la validation PHP traditionnelle. Commençons par le côté jQuery de la validation et initialisons notre script de validation. Nous veillerons à enregistrer et à mettre en file d'attente les scripts au sein de notre functions.php fichier. Parallèlement à cela, nous allons créer un fichier JavaScript vierge dans lequel nous traiterons l’ensemble de notre jQuery personnalisé; n'oubliez pas de vous inscrire et de mettre en file d'attente ce fichier pour l'initialisation. Cela devrait ressembler à ceci:
Accentsconagua
// jquery personnalisé wp_register_script ('custom_js', get_template_directory_uri (). '/js/jquery.custom.js', array ('jquery'), '1.0', TRUE); wp_enqueue_script ('custom_js'); // validation wp_register_script ('validation', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js', array ('jquery')); wp_enqueue_script ('validation'); Génial, nous avons enregistré et mis en file d'attente tous nos scripts nécessaires. Nous allons maintenant ouvrir notre fichier jQuery personnalisé et commencer à initialiser notre plug-in de validation jQuery; nous allons ouvrir notre fichier JavaScript vierge et écrire la ligne de code suivante pour créer notre validation jQuery:
jQuery (document) .ready (function () jQuery ("# primaryPostForm"). validate ();); Tout ce que nous avons fait ici est d’obtenir l’ID de notre formulaire et d’appliquer le valider méthode à cela. Maintenant que nous avons cela en place, nous allons revenir à notre template-insert-posts.php déposer et veiller à ce que nous avons mis la Champs obligatoires classe dans les champs de saisie requis.
Toute la validation de jQuery est en place, passons à la validation de PHP.
Notre validation doit nous assurer que nous entrons un titre, et si la validation jQuery échoue, alors elle reviendra à la validation PHP. Nous faisons cela en créant d’abord une variable PHP pour stocker le message d’erreur, puis en créant des tests conditionnels..
Nous testons initialement si l'utilisateur a soumis le formulaire, puis si notre variable de message d'erreur PHP est vide. Nous devons insérer le code suivant qui le fait juste au-dessus de notre :
Notre validation PHP est en place, nous allons nous assurer que la valeur que nous soumettons est identique à celle saisie par l'utilisateur, et nous le faisons en insérant le code suivant dans notre titre de l'article champ de saisie:
valeur = ""
Nous devons également faire de même pour notre zone de texte, mais cela fonctionne légèrement différemment. au lieu de définir une valeur, nous insérons le code suivant dans notre Publier un contenu étiquettes textarea:
Enfin, nous devons nous assurer que nous produisons notre message d'erreur, et nous le faisons en vérifiant si notre variable de message d'erreur est vide. Si notre variable n'est pas vide, alors le message en sortie, sinon rien en sortie. Le code suivant réalise ceci:
Maintenant que nous avons configuré notre formulaire avec validation, nous pouvons passer à l’insertion du contenu dans un message. Allons-nous en…
Nous allons maintenant soumettre nos données de formulaire dans un message réel. Nous faisons cela en utilisant la fonction WordPress wp_insert_post. Cette fonction nous permet d’insérer des posts, nous allons donc l’utiliser à notre avantage.
Nous commençons par créer d'abord une variable pour contenir tous nos différents éléments. Vous pouvez définir tout un ensemble d'éléments différents et vous pouvez en savoir plus sur WordPress Codex. Insérez le code suivant, juste en dessous du code de validation de votre formulaire:
$ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' => $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'en attente '); wp_insert_post ($ post_information); Le code que nous venons d'insérer crée un tableau et attribue des valeurs aux différents éléments. Pour le titre de l'article élément, nous postons notre titre de l'article valeur, et nous postons notre Publier un contenu à notre Publier un contenu élément.
Nous avons également défini notre type de message sur poster, car nous soumettrons le type de publication par défaut, mais vous pouvez transmettre n'importe quel type de publication personnalisé à ce champ. Enfin, nous mettons en attente le statut de la publication afin que l’administrateur puisse la confirmer avant de la publier..
Nous courons ensuite la fonction wp_insert_post et passer notre tableau avec tous nos éléments et les données qui leur sont attribuées.
C'est tout! Nous sommes maintenant en mesure d’ajouter des publications via le front-end, mais nous n’avons pas encore terminé. Nous avons des problèmes de sécurité à compenser. Nous commençons par insérer un wp_nonce_field. Si vous ne savez pas ce qu'est un champ nonce, le codex WordPress l'explique à la perfection:
Le champ nonce est utilisé pour valider que le contenu du formulaire provient de l'emplacement sur le site actuel et pas ailleurs.
Cela nous aidera à lutter contre les problèmes de sécurité et à prévenir les attaques malveillantes. Tout ce que nous avons à faire est d’insérer le code suivant juste avant notre bouton de soumission:
Parallèlement, nous allons modifier notre validation de formulaire pour nous assurer que nous ne soumettons le contenu que lorsque le champ nonce a été confirmé que nous soumettons le contenu du site Web. Pour ce faire, nous remplaçons notre déclaration conditionnelle de validation. Votre code final avec validation et soumission des données doit être comme suit:
if (isset ($ _POST ['soumis']) && isset ($ _POST ['post_nonce_field'])) && wp_verify_nonce ($ _POST ['post_nonce_field'], 'post_nonce')) if (trim ($ _POST ['postTitle') ]) === ") $ postTitleError = 'Veuillez entrer un titre.'; $ hasError = true; $ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' = > $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'en attente'); wp_insert_post ($ post_information); Enfin, juste pour un extra, nous allons définir une redirection une fois que l'utilisateur a soumis les informations, afin que les utilisateurs ne puissent pas appuyer sur Envoyer plusieurs fois et continuer à entrer les mêmes données dans nos publications. Nous allons le faire à un niveau très basique.
Comme wp_insert_post retourne un identifiant que nous utiliserons à notre avantage et le renverra en une variable que nous utiliserons pour nous assurer que nous ne redirigeons pas si aucune publication n'a été créée.
Nous ferons cela en assignant notre wp_insert_post fonction à une variable, comme suit:
$ post_id = wp_insert_post ($ post_information);
Nous allons ensuite exécuter une instruction conditionnelle pour rediriger uniquement si nous avons un identifiant de publication, puis utiliser le WordPress réorienter fonction et passe le home_url pour ça. Le code que vous allez insérer est le suivant:
if ($ post_id) wp_redirect (home_url ()); sortie;
Terminé…
Ce sont les bases et les principes fondamentaux sur la façon d'insérer des messages via le front-end. Nous avons beaucoup couvert, en créant d'abord un formulaire, en le validant et en soumettant nos données à un message en attente.!
Dans la partie suivante, nous approfondirons un peu l’édition et la suppression de messages via le front-end, ce qui devient un peu plus compliqué, mais cela peut être très utile.!
Je voudrais dire un énorme merci pour passer le temps de lire mon tutoriel, j'espère que cela a aidé. N'hésitez pas à laisser des commentaires et je ferai de mon mieux pour vous aider et y répondre. Sinon, vous pouvez toujours me contacter directement via mon site Web: www.VinnySingh.co ou Twitter @VinnySinghUK.
Restez à l'écoute pour la partie 2!
