Créateur de thèmes WordPress :: Formateur :: Web Designer

WordPress :: Utilisation basique d’Advanced Custom Fields (ACF)

Publié le : 

Modifié le : 

Par : 

ACF : Advanced Custom Fields est un plug-in très puissant et très bien documenté. Il est créé par le jeune développeur australien Elliot Condon. Ce plug-in permet d’ajouter des champs personnalisés à vos articles, pages ou contenus personnalisés. Vous pourriez ainsi créer à la manière d’un formulaire une interface sur mesure pour cadrer le contenu ajouté par les administrateurs du site.

Créer un Groupe de Champs dans ACF

Dans cette première étape nous allons regrouper les différents champs que nous allons ajouter à notre contenu personnalisé Film. Ce contenu a été créé avec le plug-in Post Type UI. Les deux plug-ins sont parfaitement compatibles.

Nouveau groupe de champs ACF

Capture: Nouveau groupe de champs dans Advanced Custom Field

J’ai utilisé ici quelques types de champs: Date, Nombre et Éditeur WYSIWYG. Vous constaterez dans les types de champs qu’il existe de nombreuses possibilités.

Pour chaque groupe de champs, il est possible d’ajouter autant d’éléments que vous le souhaitez. À chaque fois, le procédé sera le même à part les options liées au type de champs.

Capture: Création et modification de champs dans Advanced Custom Field

Affichage du groupe de champs ACF dans le back-office

Ici, comme j’ai appliqué ce groupe de champs aux contenus personnalisés Film, une nouvelle metaboxe apparaît sous ma zone d’édition.

Capture: Affichage des groupes de champs Advanced Custom Field dans le post

Affichage des champs personnalisés ACF dans les articles

Créer du modèle single

Nous voulons afficher les nouveaux personnalisés après le contenu de nos articles. Nous allons créer le modèle en nous reposant sur template WordPress single.php. Après avoir dupliqué ce contenu, je le renomme single-film.php. film étant le nom de mon contenu personnalisé. Pour plus de détail sur le fonctionnement de cette écriture, vous pouvez vous référer à l’article du codex: Template Hierarchy.

Modification de la boucle

La single.phppar défaut fait un appel vers un autre fichier avec la fonction get_template_part( 'loop','single');. Cette fonction est documentée dans cet article: get template part. Pour simplifier le tutoriel, je vais intégrer directement son contenu dans mon nouveau modèle single-film.php. Tout le code de la nouvelle single se trouve un peu plus bas.

Je vais enlever de la boucle classique (loop-single.php) les éléments suivants:

  • les métas du titre (date, auteur)
  • la navigation en haut et en bas
  • la boxe qui présente l’auteur
  • le lien pour le mettre en favori
  • l’appel vers le fichier pour les commentaires

Dans le code, j’ai marqué les éléments classiques de la boucle avec le commentaire <!-- BOUCLE CLASSIQUE -->.
Pour plus d’information sur le fonctionnement de la boucle, vous pouvez lire cet article du codex: The Loop « WordPress Codex

Intégration des champs ACF

Attention, avant tout appel de champs ACF, il est important de vérifier si le plugin est actif. Pour ce faire on utilise la commande suivante au tout début de notre script. Si la fonctioninitiée par ACF, get_field(), n’est pas active, le script s’arrête.

<?php
// Contrôler si ACF est actif
if ( !function_exists('get_field') ) return;
?>

Après les contenus classiques de la boucle, j’ai intégré le résultat des champs ACF entre les commentaires <!-- CONTENU ACF -->.
Pour afficher les contenus ACF dans notre cas, rien de plus simple dans notre cas. Vous utilisez la fonction <?php the_field('nom_du_champ');?>.

Si je place tous mes contenus dans une liste, cela donne:

<ul>
    <li><strong>Année de sortie: </strong><?php the_field('gn_ann_sortie'); ?></li>
    <li><strong>Nombre de visiteurs: </strong><?php the_field('gn_nombr_visiteurs'); ?> personnes</li>
    <li><strong>Commentaire: </strong><?php the_field('gn_comment'); ?></li>
</ul>

À chaque fois, le nom_du_champ correspond au nom donné à chaque champ dans mon groupe ACF.

Le résultat final de mon fichier single-film.php donnera:

[gist id=4100620 file=acf-single-film.php]

Et le résultat en ligne

Capture: Affichage des champs Advanced Custom Field sur le site

Force l’activation d’ACF pour les admins

Au lieu d’utiliser la condition if ( ! function_exist('get_field' ) vous pouvez créer une condition générale dans votre fichier functions.php


// check ACF
if ( ! function_exists( 'get_field' ) ) {
	add_action( 'template_redirect', 'template_redirect_warning_missing_acf', 0 );
	function template_redirect_warning_missing_acf() {
		wp_die( sprintf( 'Ce site ne fonctionne pas sans l\'extension Advanced Custom Fields. Merci de vous connecter au site pour l\'activer.', wp_login_url() ) );
	}

}

 

Liens