Comment utiliser les champs ACF pour déterminer la visibilité du contenu

Les champs ACF peuvent être ajoutés à votre site Web à l'aide du plugin Advanced Custom Fields (ACF). La visibilité du contenu, en revanche, peut être appliquée à l'aide du plug-in Visibility Logic For Elementor. Ces deux plugins peuvent en fait travailler main dans la main pour implémenter la visibilité du contenu. Il est cependant important de noter que le plugin Visibility Logic doit être utilisé avec le plugin Elementor et il est donc nécessaire que vous installiez également le plugin Elementor. Pour élargir le champ d'application des paramètres de visibilité, il est recommandé d'installer également le plug-in Visibility Logic Pro.

Dans cet article, nous examinerons un exemple de la façon dont nous pouvons implémenter la visibilité du contenu à l'aide des champs ACF en ajoutant un champ personnalisé aux publications et en appliquant les paramètres dans un seul modèle de publication.

Cet article suppose que vous avez déjà installé le plugin Visibility Logic (gratuit et pro), ainsi que le plugin Elementor.

Table des matières

Installation du plug-in ACF

Configuration d'un champ personnalisé dans une publication

• Ajout d'un champ personnalisé
• Affichage et ajout de contenu au champ personnalisé

Création d'un modèle de publication unique

Configuration des paramètres de visibilité

Aperçu de la publication

Conclusion

Installation du plug-in ACF

Pour installer le plugin ACF, accédez à la section Plugins > Ajouter un nouveau dans votre tableau de bord WordPress et recherchez « Champs personnalisés avancés ».

Ensuite, installez et activez le plugin Advanced Custom Fields de Delicious Brains.

Configuration d'un champ personnalisé dans une publication

Ajout d'un champ personnalisé

Lors de l'activation du plugin, accédez à la section Champs personnalisés > Ajouter un nouveau dans votre tableau de bord WordPress.

Dans l'écran suivant, vous serez présenté avec un certain nombre de champs de données personnalisés à remplir comme indiqué ci-dessous :

Dans le "Ajouter un nouveau groupe de champs", vous pouvez ici remplir le titre du groupe de champs souhaité. Dans notre cas ici, nous l'aurons comme "Contenu de publication supplémentaire".

Ensuite, cliquez sur "Ajouter un champ" pour commencer à ajouter votre premier champ.

Cela générera une section de champ dans laquelle vous remplirez maintenant les détails de votre champ.

Libellé du champ : remplissez le libellé à utiliser pour identifier le champ. Dans notre cas ici, nous l'avons mis sur "conclusion".

Champ : Nom Ce champ sera rempli automatiquement lors de l'ajout du libellé du champ.

Type de champ : Définissez le type de champ que vous souhaitez avoir pour votre champ personnalisé. Dans notre cas ici, ceci est réglé sur "Zone de texte".

Instructions : ici, vous pouvez définir un contenu d'orientation que les auteurs de publication verront lors de la soumission des données de champ .

Obligatoire : définissez cette option sur oui ou non selon que vous souhaitez que ce champ soit toujours rempli ou non. Dans notre cas, nous le définirons sur "Non".

Valeur par défaut : dans ce champ, vous pouvez définir une valeur préexistante qui apparaît lors de la création de la publication. Ceci est facultatif et donc dans notre cas ici, nous avons laissé ce champ vide.

Texte de l'espace réservé : ici, vous pouvez spécifier le texte qui est rendu dans le champ de saisie.

Limite de caractères : ici, vous pouvez spécifier le nombre maximal de caractères que le champ peut contenir. Dans notre cas, nous laisserons ce champ vide car nous n'avons pas l'intention d'ajouter de limitation de caractères.

Lignes et nouvelles lignes : la disponibilité de ces champs dépend du type de champ sélectionné. Par exemple dans notre cas, nous avons sélectionné "zone de texte", c'est pourquoi les champs sont rendus. En leur sein, vous pouvez définir le nombre de lignes que la zone de texte contiendra ainsi que la mise en forme à appliquer dans les nouvelles lignes.

Logique conditionnelle : Ici, vous pouvez choisir de définir ou non une logique d'affichage pour le champ. Dans notre cas ici, nous ne définirons aucune logique d'affichage.

Wrapper Attributes : Ce champ vous permet d'ajouter la largeur au champ wrapper. Dans notre cas, nous l'avons fixé à 50 %. Vous pouvez également ajouter la classe et l'ID au wrapper, à des fins CSS. Leur ajout est toutefois facultatif.

Ensuite, dans le segment d'emplacement, définissez une règle sur l'endroit où le groupe de champs doit apparaître. Dans notre cas, nous le définirons sur le type de publication des messages.

Dans le segment "Paramètres", assurez-vous que le groupe de champs est "actif". Vous pouvez laisser le reste des paramètres du segment aux paramètres par défaut ou les modifier en fonction de vos préférences.

Une fois ce qui précède effectué, vous pouvez alors publier le groupe de champs .

Affichage et ajout de contenu au champ personnalisé

Accédez à la section Articles de votre tableau de bord WordPress et sélectionnez pour modifier l'un de vos articles.

Dans l'écran Post edit, vous remarquerez maintenant un nouveau champ "Conclusion" dans notre cas.

Dans ce champ, vous pouvez maintenant ajouter du contenu de conclusion et enregistrer vos modifications

Création d'un modèle de publication unique

Nous créerons ensuite un modèle Elementor que nous pourrons utiliser pour toutes les publications de notre site Web. Pour ce faire, accédez à la section Modèles > Ajouter un nouveau dans votre tableau de bord WordPress.

Dans la fenêtre contextuelle rendue, définissez le type de modèle sur "Single Post", ajoutez le nom du modèle et procédez à sa création.

Ensuite, vous pouvez ajouter des sections et les widgets de publication unique que vous souhaitez avoir dans votre publication.

Une fois cela fait, cliquez sur publier et définissez la condition d'affichage sur "messages".

Vous trouverez ci-dessous un exemple de screencast à ce sujet :

Configuration des paramètres de visibilité

Ensuite, nous devrons définir le paramètre de visibilité en fonction du champ ACF que nous avons créé. Dans notre exemple ici, nous ajouterons un paramètre pour masquer la "boîte d'auteur" sur les articles avec une conclusion.

Pour ce faire, sélectionnez pour modifier le modèle Single Post Elementor que nous avions créé précédemment. Dans celui-ci, sélectionnez pour modifier la "boîte Auteur".

Cliquez sur l'onglet "Stax Visibility" dans le panneau de gauche.

Le paramètre "Activer la logique de visibilité" et vous devriez alors avoir un certain nombre de segments de visibilité en place.

Dans les paramètres "Général", spécifiez ce qui suit :

• Afficher/Masquer : Masquer
• Type de conditions : Toutes

Sur le segment Post/Page, activez Post/Page et définissez les éléments suivants :

• Type de message personnalisé : Messages
• Méta : conclusion
• Condition méta : non vide

La méta est "conclusion" provient du champ ACF que nous avons créé.

Une fois cela fait, mettez à jour vos modifications.

Aperçu de la publication

On peut maintenant vérifier le post dont on a ajouté la conclusion et au sein de ce post, on ne devrait pas avoir une vue de la case auteur, par rapport aux autres posts qui n'ont pas de conclusion

Ci-dessous un exemple d'illustration :

Conclusion

Lors de la création de champs personnalisés sur votre site, vous souhaiterez peut-être appliquer des paramètres de visibilité aux sections ou aux éléments affichant les champs. Le guide ci-dessus couvre un exemple de scénario sur la façon dont vous pouvez facilement y parvenir.

Ces configurations peuvent également être appliquées à tout type de publication que vous pourriez avoir sur votre site. Par exemple, dans les magasins de commerce électronique, cela peut être utile si vous souhaitez masquer ou afficher les données d'un champ personnalisé particulier pour les utilisateurs qui ont acheté un produit dans le magasin.