Autoriser les utilisateurs à soumettre à votre site WordPress un plugin de citations

Dans ce didacticiel, vous apprendrez à créer un plug-in permettant aux utilisateurs de soumettre des données de formulaire. Vous apprendrez également la sécurité en utilisant des nonces.


Ce que vous apprendrez

  • Comment afficher et traiter un formulaire à l'aide d'un shortcode
  • Utiliser des nonces pour sécuriser les soumissions des utilisateurs

C'est plus simple que vous ne le pensez

Les codes abrégés sont souvent utilisés pour afficher des données simples, mais comme ils constituent en fait un moyen de sortir d'une page ou de publier et d'exécuter du code, ils peuvent être utilisés pour des tâches assez complexes, telles que l'affichage et le traitement de formulaires..

Nous allons construire un plugin qui permettra aux utilisateurs connectés de:

  • soumettre des devis pour modération et publication
  • voir leurs citations inédites
  • supprimer leurs citations non publiées

Voici ce que nous visons:

Tout le code est disponible dans le source du plugin en haut de ce tutoriel.


Étape 1 Configurer le plugin

Le dossier du plugin WordPress se trouve dans votre dossier d’installation WordPress à wp-content / plugins. Créez un dossier dans le dossier plugins. Appelons ça soumets-utilisateurs-soumissions. Maintenant, créez le fichier de plugin lui-même. Appelons ça submit_user_quotes.php. Le chemin d'accès à votre fichier de plugin devrait maintenant être: wp-content / plugins / submit-user-quotes / submit_user_quotes.php

Chaque plugin Wordpress nécessite des informations d’en-tête afin que WordPress puisse l’identifier et le rendre disponible sur votre page de plugin de tableau de bord.

  

Vous pouvez modifier cette information selon vos propres exigences.

Vous verrez le plugin répertorié comme ceci:


Étape 2 Fonction d'initialisation du plugin

Nous allons créer un type de publication personnalisé nommé Citations pour contenir nos citations et une taxonomie personnalisée nommée quote_category. Cela permettra une administration plus propre des citations que de les attribuer simplement à des publications et à des catégories normales..

Le crochet et la fonction init

Nous utiliserons le code d'initialisation suivant pour créer notre type de publication personnalisé et notre taxonomie personnalisée:

 add_action ('init', 'suq_plugin_init'); function suq_plugin_init () $ quote_type_labels = array ('nom' => _x ('Citations', 'nom général du type de message'), 'nom_s singulier' => _x ('devis', 'nom singulier du type de message'), 'add_new '=> _x (' Ajouter un nouveau devis ',' devis '),' add_new_item '=> __ (' Ajouter un nouveau devis '),' edit_item '=> __ (' Modifier le devis '),' new_item '=> __ ( 'Ajouter un nouveau devis'), 'all_items' => __ ('Visualiser les devis'), 'view_item' => __ ('Voir le devis'), 'search_items' => __ ('Rechercher des devis'), 'not_found' = > __ ('Aucune citation trouvée'), 'not_found_in_trash' => __ ('Aucune citation trouvée dans la corbeille'), 'parent_item_colon' => ", 'nom_menu' => 'Citations'); $ quote_type_args = array ('labels '=> $ quote_type_labels,' public '=> true,' query_var '=> true,' rewrite '=> true,' capacite_type '=>' post ',' has_archive '=> true,' hiérarchique '=> false, 'menu_position' => null, 'supports' => array ('title', 'editor', 'author')); register_post_type ('quotes', $ quote_type_args); $ quote_category_labels = array ('name' => _x ( 'Catégories de citation', 'nom général de la taxonomie'), 'nom_s singulier' => _x ( 'Citation', 'nom singulier de taxonomie'), 'search_items' => __ ('Catégories de devis de recherche'), 'all_items' => __ ('Toutes les catégories de devis'), 'parent_item' => __ ('Catégorie de devis parent '),' parent_item_colon '=> __ (' Catégorie de devis parent: '),' edit_item '=> __ (' Modifier la catégorie de devis '),' update_item '=> __ (' Mettre à jour la catégorie de devis '),' add_new_item '= > __ ('Ajouter une nouvelle catégorie de devis'), 'new_item_name' => __ ('Nouveau nom de devis'), 'menu_name' => __ ('Catégories de devis'),); $ quote_category_args = array ('hierarchical' => true, 'labels' => $ quote_category_labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array ('slug' => 'quote_category') ,); register_taxonomy ('quote_category', tableau ('quotes'), $ quote_category_args); $ default_quote_cats = array ('humour', 'politique', 'sport', 'philosophie'); foreach ($ default_quote_cats as $ cat) if (! term_exists ($ cat, 'quote_category')) wp_insert_term ($ cat, 'quote_category'); 

Ce que fait ce code:

  • utilise le hook d’action WordPress init pour appeler une fonction d’initialisation du plugin
  • enregistre un type de message personnalisé nommé Citations
  • enregistre une taxonomie personnalisée nommée quote_category et l'assigne au type de publication Quotes
  • ajoute des catégories par défaut à la taxonomie quote_category si elles n'existent pas déjà

Nous aurons maintenant un menu Citations dans notre tableau de bord administrateur et un moyen de gérer les citations et leurs catégories..


Étape 3 Définir un code court

Ensuite, nous définirons un code court qui nous permettra d’afficher (et de traiter) le formulaire de soumission de l’utilisateur dans un message ou une page:

 add_shortcode ('suq_form', 'suq_form_shortcode');

Ici, nous utilisons la fonction add_shortcode de WordPress pour définir un shortcode nommé suq_form et une fonction nommée suq_form_shortcode qui sera appelée chaque fois que WordPress rencontre le shortcode [suq_form] dans une publication ou une page..

Avant d’examiner les fonctions d’affichage et de traitement des formulaires, parlons un peu de?


Sécurité

Parce que notre plugin accepte les données de l'utilisateur, nous implémentons les mécanismes de sécurité suivants:

  • seuls les utilisateurs connectés ont accès au formulaire de soumission
  • nous utilisons des nonces pour vérifier que les formulaires ont été générés par notre plugin
  • les citations sont soumises à l'aide de wp_insert_post, qui nettoie les données avant de les enregistrer dans la base de données
  • les utilisateurs peuvent uniquement afficher leurs propres devis, et les nonces les empêchent de supprimer les devis des autres utilisateurs

Nonces

Un nonce est un numéro utilisé une fois. Nous les utilisons pour vérifier que les données qui nous sont retournées proviennent des formulaires que nous avons créés..

Ici, nous générons un champ nonce en utilisant wp_nonce_field qui sera inclus dans notre formulaire en tant que champ caché:

 wp_nonce_field ('suq_form_create_quote', 'suq_form_create_quote_submitted');

Comme il s'agit maintenant d'un champ caché dans notre formulaire, il nous sera renvoyé une fois le formulaire envoyé. Nous pouvons ensuite vérifier que le nonce est valide en utilisant wp_verify_nonce:

 wp_verify_nonce ($ _ POST ['suq_form_create_quote_submitted'], 'suq_form_create_quote'))

Cela reviendra vrai si le nonce vérifie.


Étape 4 La fonction principale

C'est la fonction appelée par notre shortcode. Il affiche et traite le formulaire de soumission de devis et le formulaire d'inscription / suppression de devis. Nous allons le prendre par morceaux et à l'étape 5, nous examinerons les fonctions d'assistance.

 fonction suq_form_shortcode () if (! is_user_logged_in ()) return '

Vous devez être connecté pour poster un devis.

'; global $ current_user;
  • vérifier si l'utilisateur est connecté
  • récupérer la variable WordPress $ current_user dont nous aurons besoin pour obtenir notre ID utilisateur
 if (isset ($ _POST ['suq_form_create_quote_submitted']) && wp_verify_nonce ($ _ POST ['suq_form_create_quote_submitted'], 'suq_form_create_quote')) $ suq_form_quote_auter (rédiger une offre de vente) $ suq_quote_text = trim ($ _ POST ['suq_quote_text']); if ($ suq_quote_author! = "&& $ suq_quote_text! =") $ quote_data = array ('post_title' => $ suq_quote_author, 'post_content' => $ suq_quote_text, 'post_status' => 'pending', 'post_author' => $ current_user-> ID, 'post_type' => 'quotes'); if ($ quote_id = wp_insert_post ($ quote_data)) wp_set_object_terms ($ quote_id, (int) $ _ POST ['suq_quote_category'], 'quote_category'); écho '

Devis créé et en attente de modération!

'; else // l'auteur ou le champ de texte est vide echo '

Citation NON enregistrée! Qui dit ça? et la citation ne doit pas être vide.

';
  • si le formulaire de création de devis a été soumis, il y aura un champ suq_form_create_quote_submitted généré par notre fonction wp_nonce_field. Nous pouvons ensuite vérifier le nonce et procéder au traitement du devis soumis.
  • faire une validation de base en s'assurant que les champs de texte de l'auteur et du devis ont tous les deux quelque chose dedans, sinon afficher un message d'erreur
  • construit un tableau en définissant le statut de la publication sur en attente (l'administrateur doit maintenant l'approuver pour publication), en définissant le type de publication sur guillemets (notre type de publication personnalisé) et en définissant l'auteur de la citation sur l'utilisateur actuellement connecté
  • si le devis a été inséré avec succès, définissez la catégorie du devis et affichez un message de réussite
 if (isset ($ _POST ['suq_form_delete_submitted'])) && wp_verify_nonce ($ _ POST ['suq_form_delete_submitted'], 'soq_form_delete'), 's' 'soq_form_delete_submitted']) $ _POST ['suq_delete_id'])) echo '

'. $ quotes_deleted. 'devis supprimé!

';
  • Si le formulaire de suppression de devis a été soumis, il y aura un champ suq_form_delete_submitted généré par notre fonction wp_nonce_field. Nous pouvons ensuite vérifier le nonce et procéder au traitement du tableau de citations vérifiées pour la suppression.
  • nous vérifions que nous avons bien vérifié la suppression de certains devis en testant $ _POST ['suq_delete_id']. Si tel est le cas, nous les transmettons à la fonction suq_delete_quotes (voir étape 5)
  • si les guillemets ont été supprimés, nous affichons un message de réussite
 echo suq_get_create_quote_form ($ suq_quote_author, $ suq_quote_text, $ suq_quote_category); if ($ quotes_table = suq_get_user_quotes ($ current_user-> ID)) echo $ quotes_table; 
  • nous produisons le formulaire de création de devis
  • Enfin, nous générons le formulaire de liste de devis / suppression en transmettant l'ID utilisateur à la fonction suq_get_user_quotes (voir l'étape 5).

Étape 5 Fonctions d'assistance

Ici, nous allons regarder les fonctions qui génèrent les formulaires et la fonction qui supprime les guillemets sélectionnés.

 function suq_get_create_quote_form ($ suq_quote_author = ", $ suq_quote_text =", $ suq_quote_category = 0) $ out. = '
'; $ out. = wp_nonce_field ('suq_form_create_quote', 'suq_form_create_quote_submitted'); $ out. = '
'; $ out. = '
'; $ out. = '
'; $ out. = suq_get_quote_categories_dropdown ('quote_category', $ suq_quote_category). '
'; $ out. = '
'; $ out. = '

'; $ out. = ''; $ out. = '
'; retourne $ out;
  • la fonction accepte 3 arguments facultatifs pour repeupler les champs de formulaire. C'est une commodité pour l'utilisateur.
  • un champ nonce est généré, que nous vérifions lorsque le formulaire est soumis
  • nous produisons un menu déroulant pour les catégories de devis en appelant suq_get_quote_categories_dropdown (voir fonction suivante)
 function suq_get_quote_categories_dropdown ($ taxonomy, $ selected) return wp_dropdown_categories (array ('taxonomy' => $ taxonomy, 'name' => 'suq_quote_category', 'sélectionné' => $ sélectionné, 'hide_empty' => 0, 'echo' => 0)); 
  • la fonction accepte 2 arguments, y compris l'ID d'élément de la catégorie actuellement sélectionnée
  • Nous utilisons la fonction WordPress wp_dropdown_categories pour créer un menu déroulant répertoriant les catégories de devis de la taxonomie quote_category (notre taxonomie personnalisée).
 function suq_get_user_quotes ($ user_id) $ args = array ('author' => $ user_id, 'post_type' => 'quotes', 'post_status' => 'en attente'); $ posts = new WP_Query ($ args); if (! $ posts-> post_count) renvoie 0; $ out. = '

Vos citations non publiées

'; $ out. = '
'; $ out. = wp_nonce_field ('suq_form_delete', 'suq_form_delete_submitted'); $ out. = ''; $ out. = ''; foreach ($ posts-> posts en tant que $ post) $ quote_cats = get_the_terms ($ post-> ID, 'quote_category'); foreach ($ quote_cats en tant que $ cat) $ quote_cat = $ cat-> nom; $ out. = wp_nonce_field ('suq_post_delete_'. $ post-> ID, 'suq_post_delete_id_'. $ post-> ID, false); $ out. = ''; $ out. = ''; $ out. = ''; $ out. = ''; $ out. = ''; $ out. = ''; $ out. = '
Dit parCitationCatégorieEffacer
'. $ post-> post_title. ''. $ post-> post_content. ''. $ quote_cat. '
'; $ out. = ''; $ out. = '
'; retourne $ out;
  • accepter l'ID utilisateur car nous devons obtenir une liste de citations pour l'utilisateur actuel uniquement
  • créez $ args pour spécifier notre utilisateur, le type de publication de citations et de citations en attente (non encore publié par l'administrateur)
  • exécuter une requête personnalisée à l'aide de WP_Query
  • retourne false si notre requête ne renvoie pas de guillemets
  • démarrer un formulaire et générer un nonce pour le formulaire
  • parcourez les guillemets en vous assurant de saisir également la catégorie de la citation
  • générer un nonce pour la case à cocher supprimer devis, attribuant un nom unique au nonce en concaténant l'ID de l'article
  • affiche une ligne de table contenant les informations sur le devis ainsi qu'une case à cocher supprimer

Pourquoi ajouter un nonce pour chaque devis?

Les formulaires peuvent être manipulés dans le navigateur pour publier des données inattendues. Dans notre cas, chaque case à cocher supprimer se voit attribuer la valeur d'un message. Mais que se passe-t-il si un utilisateur malveillant modifie cette valeur et fait en sorte que notre fonction de suppression supprime un message non répertorié??

Une solution consiste à utiliser des nonces pour chaque ligne de données post, en veillant à ce que les nonces soient nommés de manière unique avec la valeur post à supprimer. Nous vérifions ensuite le nonce lors de la soumission du formulaire pour nous assurer qu'il s'agit d'une valeur de retour authentique..

 fonction suq_delete_quotes ($ quotes_to_delete) $ quotes_deleted = 0; foreach ($ quotes_to_delete as $ quote) if (isset ($ _ POST ['suq_post_delete_id_'. $ quote]) && wp_verify_nonce ($ _TOBT ' citation); $ quotes_deleted ++;  return $ quotes_deleted; 
  • la fonction accepte un tableau d'ID de devis à supprimer
  • chaque ID de citation est vérifié pour voir si un nonce a été généré pour cela
  • si le nonce vérifie, nous supprimons la citation à l'aide de la fonction Wordpress wp_trash_post

Étape 6 Quelques styles

Il suffit de déposer ces informations de style dans le fichier style.css de votre dossier de thèmes:

 #suq_quote_author width: 300px;  #suq_quote_text width: 400px; hauteur: 100px;  #quotes font-size: 12px;  #quotes th text-align: left; 

Étape 7 Essayez-le

Activez le plugin, insérez le shortcode sur une page, connectez-vous à votre site et testez-le.

Le code source complet du plugin et un lien vers le site de démonstration sont répertoriés en haut de ce didacticiel..

Le dossier source contient également un modèle de page Wordpress avec une boucle personnalisée qui affiche les devis publiés pour tous les utilisateurs..


Dernières pensées

  • le plugin quotes pourrait être amélioré en offrant une option d'édition. Dans l’état actuel, les utilisateurs ne peuvent supprimer que leurs devis.
  • vous pouvez également inclure une option de téléchargement d'image pour éclaircir les choses
  • peut-être ajouter des champs personnalisés au type de message de citations pour les informations méta de devis

Liens utiles

  • Wordpress nonces
  • Types de messages personnalisés
  • Taxonomies personnalisées