Share
Ce que vous allez créerMon client vend quelques produits et souhaite que les visiteurs du site puissent soumettre un commentaire ou un témoignage sur un produit en particulier et les afficher sur leurs pages de produits respectives sur son site WordPress..
J'ai travaillé sur cette tâche tout l'après-midi d'hier, à ma grande frustration, et cela a fonctionné tout à l'heure. J'ai compris que je le faisais beaucoup plus difficile que ce n'est vraiment. Gravity Forms à la rescousse!
Il y a quelques étapes dans ce processus:
Commençons.
Il s’agit d’une situation idéale pour un type de message personnalisé, comme un article de blog, mais unique. Les types d'articles personnalisés sont distincts des articles de blog classiques. ils peuvent vous aider à transformer votre site en une base de données de films ou en un site de recettes, avec leurs propres taxonomies personnalisées (au lieu de catégories de blogs, pensez aux réalisateurs, aux acteurs et aux genres).
Bien que vous puissiez créer manuellement un type de publication personnalisé (CPT) à l'aide du codage, procédons de manière simple. Installez l'interface utilisateur de type de post personnalisée et activez-la. Ceci est un plugin très utile et stable qui existe depuis de nombreuses années.
Dans l'interface utilisateur de type de publication personnalisée, vous définissez un nouveau type de publication. Voici une capture d'écran de la mienne. Nommez-le comme vous voulez; dans ce cas, le mien est Avis.
Vous pouvez laisser le Étiquettes section seule. Mais en Réglages, vous voudrez faire quelques changements.
J'ai laissé la plupart des valeurs par défaut sous Réglages seul, mais ont coché la case pour Exclure de la recherche comme je ne veux pas de commentaires dans les résultats de recherche. Et dans la section Les soutiens, J'ai uniquement coché les cases à cocher pour les éléments que je dois afficher dans la page d'édition de post de révision: Titre, Éditeur, et Les champs personnalisés.
Si vous passez la souris sur les points d'interrogation rouges dans le panneau Paramètres, vous verrez ce que fait chaque élément. vous pouvez toujours revenir et apporter des modifications.
Gravity Forms est un excellent plugin, mais il ne gérera pas de publication personnalisée. Pour cela, vous devez installer et activer un autre plug-in, Gravity Forms + Custom Post Types. Allez-y et faites-le, et nous commencerons par le formulaire.
Dans Gravity Forms, créez une nouvelle forme. appelons-le Soumettre un avis. Enregistrez-le, puis ouvrez le Publier des champs dans la colonne de droite. L'utilisation de ces champs au lieu des champs habituels du formulaire créera une nouvelle publication lorsque l'utilisateur soumettra le formulaire..
D'abord, cliquez sur Titre de l'article pour ajouter ce champ. Dans ce cas, je veux que le titre de mon message soit le nom de la personne qui a envoyé la critique - voir la capture d'écran ci-dessous.
Nommez votre champ (ici c'est votre nom, donc c'est l'étiquette que l'utilisateur verra). Pour État du message, vous voulez probablement Brouillon; cela signifie que le nouveau message sera au format Brouillon et ne sera pas publié sur votre site tant que vous ne l'avez pas approuvé.
Auteur du post par défaut est mis à vous et c'est bien-ce ne sera pas important ici-ni Catégorie de poste puisque nous utilisons un type de message personnalisé. Faire ce champ Champs obligatoires en cochant la case en bas.
Puis aller au Avancée languette. Cochez la case pour Enregistrer en tant que type de publication et choisissez le type de message personnalisé que vous avez créé au début de ce didacticiel..
Puis clique Mettre à jour enregistrer vos modifications.
Ensuite, nous ajouterons un champ de courrier électronique (à partir du Champs Avancés section) comme avec n'importe quelle forme, ce qui en fait Champs obligatoires.
Ensuite, nous ajouterons un autre champ de publication, Corps. Cela fonctionne comme le champ Texte du paragraphe dans une forme normale. Vous ne devriez pas avoir besoin de changer les paramètres de ce champ autres que le Étiquette de champ et en cochant la Champs obligatoires case à cocher.
Presque fini! Maintenant, parce que mon client a plusieurs produits, nous voulons demander à l'utilisateur quel produit ils ont acheté. Pour ce faire, nous allons ajouter un champ personnalisé à partir du Publier des champs zone (faites-la glisser jusqu'à ce qu'elle apparaisse devant le champ Body afin que le flux ait un sens).
Pour nos besoins, nous voulons que ce champ personnalisé soit un bouton radio, choisissez donc celui-ci dans Type de champ. Ensuite, nous devons donner un nom à notre champ personnalisé. Choisir la Nouveau bouton puisque nous le faisons ici, puis tapez un nom dans la zone de texte. Dans ce cas, c'est nom_produit.
Puis remplissez les choix de boutons radio comme d’habitude, en vous assurant de saisir une étiquette (ce que l’utilisateur voit) et une valeur (que vous pouvez utiliser pour séparer les avis par nom de produit)..
Faire ce champ Champs obligatoires (et n'oubliez pas d'ajouter votre propre Étiquette de champ en haut, pour l'utilisateur) et mettre à jour le formulaire. Nous avons tous terminé avec la partie 2.
J'espère que vous savez déjà comment faire cela, mais sinon, c'est très simple. Allez à la page où vous voulez mettre votre formulaire et éditer la page.
Placez le curseur à l'endroit où vous souhaitez ajouter le formulaire. Cliquez sur Ajouter un formulaire en haut, choisissez votre nouveau formulaire, décochez la case Titre et La description cases à cocher, et cliquez sur Insérer un formulaire. Il va ajouter un shortcode à la page.
C'est tout. Et voici à quoi ressemble le formulaire sur la page.
Allez-y et essayez le formulaire, en ajoutant quelques critiques. Je suggère d'ajouter des critiques pour au moins deux ou trois produits, afin que nous puissions avoir quelque chose à travailler dans la suite de ce didacticiel. Vous pouvez toujours supprimer vos tests plus tard.
Nous arrivons maintenant à la partie qui a beaucoup de possibilités. Si vous regardez dans le Admin menu sur le côté gauche, vous aurez maintenant un nouvel élément de menu, dans mon cas, il s'appelle Avis. Si vous regardez cela, vous verrez les critiques de test que vous avez soumises (s'il n'y en a pas, vous avez sauté la dernière partie de l'étape 3-allez à votre formulaire et soumettez des critiques de test, au moins pour quelques produits, besoin de matériel pour travailler avec cette étape).
Ce sont des articles de blog mais ils ont leur propre élément de menu en raison de votre type d'article personnalisé. Cela vous aide à garder les choses séparées sur votre site; vous pouvez avoir un blog régulier, puis n'importe quel nombre de types de publications personnalisées pour gérer des informations plus spécialisées. Plutôt cool, oui?
Ouvrez l'une de ces publications et ne verrez que les éléments cochés sous Supports à l'étape 1 lors de la configuration de votre type de publication personnalisée. Dans ce cas, il s'agit du titre, de l'éditeur et des champs personnalisés. Nous aimons garder le plus simple possible. Regardez le champ personnalisé et vous verrez qu'il a à la fois un nom (l'étiquette que vous avez entrée) et une valeur (que vous avez également entrée). Cette valeur peut être utilisée pour contrôler les avis affichés dans un modèle personnalisé..
Afficher des messages sur votre site peut être fait avec du codage dans vos fichiers de thème ou avec des plugins; il y a beaucoup beaucoup façons de le faire. Pour ce tutoriel, nous allons ajouter les commentaires à un widget de la barre latérale. Je vais vous montrer deux façons de faire cela avec un plugin: un facile et un meilleur.
Pour cet exemple, nous utiliserons le plugin Special Recent Posts. Installez et activez-le puis allez à Paramètres> Widgets. Faites glisser le widget dans une barre latérale.
Lorsque vous l'ouvrez, vous verrez beaucoup d'options. Pour cet exemple, ce sont les paramètres que j'ai utilisés pour obtenir la liste de messages affichée ici, mais vous pouvez utiliser tout ce qui fonctionne avec votre site..
Voici à quoi ça ressemble dans ma barre latérale:
Cela fonctionne plutôt bien, mais vous pouvez personnaliser l'affichage si vous connaissez un peu de CSS. Cependant, vous n'avez pas beaucoup de contrôle sur ce qui est affiché. vous ne pouvez pas choisir d'afficher des critiques pour un produit et de les masquer pour un autre. Mais je vais vous montrer comment faire cela dans la prochaine partie.
Custom Content Shortcode est un plugin extrêmement utile qui vous permettra d'afficher tout type de contenu n'importe où sur votre site, y compris les widgets. Il nécessite un peu d'apprentissage, mais il contient également une excellente documentation, incluse dans une section Référence située dans votre tableau de bord Admin. Il fournit beaucoup de contrôle sur ce qui est affiché et ne vous décevra pas si vous prenez un peu de temps pour apprendre à vous en servir. C'est un outil que vous pouvez utiliser encore et encore dans votre site web ou votre blog.
Vous aurez besoin d'être un peu à l'aise avec HTML et CSS pour styliser l'affichage de ce widget, vous permettant simplement de le savoir. Cela ne ressemble pas beaucoup à sortir de la boîte. Vous pouvez ajouter les styles au fichier style.css de votre thème..
Utilisons Custom Content Shortcode pour créer un autre widget, mais cette fois-ci, nous limiterons ce qui est affiché pour pouvoir afficher uniquement les commentaires sur un produit donné..
Dans Paramètres> Widgets, faites glisser un widget de texte dans une barre latérale et ajoutez votre titre.
Je vais vous montrer comment configurer le shortcode pour cet exemple, mais je vous recommande vivement de jeter un coup d'œil à travers le Référence section pour le plugin, que vous obtenez dans le Plugins page (vous verrez un lien pour cela sous le nom du plugin). C'est un outil très puissant!
Voici le shortcode que j'utilise. Je vais le parcourir ligne par ligne.
[type de boucle = "revue" champ = "nom_produit" valeur = "boulder_case"] [contenu] [titre du champ] [date du champ] [/ boucle]
Pour type de boucle, entrez le nom de votre champ personnalisé, probablement singulier (si cela ne fonctionne pas, essayez au pluriel).
Champ est le nom du champ personnalisé que vous avez utilisé dans Gravity Forms. Valeur est la valeur associée au bouton radio dans Gravity Forms.
Ces éléments contrôlent la boucle, ce qui signifie qu’elle passera en revue chaque publication "review" une par une en affichant celles ayant la valeur "boulder_case" jusqu'à ce qu'elles soient toutes regardées..
Ainsi, dans votre boucle, trois éléments s'affichent: le contenu de la publication (à partir du champ Corps dans Gravity Forms), le titre (le nom de l'utilisateur) et la date de publication..
Cela a-t-il du sens? Tapez-le ou copiez-le dans votre widget texte en remplaçant les éléments de la section par vos propres noms, enregistrez-le et examinez ce qu'il génère..
Cela ressemble probablement à un gâchis, mais le contenu est tout là, et vous remarquerez que seules les publications avec la valeur que vous avez saisie sont affichées. C'est puissant; cela signifie que vous pouvez créer un widget de revue pour chaque produitau lieu d'avoir toutes les critiques mélangées.
Alors maintenant, vous aurez besoin de faire un peu de formatage pour rendre les choses plus belles - un peu de HTML est nécessaire.
[type de boucle = "review" champ = "nom_produit" count = "3"][/boucle][contenu]- [titre du champ]
[date du champ]
Cela rend les choses beaucoup plus faciles à lire, mais maintenant, il faut du CSS pour le styler. Je vais ajouter quelques classes à ce code pour le style.
/ * Critiques * / # sidebar-primary .widget .review-loop .review margin-bottom: 1.5em; # sidebar-primary .widget .review-loop div.text p margin: 0; # sidebar-primary .widget .review-loop div.text p: avant content: '\ 201C'; # sidebar-primary .widget .review-loop div.text p: après contenu: '\ 201D'; # sidebar-primary .widget .review-loop .author taille-de-police: 1.5rem; hauteur de ligne: 2.1rem; style de police: italique; marge: 0,5em 0 0,2em; text-align: right; # sidebar-primary .widget .review-loop .date margin: 0; taille de la police: 1.4rem; hauteur de ligne: 1.96rem; style de police: italique; text-align: right;
Et voici le produit fini tout stylé et prêt pour plus de contenu.
Alors maintenant, vous savez:
Dans un suivi de cet article, je vous montrerai comment afficher votre nouveau contenu personnalisé dans une page à l'aide d'un modèle et d'une boucle personnalisés. C'est un peu plus difficile, mais cela vous donnera le pouvoir de contrôler réellement le contenu soumis par les utilisateurs. Et ensuite, vous pouvez envisager d'autres moyens d'utiliser, par exemple, des photos de contenu utilisateur dans une galerie. Faire participer les visiteurs est un excellent moyen de promouvoir le site de votre entreprise..
Accentsconagua