Débuter avec les champs personnalisés avancés

Dans ce tutoriel, je vais vous montrer les bases de l'utilisation du plugin Advanced Custom Fields (ACF). ACF est un très gros plugin, donc cet article n'expliquera pas tout ce qu'il propose, mais il devrait suffire à vous permettre d'ajouter des métadonnées et de les afficher dans votre thème..

Au moment de la rédaction de ce document, il existe deux versions d'ACF: 4 et 5. Cet article est basé sur la version 4, mais devrait également s'appliquer si vous utilisez la version 5..

Qu'est-ce que les champs personnalisés avancés??

Advanced Custom Fields est une interface utilisateur permettant d’ajouter des champs personnalisés, ou métadonnées, à WordPress. Les champs personnalisés vous permettent d'étendre vos publications ou pages avec davantage de données. Regardons un scénario commun:

Vous avez un type de message appelé film et vous souhaitez joindre une note sur dix au bas de chacune de vos critiques, ainsi que d'autres données. Maintenant, vous pouvez simplement mettre ces données dans votre message, mais que se passe-t-il si vous souhaitez utiliser ces données ultérieurement d'une autre manière? Peut-être que vous souhaitez déplacer le score au-dessus de votre avis; dans ce cas, vous devrez éditer manuellement chaque révision et déplacer manuellement ce score, ce qui n'est pas terrible..

WordPress possède des fonctions intégrées pour la création de champs personnalisés, mais elles n'incluent que des fonctionnalités de base et nécessitent la création de champs par programme. ACF possède de nombreux types de champs intégrés, parmi lesquels:

texte
email
Éditeur WYSIWYG
image
fichier
sélectionner la boîte
sélecteur de date
pipette à couleurs

En plus de disposer de champs intégrés, ACF vous fournit une sélection de règles pouvant être utilisées pour déterminer où les champs sont affichés dans votre administrateur WordPress. Ceci est vraiment utile pour garder votre espace administratif aussi propre que possible. Par exemple, vous pouvez afficher un groupe de champs personnalisés uniquement si votre type de publication est avis et votre modèle de page est critique en vedette.

Commencer

Avant de commencer à ajouter des champs, vous devez installer le plug-in ACF. Pour ce faire, à partir du tableau de bord WordPress, accédez à Plugins> Ajouter un nouveau. Du Ajouter un plugin écran, recherche Champs personnalisés avancés et cliquez Installer. Assurez-vous d’activer le plugin - s’il a été installé correctement, vous devriez maintenant voir un Les champs personnalisés menu dans votre admin WordPress.

En nous en tenant au thème d’un site Web de critiques de films, nous allons créer des champs pertinents. Pour suivre ce didacticiel, vous aurez besoin d’un type de message personnalisé appelé film. Pour apprendre à créer des types de publication, consultez cet autre excellent article de Tuts +. Cela dit, les méthodes présentées ici fonctionneront pour de nombreux autres types de champs personnalisés, et la logique de création et d'affichage des champs restera la même..

Création de groupes de champs

Les groupes de champs sont exactement ce qu'ils disent: des groupes de champs. En utilisant l'exemple d'avoir un type de post appelé film, nous voudrons peut-être inclure les données suivantes:

année de sortie
réalisateur
note sur dix
Lien IMDb

Ces champs appartiennent logiquement à un groupe, car ils sont tous liés au même type de message. En utilisant les champs ci-dessus, nous pouvons commencer à réfléchir aux types de champs dont nous pourrions avoir besoin pour ces données..

année de sortie: nombre
réalisateur: texte
note sur dix: nombre
Lien IMDb: text (il n'y a pas de type de champ url)

Pour commencer à ajouter un groupe de champs, cliquez sur le bouton Les champs personnalisés menu dans votre tableau de bord WordPress. Maintenant, cliquez sur le Ajouter un nouveau bouton. Vous allez maintenant être présenté avec le Ajouter un nouveau groupe de champs écran. Avant de faire autre chose, donnons un nom à notre groupe de terrain en tapant dans la boîte de titre - j'ai appelé le mien Données du film.

Ensuite, nous pouvons ajouter tous nos champs. Clique le Ajouter le champ bouton pour commencer. Vous verrez maintenant un formulaire comportant les champs suivants:

Étiquette de champ est le nom qui apparaît lors de l'édition. Je trouve utile de commencer par le même préfixe sur chacun de mes champs, par exemple. Année du film, Réalisateur de cinéma, etc.
Nom de domaine est le nom que vous utiliserez dans votre code pour afficher le champ. Après avoir saisi l’étiquette du champ, elle devrait être automatiquement renseignée. Ceci est un mot simple sans espaces, mais les tirets et les traits d'union sont autorisés. Par exemple, Année du film comme une étiquette de champ se transformerait en movie_year comme un nom de champ.
Type de champ est un champ de texte de base (même si ACF propose également des options plus avancées).
Instructions de terrain sont des instructions que les auteurs peuvent voir lors de l'ajout des données sur l'écran d'édition, par ex. "L'année du film devrait toujours être la date de sortie américaine".
Champs obligatoires est une boîte radio où vous choisissez oui ou non. Si vous choisissez "oui", le champ doit être rempli pour pouvoir être sauvegardé sur l'écran de post-édition..
Valeur par défaut est la valeur qui apparaîtra automatiquement lors de la création d'un nouveau message.
Texte réservé apparaît dans votre saisie sur l'écran d'édition.
Préfini définitce qui apparaît avant la saisie sur l'écran d'édition.
Ajouter définit ce qui apparaît après la saisie sur l'écran d'édition.
Mise en forme donnevous deux choix: "Convertir le HTML en balises" (par défaut) ou "pas de formatage". Convertir le HTML en balises signifie que tout le HTML dans votre entrée sera rendu à l'écran; pas de formatage signifie que tout HTML sera ignoré.
Limite de personnage nous permet de limiter le nombre de caractères pour une entrée. Par exemple, sur notre année entrée nous devrions limiter les caractères à quatre.
Logique conditionnelle est une fonctionnalité plus avancée que nous ne verrons pas dans cet article.

Ces champs apparaissent tous pour la texte type de champ sur d'autres types de champs que certaines de ces options peuvent ne pas afficher, ou il peut y avoir des options supplémentaires. Comme nous allons également utiliser le nombre type de champ, certaines options supplémentaires s'offrent à nous:

Valeur minimum est la valeur numérique minimale à autoriser dans le champ. Pour notre score sur dix, il serait raisonnable de le définir à un, car nous n'allons rien marquer de zéro.
Valeur maximum est le nombre maximum à autoriser dans le champ. Encore une fois, nous pourrions utiliser ceci pour notre score sur dix et avoir la valeur dix, car nous ne voulons pas que cette valeur soit dépassée..
Taille de pas définit la valeur par laquelle un nombre augmente lorsqu'une flèche est enfoncée. Dans le cas de la partition du film, ce serait une bonne idée de la définir comme telle..

Voici comment j'ai configuré mes champs:

Étiquette de champ: Année du film
Nom de domaine: movie_year
Type de champ: Nombre
Champs obligatoires: Oui
Valeur minimum: 1900
Valeur maximum: 2050

Notez les valeurs minimum et maximum ici. Je les ai définies pour ajouter une validation très basique, car il est peu probable que nous ayons un film plus ancien que 1900 et un plus récent que 2050 dans la vie du site Web..

Étiquette de champ: Réalisateur de cinéma
Nom de domaine: réalisateur de cinéma
Type de champ: Texte
Champs obligatoires: Oui
Formatage: Pas de formatage

Étant donné que nous allons formater notre sortie en HTML, nous ne voulons pas que les éditeurs puissent ajouter du code HTML susceptible d'interférer avec notre mise en page. Par conséquent, "pas de formatage" a été choisi ici.

Étiquette de champ: Score de film
Nom de domaine: movie_score
Type de champ: Nombre
Champs obligatoires: Oui
Valeur minimum: 1
Valeur maximum: dix
Taille de pas: 1

Là encore, nous avons défini une valeur minimale et une valeur maximale pour ajouter une validation; nos scores sont sur dix, nous ne voulons donc pas que les éditeurs puissent insérer un score plus élevé que celui-ci. De même, nous ne voulons pas que les scores insérés soient inférieurs à un.

Étiquette de champ: Movie IMDb Link
Nom de domaine: movie_imdb_link
Type de champ: Texte
Instructions de terrain: Collez l'URL IMDb complète ici. par exemple. http://www.imdb.com/title/tt2015381/
Champs obligatoires: Oui
Formatage: Pas de formatage

J'ai ajouté des instructions de champ à cette entrée, car il n'y a pas URL type de champ, il est donc difficile à valider. Les instructions devraient aider les éditeurs à comprendre comment utiliser le champ..

Une fois que vous avez ajouté tous vos champs, assurez-vous de cliquer sur le bouton Mettre à jour bouton. Une fois que vous avez cliqué dessus, vous serez de retour au Modifier le groupe de champs page. Il ne reste plus que quelques tâches à effectuer sur cet écran pour que vos champs fonctionnent correctement..

Sous la zone de champ se trouve une boîte appelée Emplacement-Cela nous permet de contrôler où nos champs personnalisés sont affichés. Nous voulons seulement que nos champs personnalisés indiquent si le type de message est film. Dans le premier menu déroulant, sélectionnez Type de poste, dans la deuxième liste déroulante, sélectionnez est égal à, et dans le troisième sélectionnez film.

La dernière chose que nous devons faire ici est de définir où notre champ personnalisé apparaîtra sur l'écran d'édition. Pour ce faire, faites défiler un peu plus loin vers le bas Les options section. Cela nous permet de choisir l’emplacement et le type de la métabox de champ personnalisé, et nous donne la possibilité de masquer d’autres éléments de notre écran d’édition..

Les options sont les suivantes:

Numéro de commande: si vous avez plusieurs groupes de champs, ils sont créés par ordre croissant..
Position a trois options:

Côté
High (après le titre)
Normal (après le contenu)

Style: standard ou sans soudure (voir l'image ci-dessous pour la différence entre ceux-ci).
Masquer à l'écran: il s'agit d'une liste de cases à cocher vous permettant de masquer des éléments inutiles, tels que des balises, des catégories ou des commentaires..

Les options que j'ai utilisées sont:

Position: Côté
Style: Ordinaire

Les autres ont été laissés par défaut.

Vous pouvez vérifier que vos champs s'affichent correctement en effectuant une nouvelle publication (dans ce cas dans le film Type de poste). Si tout a bien fonctionné, vous verrez votre metabox. C'est le bon moment pour ajouter des données de test.

Ajout de champs à votre thème

Maintenant que vous avez créé vos groupes de champs et que vous avez des données de test, vous pouvez commencer à les afficher dans votre thème ou votre thème enfant..

Vous pouvez utiliser le WordPress standard get_post_meta () fonctionne avec ACF, mais il est recommandé d’utiliser les propres fonctions d’ACF, car ACF formate les valeurs en fonction du type de champ que vous avez créé. Nous allons utiliser les ACF le champ() une fonction. Cette fonction affiche votre champ personnalisé et prend un paramètre du nom du champ, par exemple:

Abordons nos métadonnées. Nous allons avoir toutes ces informations dans un seul div.

  : 
 : 
 : /dix
 "target =" _ blank ">

Ce code est assez simple, nous utilisons le _e fonctionne pour internationaliser nos chaînes et les faire écho, puis en utilisant le ACF le champ() méthode pour faire écho à la valeur du champ que nous avons créé. Tout cela a été placé dans une liste non ordonnée, dans un div élément avec une classe de reviews-meta, afin que nous puissions le cibler avec notre CSS.

Alors, où va ce code? Dans ce cas, il est préférable de créer un nouveau modèle pour votre type de publication. Pour ce faire, faites une copie de votre thème single.php fichier et nommez-le single-postname.php-dans notre cas single-movie.php. Chaque single.php sera différent mais ils devraient tous avoir une chose en commun: une boucle WordPress. Votre boucle WordPress devrait ressembler à ceci:

Vos champs personnalisés peuvent sortir de la boucle et leur emplacement exact dépend de l'apparence que vous souhaitez donner à la page. Dans mon cas (en utilisant le thème par défaut Twenty Fourteen), je les ai placés juste en dessous de la boucle et appliqué un style de base à la .reviews-meta Classe CSS.

Conclusion

Nous avons couvert les bases du plugin Advanced Custom Fields. C'est-à-dire que nous avons ajouté quelques champs et les affichons maintenant sur notre site. Cependant, ACF a beaucoup plus à offrir et nous venons de gratter la surface. Vous pouvez utiliser de nombreux autres types de champs, ainsi que des fonctionnalités plus avancées telles que la logique conditionnelle..

N'hésitez pas à laisser des questions, des commentaires et des commentaires généraux dans le formulaire ci-dessous!

Code