Utilisation de champs personnalisés WordPress pour améliorer un plugin • WPShout

L'écosystème de plugins WordPress est incroyable. Il nous offre une variété presque infinie de fonctionnalités que nous pouvons ajouter à nos sites Web avec un minimum d'effort.

Il y a des cas, cependant, où un plugin fait environ 95% de ce dont nous avons besoin. Ou peut-être qu'il a toutes les fonctionnalités que nous espérions, mais pourrait bénéficier d'un peu de personnalisation supplémentaire.

Bien que nous puissions accepter toutes les lacunes et laisser assez bien tranquille, ce n'est pas la façon WordPress! Au lieu de cela, nous pouvons utiliser les champs personnalisés WordPress incroyablement flexibles pour nous aider à combler ce qui manque.

Aujourd'hui, nous allons explorer certains avantages de l'intégration de champs personnalisés dans nos plugins préférés. Ensuite, il sera temps de plonger dans un exemple du monde réel qui montre ce qui peut être accompli.

Que font les champs personnalisés WordPress

Le rôle principal des champs personnalisés est d'ajouter des données supplémentaires à un article WordPress, appelées «métadonnées». Il s'agit essentiellement d'informations qui vont au-delà des données par défaut incluses dans une page, une publication ou même un plugin.

Quel type de métadonnées peut-on ajouter? À peu près tout ce que vous pouvez imaginer. Le texte, le HTML et les URL sont des exemples courants. Cependant, vous pouvez également ajouter des données d'objet à partir de fichiers ou de publications. Ensuite, il y a aussi la possibilité d'utiliser des champs personnalisés comme paramètres qui vous permettent d'effectuer diverses fonctions de manière conditionnelle (si cette, alors fais cette).

Les champs personnalisés offrent des avantages utiles:

Ajout de données hautement personnalisées

Lors de la création d'un site Web, les champs personnalisés permettent de normaliser des éléments spécifiques de données de niche. Autrement dit, les données qui sont uniques à une entreprise ou une organisation.

À titre d'exemple, considérons le profil d'un employé. Il y a un certain nombre d'articles différents que nous pourrions vouloir inclure pour chaque personne:

• Nom;
• Titre;
• Photo;
• Adresse électronique;
• Biographie;

À l'aide de champs personnalisés, nous pouvons créer cet ensemble de données standard pour chaque employé. Pour aller plus loin, nous pourrions même créer un type de publication personnalisé appelé «Employés», dans lequel chaque publication contient ces champs.

Une interface conviviale – avec de l'aide

Certes, l'interface utilisateur des champs personnalisés fournie avec WordPress fait défaut dans un certain nombre de domaines. Mais la communauté des développeurs a créé des solutions convaincantes sous la forme de plugins de champ personnalisés.

Ces plugins aident à créer une interface beaucoup plus conviviale et à ajouter des tonnes de fonctionnalités incroyables. Parmi les plus populaires figurent les champs personnalisés avancés (que nous utiliserons dans notre exemple ci-dessous), CMB2, Meta Box et Pods Framework. Bien qu'il existe des similitudes, chaque plugin présente des avantages uniques qui méritent d'être examinés.

Quel que soit votre choix, vous pouvez vous attendre à une grande amélioration par rapport à l'interface utilisateur par défaut. Ils rendront le processus de création de contenu beaucoup plus intuitif.

Ajout de Pizzazz aux plugins

Maintenant que nous comprenons les avantages de l'utilisation des champs personnalisés WordPress, parlons de leur relation avec les plugins. Il y a de fortes chances que de nombreux plugins que vous avez installés sur votre site Web utilisent déjà des champs personnalisés sous une forme ou une autre. Mais nous avons également la possibilité d'ajouter les nôtres.

Cela peut être utile de plusieurs manières:

Étendre les données disponibles

Tout d'abord, il offre la possibilité d'ajouter les données personnalisées que nous avons mentionnées ci-dessus. Cela peut être d'une grande aide dans les situations où nous voulons entrer et / ou afficher plus de contenu que le plugin ne fournirait généralement.

Par exemple, imaginons que nous utilisons un plug-in de témoignages pour notre activité de conception de sites Web. Il est livré avec un ensemble de champs par défaut que nous pouvons utiliser pour montrer nos clients satisfaits. Mais il y a peut-être des éléments uniques que nous voulons ajouter.

Peut-être que nous voulons mentionner quel CMS nous avons utilisé lors de la construction de leur projet, ou combien de temps nous avons travaillé avec chaque client. Les champs personnalisés nous permettent d'ajouter ces données sans avoir à créer un tout nouveau plugin de témoignages à partir de zéro.

Ajouter une nouvelle fonctionnalité

Comme nous l'avons indiqué précédemment, les champs personnalisés peuvent également être utilisés pour créer des paramètres. C'est un domaine où nous pouvons vraiment utiliser notre imagination pour faire encore plus un plugin.

Bien sûr, il est possible de pénétrer assez profondément dans les mauvaises herbes avec cela. Et une grande partie de ce qui est possible dépend de l'extensibilité du plugin et de votre propre capacité à écrire du code. Mais il y a des tonnes d'utilisations potentielles.

Prenant notre exemple de plugin de témoignage un peu plus loin, disons que nous voulons ajouter un élément de conception front-end spécial pour désigner nos plus gros clients. Nous pourrions faire quelque chose comme ça pour le faire fonctionner:

• Nous pourrions ajouter un champ de case à cocher à chaque poste de témoignage appelé «Star Client»;
• Cocher cette case indiquerait que nous voulons afficher une icône en forme d'étoile sur le profil frontal du client;
• Dans notre thème, nous pouvons déterminer si le champ «Star Client» a été vérifié pour chaque article de témoignage;
• Si le champ a été vérifié, nous affichons ensuite l'icône d'étoile spéciale;

Bien qu'il s'agisse d'un exemple très basique, il montre ce qui est possible lors de l'ajout de paramètres via des champs personnalisés. Il existe un certain nombre de façons dont cela pourrait être utilisé pour améliorer un plugin.

Exemple réel: le calendrier des événements

Voyons maintenant comment cela pourrait fonctionner sur un vrai projet. Ce qui suit est un exemple assez simple de la façon dont les champs personnalisés peuvent ajouter des données de niche à un plugin populaire.

Ce que nous utilisons

Pour cette démo, nous utiliserons deux plugins gratuits. Si vous suivez le long, assurez-vous de les avoir installés et activés sur votre site de test.

Le scénario

Nous créons un site Web pour une organisation qui tient des réunions régulières. Pour chaque réunion, ils prévoient d'afficher un ordre du jour sous forme de document PDF.

Bien que nous puissions simplement ajouter ces documents à chaque événement via l'éditeur de contenu, cela ouvre la porte à une expérience utilisateur incohérente. En intégrant un champ de téléchargement de fichiers personnalisé, nous pouvons nous assurer que la disposition de chaque réunion (sans parler de l'emplacement de l'ordre du jour) est identique à l'arrière et à l'avant.

De plus, le fait d'avoir le champ dans l'éditeur de publication sert de rappel amical à la personne qui ajoute du contenu. Ce visuel réduit les chances qu'ils oublient d'ajouter le document.

La mise en place

Voici comment créer et implémenter notre nouveau champ de téléchargement de fichiers dans le calendrier des événements:

1. Accédez à Champs personnalisés> Ajouter un nouveau.

2. Tout d'abord, nous aurons besoin d'un titre. Appelons notre nouveau groupe de terrain «Agenda des événements». Au sein de ce groupe, nous allons créer un nouveau Fichier champ appelé «Agenda». Les paramètres sur place seront les valeurs par défaut, bien que quelques instructions pratiques soient incluses.

3. En faisant défiler les paramètres de localisation, nous allons attribuer ce groupe de champs au un événement Type de poste.

4. Maintenant, enregistrons notre nouveau groupe de champs. Le champ Agenda s'affichera désormais sous l'éditeur de contenu dans chaque événement.

Notez que, dans ce cas, nous utilisons l'éditeur de blocs Gutenberg. Il gère les métaboxes de champs personnalisés un peu différemment de l'éditeur classique. Alors que l'éditeur classique permettait un positionnement personnalisé des métaboxes, Gutenberg les collait en bas de l'écran.

Certes, cela a un impact sur la convivialité du back-end. Mais cela n'affecte pas négativement tout ce que nous faisons en amont.

5. Pour tester les choses, ajoutons un fichier PDF à un exemple d'événement que nous avons créé.

Affichage des champs personnalisés sur le frontal

La dernière étape consiste à s'assurer que notre nouveau champ s'affiche sur le front-end. Avant de commencer, consultons la documentation des champs personnalisés avancés et du calendrier des événements:

Dans cette démonstration, nous afficherons un lien vers l'agenda sur notre page d'événements, qui utilise la vue "Liste". Cela nécessitera de placer un petit extrait de code dans le fichier functions.php du thème actif ou un plugin personnalisé:

/ **
* Affichez le fichier de l'ordre du jour de la réunion dans la vue "Liste" du calendrier des événements.
* En savoir plus sur les filtres de modèles sur: https://theeventscalendar.com/knowledgebase/k/using-template-filters-and-actions/
* En savoir plus sur les fichiers de téléchargement de fichiers sur: https://www.advancedcustomfields.com/resources/file/
* /
add_action ('tribe_template_after_include: events / v2 / list / event / title', 'meeting_documents_list'); // Présentons l'agenda juste sous le titre de l'événement.

// Notre fonction personnalisée
function meeting_documents_list () 

// Obtenez l'ordre du jour de la réunion, s'il est disponible.
$ agenda = get_field ('agenda');

si ($ agenda):

// Si l'agenda existe, affichez un lien vers celui-ci.
écho 'Voir l'agenda »»

fin si;

Cela nous donne un début de base. Nous pourrions certainement continuer à partir d'ici et ajouter le lien de l'agenda aux modèles associés à d'autres vues. Mais j'espère que cela vous permettra d'imaginer ce qui est possible d'autre.

En vérifiant le résultat sur le front-end, vous pouvez voir que nous avons maintenant un lien vers l'agenda (stylisé en rouge) juste sous le titre de notre événement.

Petits ajustements qui ont un grand impact

Un grand site Web se résume souvent au moindre détail. Ces petits extras que nous ajoutons rendent le site plus facile à utiliser et plus utile.

Les bons plugins WordPress peuvent nous aider à y arriver. Cependant, ils peuvent encore manquer de certains détails qui rendent notre projet particulier unique. C’est là que les champs personnalisés peuvent entrer et nous aider à terminer le travail.

Donc, la prochaine fois que vous souhaitez que votre plugin préféré puisse faire juste un un peu de plus, réfléchissez à la façon dont vous pourriez utiliser des champs personnalisés pour y arriver.