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

WordPress :: Créer des articles relatifs avec Advanced Custom Fields (ACF)

Publié le : 

Modifié le : 

Par : 

Dans cet article, nous verrons comment créer des ensembles d’articles relatifs avec des contenus personnalisés et ACF.
Si vous découvrez ACF (Advanced Custom Fields), je vous recommande cet article .Créer et gérer ses premiers champs personnalisés avec Advanced Custom Fields dans WordPress.

Création du contenu personnalisé

J’utilise le plugin Custom Post Type UI pour la création d’un nouveau contenu (ce turoriel explique son fonctionnement). Je l’appelle Relatif et il sera de type article, c’est à dire non hiérarchique.

Capture: Nouveau contenu relatif avec Custom Post UI dans WordPress

Grâce au plugin, dans les options avancées, je ne garde que le titre pour ce contenu personnalisé. Les autres éléments seront ajoutés avec ACF (Advanced Custom Fields) dans la partie qui suit.

Mise en place des articles relatifs

Avec ACF (Advanced Custom Fields), je vais ajouté une zone d’édition pour mon nouveau contenu Relatif.

Création du champs ACF WYSIWYG pour installer les liens

Capture: Nouveau champ Advanced Custom Field dans WordPress

Vous pourriez vous demander ce qui me pousse à utiliser ce plugin pour cette nouvelle zone alors que j’aurai pu afficher le contenu de l’éditeur WordPress par défaut. La raison est simple. ACF (Advanced Custom Fields) permet d’afficher les champs personnalisés de n’importe quel post type directement dans votre contenu classique à l’aide de shortcode. Et ce nouveau contenus WYSIWYG fait partie des champs personnalisés disponibles. L’avantage de cette méthode est multiple:

  • Les dits contenus sont centralisé et synchronisé
  • L’implementation est simple
  • Les liens relatifs sont classés par thèmes avec un contrôle sur mesure
  • Les requêtes trop nombreuses dans la base de données sont évités.

Installation des contenus de liens relatifs

Les titres de chaque contenu Relatif ne seront utilisés que comme repère. Ils me permettrons d’identifier le contenu des liens installés. Les shortcode afficheront seulement le contenu de ce champs personnalisé WYSIWYG.

Capture: Liste d'articles relatifs dans WordPress

Dans chaque contenu Relatif les nouveaux champs ajoutés par ACF (Advanced Custom Fields), me permettrons d’ajouter mes liens sous forme de liste. Pour ajouter ces liens vers mes articles, je procède de la sorte:

  • j’ai deux fenêtres ouvertes. Une pour mon article. Une autre pour mon article relatif
  • je clique sur le favicon de mon article
  • j’effectue un glisser/déposer de ce favicon (voir image ci-dessous) dans la partie WYSIWYG de mon contenu Relatif. Le titre et l’URL sont automatiquement récupérés (avec Chrome sur Mac)
  • je sélectionne mes éléments et fait une liste simple.

Capture: glisser/déposer du favicon dans du contenu WordPress

Voici à quoi ressemble un des contenus Relatifs au final avec ma liste d’article classés par thème.

Capture: Liste d'article dans zone Advanced Custom Field

Ces groupes de liens sont facile à gérer dans mon back-office. Je les alimente au fur et à mesure des nouveaux articles crées. Comme ces contenus sont affichés en lien, la mise à jour est automatique.

Affichage des Articles Relatifs

C’est la partie magique. ACF (Advanced Custom Fields) permet avec un

C’est la partie magique. ACF (Advanced Custom Fields) permet avec un shortcode d’afficher n’importe quels champs d’un contenu classique ou personnalisé. Vous l’avez compris, nous allons afficher les listes créées dans le champ WYSIWYG des contenus Relatifs. Nous le ferons de manière contextuelle, quand c’est justifié dans tel ou tel article.

Utilisation du shortcode ACF

Le shortcode s’écrit de cette manière. Attention la faute sur acf (ici acff) est volontaire pour afficher le shortcode):

[acff field="nom_du_champs" post_id="123"]

Vous pouvez facilement afficher le ID du contenu personnalisé avec ce plug-in Reveal IDs qui ajoute une colonne supplémentaire. Sinon, à chaque édition du contenu personnalisé, vous avec le ID dans l’URL. Cherchez post= et vous aurez le même résultat.

Ici mon champ est gn_liste_articles et l’ID du contenu Relatifs sur les Expositions a pour numéro394.

Dans un article cela donnera

Capture: shortcode Advanced Custom Field dans le contenu

Et en ligne, c’est ma liste d’article qui s’affichera

Capture: Affichage du shortcode Advanced Custom Field en ligne

Bien sûr, j’aurai pu intégrer Autres articles directement dans le texte de mon article Relatifs. Dans tous les cas, à chaque fois que cedit contenu est modifié, la mise à jour est automatique dans tous les articles où ce shortcode a été placé.