Tutoriels, WordPress

ACF TUTORIEL : AJOUTER DES CHAMPS PERSONNALISÉS

Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?

Bonjour mes petites myrtilles. Aujourd’hui c’est tutoriel ACF (Advanced Custom Fields = Ajouter des champs personnalisés). Lors d’un projet WordPress pour une cliente, j’ai dû ajouter des champs personnalisés à son portfolio, pour qu’à chaque fois qu’elle veuille poster dans son portfolio, elle puisse rentrer certaines informations complémentaires comme le nom du photographe, le nom de la styliste, cela très facilement.

ACF : le plugin

Avant tout, il faut installer et activer le plugin sur votre WordPress . Sans quoi, cela risque d’être bien compliqué ;). Une fois que l’extension est bien installée et activée, vous apercevrez un nouvel onglet dans la barre de menu de votre back office WordPress. Celle-ci affiche une roue dentée avec ACF.

Les démarches à suivre

1 – Création du groupe de champs

[list style= »style4″] [li]Cliquez sur ACF et vous arriverez sur la page permettant de créer vos champs personnalisés. Cliquez sur AJOUTER qui se trouve à côté de GROUPES DE CHAMPS. Puis renseignez le nom de votre groupe de champs. Ici j’ai mis : Informations Portfolio Projets.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Vous allez devoir créer les champs un par un pour avoir une liste qui ressemble à celle-ci. (Vous pouvez très bien n’avoir qu’un seul champ, tout dépend de ce dont vous avez besoin.)[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

2 – Création d’un champ personnalisé

[list style= »style4″] [li]Pour créer un champ personnalisé (ou plusieurs), il suffit simplement d’entrer certaines informations. Pour mon projet, j’ai seulement eu besoin d’entrer les informations suivantes : – Titre du champ : Styling – Nom du champ : (s’écrit automatiquement et vous sera utile plus tard) – Type de champ : Texte (Un champ de texte d’une ligne unique, limitation des caractères possible, j’ai donc choisi texte car c’est la meilleure option dans mon cas) – Requis : non (ce ne sera pas un champ obligatoire) – Texte de substitution : Name (dans la page de création d’un nouveau projet pour le portfolio, j’aurai donc un nouveau champ personnalisé « STYLING » qui apparaîtra sous l’éditeur de texte déjà présent).[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Très important pour pouvoir faire afficher votre champ personnalisé dans la page de création de votre projet portfolio ou d’article, il faut absolument ajouter une règle. Dans mon cas, j’ai demandé de montrer ce champ quand le type de publication est égal à « project ». Si le nom de votre portfolio est portfolio, dans ce cas vous mettrez que le type de publication est égal à portfolio. Si c’est pour votre blog ce sera surement post et si c’est pour une page de votre site alors ce sera page qu’il faudra choisir dans le menu déroulant.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Dans les options je vous conseille de ne rien cocher et de choisir l’option Standard (WP metabox) pour le style de votre champ. Visuellement ça vous parlera beaucoup plus. Une fois que tout est bien rempli, vous pouvez cliquer sur publier.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

3 – Vérification de l’intégration du champ dans la page souhaitée

[list style= »style4″] [li]Maintenant, vous allez vérifier que votre champ s’est bien installé à l’endroit souhaité. Faites comme si vous vouliez poster un nouveau projet ou un nouvel article.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Vous devriez retrouver votre groupe de champs sous l’éditeur principal. (Si ce n’est pas le cas, vous avez surement dû faire une erreur quelque part… un oubli de publication du groupe peut-être ?). Vous avez bien le nom de votre groupe ainsi que le titre de votre champ et son texte de substitution qui ici est Name (texte à remplacer par le vôtre).[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

4 – Rendre votre groupe de champ personnalisé visible sur votre site

[list style= »style4″] [li]Votre champ s’est bien intégré là où vous le souhaitiez MAIS, problème : il est invisible ! Pourquoi ? Car sa boucle n’est pas créée et il vous faut l’ajouter aux fichiers de votre thème par le biais de FileZilla avec un éditeur de code (sublime text ou dreamweaver).[/li] [li]Ouvrez votre éditeur de texte et créez un nouveau fichier PHP. Copiez collez le bout de code ci-dessous (en remplaçant les mots roses par le titre et le nom de votre champ personnalisé) dans votre fichier et enregistrez-le sur votre bureau en lui donnant comme nom : champs_personnalises_blog.php ou champs_personnalises_portfolio.php ou bien encore champs_personnalises_page.php[/li]
<!-- CONTENU ACF -->
<?php
// Contrôle si ACF est actif
if ( !function_exists('get_field') ) return;
?>
<div class="post-content-acf">
// Contrôle si le champ est vide, si oui alors le champ ne s'affiche pas
<?php if( !empty(get_field('styling')) ): ?>
<div class="acf-MON-CHAMP"><label><strong>TITRE-DE-VOTRE-CHAMP :</strong></label>
<?php the_field('NOM-DE-VOTRE-CHAMP'); ?></div>
<!--acf-MON-CHAMP-->
</div>
<!-- CONTENU ACF -->
[li]Ouvrez maintenant FileZilla, connectez-vous à votre base de données et faites le chemin suivant : www / wp-content / themes / (le nom de votre thème) et ajoutez votre fichier. Pour ajouter votre fichier, il suffit de faire un cliqué glissé du bureau vers FileZilla.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [/list]

5 – WP Editor & SF Admin Bar Tools

[list style= »style4″] [li]Installez les deux extensions suivantes : WP Editor et SF admin bar tool. WP Editor va nous servir pour pouvoir accéder aux fichiers php de votre thème et cela va vous éviter de passer par filezilla. SF admin bar tool, va vous permettre de savoir dans quelle partie il faudra inclure le nouveau document php que vous venez de créer pour votre champ personnalisé.[/li] [li]Vous allez premièrement ouvrir votre site et vous rendre à l’endroit où vous avez décidé d’ajouter votre champ. Ici j’ai choisi de le mettre dans le portfolio, je vais donc me rendre sur cette page. L’admin bar tool m’indique que le bon endroit où inclure mon fichier serait : content-portfolio.php.[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Avec WP Editor (pour y accéder : apparence / theme editor), je me rends donc dans content-portfolio.php et je vais pouvoir mettre le code qui va inclure mon champ dans le template du projet de mon portfolio. Dans content-portfolio, on remarque une ligne qui est <?php get_template_part( 'content-portfolio-infos-projets' ); ?> en dessous de <div class="post-content"><?php the_content(); ?></div> . La première ligne avec le div concerne tout le contenu du post de mon projet, c’est à dire : son titre, sa date, ses images, ses textes… ! La seconde, va intégrer le champ en dessous de tout ceci, grâce au fichier php que vous aviez créé. [/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Vous devez donc copier coller cette ligne dans le bon fichier php et au bon endroit : <?php get_template_part( 'nom-de-votre-fichier-php-personnalisé' ); ?>[/li] [/list]

6 – Résultat du tutoriel

[list style= »style4″] [li]Pour terminer, vous allez pouvoir tester votre champ, ou vos champs si vous en avez créé plusieurs.[/li] [li]Testons de remplir 3 champs personnalisés et de voir ce que cela donne :[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ?   [li]Mes 3 champs sont bien là, visibles et au bon endroit. En dessous du titre, de la date, des images et textes et placé avant le pied de page.[/li] [li]Maintenant, si par exemple, je n’ai pas toutes les informations et que je puisse pas remplir ces infos, voyons voir ce que cela affiche :[/li]   Studio Blueberrydesigns - ACF tutoriel - comment ajouter un groupe de champs personnalisés sur WordPress ? [li]La seule info que j’ai indiquée est visible, et les autres non. C’est exactement ce que l’on veut. C’est grâce à la fonction php if empty (contrôle si c’est vide) que l’on peut faire ceci.[/li] [/list]

Le tutoriel est à présent terminé. Je vous conseille de désinstaller l’application WP Editor par la suite. Cette extension peut s’avérer pratique pour ce genre de manipulation, mais elle peut rendre votre site vulnérable. Si une personne parvenait à accéder à votre admin, il aurait de cette façon, accès à tous vos fichiers source. Il pourrait même en supprimer ou en rajouter. La meilleure solution sera de passer par votre éditeur de texte et FileZilla pour une sécurité garantie.