Créer un Custom Post Type (CPT) avec ACF pour une gestion privée dans WordPress

Un guide complet pour utiliser Advanced Custom Fields afin de créer et configurer des CPT non visibles en front-end
Stack : WordPress – Bricks Builder – ACF

Ce guide vous montrera comment créer et configurer un Custom Post Type (CPT) avec Advanced Custom Fields (ACF), le rendre non accessible en front-end et utiliser ses données via Bricks Builder. Nous utiliserons un cas d’usage concret : un CPT “Produit” uniquement utilisé dans le back-end.

Prérequis

• WordPress installé et configuré
• Bricks Builder installé et activé
• Plugin Advanced Custom Fields (ACF) installé et activé

Table des matières

1. Création du Custom Post Type avec ACF
2. Configuration des champs personnalisés avec ACF
3. Rendre le CPT non accessible en front-end
4. Configurer les permissions d’accès au CPT
5. Utiliser les données du CPT avec Bricks Builder
6. Exemples d’utilisation avec Bricks Builder

1. Création du Custom Post Type avec ACF

Étape 1 : Accéder à l’interface d’ACF pour créer un CPT

1. Dans votre tableau de bord WordPress, naviguez vers ACF > Types de publication.
2. Cliquez sur Ajouter un nouveau.

Étape 2 : Configurer les paramètres de base du CPT

1. Étiquette plurielle : “Produits” (le nom qui apparaîtra dans le menu)
2. Étiquette singulière : “Produit” (utilisé pour les boutons comme “Ajouter un Produit”)
3. Clé du type de publication : “produit” (identifiant technique, généralement en minuscules)
4. Décochez l’option “Public” : C’est cette option qui permettra de rendre le CPT non accessible en front-end.

Étape 3 : Configuration avancée du CPT

Cliquez sur Configuration avancée pour accéder à plus d’options :

Onglet “Général”

1. Supports : Cochez les fonctionnalités que vous souhaitez activer pour ce type de contenu :
   • Titre (obligatoire)
   • Éditeur (contenu principal)
   • Image mise en avant (si vous avez besoin d’une image principale)
   • Extrait (résumé court)
   • Champs personnalisés

Onglet “Visibilité”

1. Afficher dans l’interface utilisateur : Laissez coché pour que le CPT soit visible dans l’administration
2. Afficher dans le menu d’admin : Laissez coché pour avoir un menu dédié
3. Position du menu : Choisissez où placer le menu (ex: 5 pour le positionner après les Articles)
4. Icône du menu : Choisissez une icône pour votre CPT (ex: dashicons-cart)
5. Exclure des résultats de recherche : Cochez cette option pour que le CPT n’apparaisse pas dans les résultats de recherche du site

Onglet “URLs”

1. Réécriture de permalien : Désactivez cette option ou choisissez “Slug personnalisé”
2. Accessible publiquement via une requête : Décochez cette option pour empêcher l’accès direct via URL

Onglet “Permissions”

Vous pouvez configurer des permissions spécifiques ou utiliser les capacités par défaut.

Étape 4 : Enregistrer le CPT

Cliquez sur Publier pour créer votre CPT. Une fois enregistré, vous verrez un nouveau menu “Produits” dans votre tableau de bord WordPress.

2. Configuration des champs personnalisés avec ACF

Étape 1 : Créer un groupe de champs

1. Dans le tableau de bord WordPress, allez à ACF > Groupes de champs.
2. Cliquez sur Ajouter un nouveau.
3. Donnez un nom à votre groupe, par exemple “Détails du produit”.

Étape 2 : Configurer les règles d’affichage

Dans la section Règles d’affichage, configurez :

1. Type de publication égal à Produit
2. Cliquez sur Enregistrer

Étape 3 : Ajouter des champs personnalisés

Cliquez sur + Ajouter un champ pour chaque information dont vous avez besoin :

Champ “Prix”

• Étiquette : Prix
• Nom : prix
• Type : Nombre
• Instructions : Entrez le prix du produit
• Préfixe : € (dans l’onglet Présentation)
• Requis : Oui

Champ “Description courte”

• Étiquette : Description courte
• Nom : description_courte
• Type : Zone de texte
• Instructions : Entrez une description courte du produit

Champ “Caractéristiques”

• Étiquette : Caractéristiques
• Nom : caracteristiques
• Type : Répéteur
• Instructions : Ajoutez les caractéristiques du produit
• Sous-champs :
  • Nom de la caractéristique (Texte)
  • Valeur (Texte)

Champ “Images”

• Étiquette : Images
• Nom : images
• Type : Galerie
• Instructions : Ajoutez des images du produit

N’oubliez pas de cliquer sur Publier ou Mettre à jour pour enregistrer vos champs.

3. Rendre le CPT non visible en front-end

Pour s’assurer que le CPT est complètement invisible en front-end, vérifiez que vous avez bien :

1. Décoché l’option “Public” lors de la création du CPT
2. Coché “Exclure des résultats de recherche” dans l’onglet Visibilité
3. Décoché “Accessible publiquement via une requête” dans l’onglet URLs

4. Configurer les permissions d’accès au CPT

Pour limiter l’accès au CPT à certains utilisateurs :

Option 1 : Utiliser les capacités par défaut

Dans l’onglet Permissions de la configuration avancée du CPT :

1. Assurez-vous que “Renommer les capacités” est activé
2. Utilisez les capacités par défaut basées sur “Post”

Option 2 : Installer un plugin de gestion des rôles (optionnel)

Pour une gestion plus fine des droits, vous pouvez utiliser un plugin comme “Members” ou “User Role Editor” qui permettent de définir précisément quels rôles peuvent accéder, créer, modifier ou supprimer les CPT.

5. Utiliser les données du CPT avec Bricks Builder

Étape 1 : Créer une page avec Bricks Builder

1. Dans le tableau de bord WordPress, allez à Pages > Ajouter.
2. Donnez un nom à votre page, par exemple “Nos Produits”.
3. Cliquez sur Modifier avec Bricks.

Étape 2 : Utiliser Query Loop pour afficher les produits

1. Dans l’éditeur Bricks, ajoutez un élément Container.
2. À l’intérieur, ajoutez un élément Query Loop.
3. Dans les paramètres de Query Loop :
   • Type de requête : Posts
   • Type de publication : Produit
   • Nombre d’articles : Choisissez combien de produits afficher
   • Tri : Choisissez comment trier les produits

Étape 3 : Créer la structure d’affichage des produits

À l’intérieur du Query Loop, créez la structure d’affichage pour chaque produit :

1. Ajoutez un élément Div pour contenir chaque produit.
2. Ajoutez un élément Heading pour le titre du produit.
3. Utilisez le bouton Données dynamiques (icône en forme d’éclair) pour sélectionner {post_title}.

Pour les champs ACF :

1. Ajoutez un élément Text pour le prix.
2. Utilisez Données dynamiques et sélectionnez {acf_prix}.
3. Ajoutez un élément Text pour la description courte.
4. Utilisez Données dynamiques et sélectionnez {acf_description_courte}.

Étape 4 : Afficher les champs répéteurs et les galeries

Pour afficher le champ répéteur “Caractéristiques” :

1. À l’intérieur de votre structure produit, ajoutez un élément Container.
2. Transformez ce container en Query Loop.
3. Dans les paramètres :
   • Type de requête : ACF Repeater
   • Champ : caracteristiques

À l’intérieur de ce Query Loop répéteur :

1. Ajoutez un élément Div pour chaque caractéristique.
2. Ajoutez un élément Text pour le nom de la caractéristique.
3. Utilisez Données dynamiques et sélectionnez {acf_sub_nom_de_la_caracteristique}.
4. Ajoutez un élément Text pour la valeur.
5. Utilisez Données dynamiques et sélectionnez {acf_sub_valeur}.

Pour afficher la galerie d’images :

1. Ajoutez un élément Gallery.
2. Dans les paramètres, utilisez Sélectionner des données dynamiques et choisissez {acf_images}.

6. Exemples d’utilisation avec Bricks Builder

Exemple 1 : Affichage simple d’un produit spécifique

Si vous voulez afficher un produit spécifique sur une page :

1. Ajoutez un élément Container.
2. Ajoutez un élément Query Loop.
3. Configurez-le pour afficher un produit spécifique par ID.
4. Créez la structure d’affichage comme décrit précédemment.

Exemple 2 : Affichage de produits filtrés par méta-valeur

Pour afficher des produits selon une valeur spécifique :

1. Configurez un Query Loop.
2. Dans l’onglet Query :
   • Ajoutez un Filtre meta.
   • Sélectionnez le champ ACF que vous souhaitez utiliser pour le filtrage.
   • Définissez la condition et la valeur.

Exemple 3 : Utilisation des champs ACF dans d’autres éléments

Vous pouvez utiliser les données des champs ACF dans presque tous les éléments Bricks :

1. Images : Utilisez un champ ACF image comme source.
2. Boutons : Utilisez un champ ACF lien pour l’URL du bouton.
3. Conditions : Affichez ou masquez des éléments en fonction des valeurs des champs ACF.

Par exemple, pour n’afficher un élément que si le prix est supérieur à 50 € :

1. Sélectionnez l’élément.
2. Allez dans Conditions.
3. Créez une condition :
   • Dynamic Data : {acf_prix}
   • Opérateur : > (supérieur à)
   • Valeur : 50

Conclusion

En suivant ce guide, vous avez maintenant :

1. Créé un Custom Post Type “Produit” avec ACF
2. Configuré ce CPT pour qu’il soit accessible uniquement via l’administration WordPress et pas en front-end
3. Ajouté des champs personnalisés pour stocker vos données
4. Appris à utiliser ces données avec Bricks Builder

Ressources supplémentaires

• Documentation officielle d’ACF
• Documentation de Bricks Builder sur les données dynamiques
• Tutoriel pour les relations ACF avec Bricks Builder