Générer une page de template avec plusieurs éditeurs WYSIWYG avec ACF

WordPress permet de créer très facilement du contenu pour son site web via la création d’articles et de pages.

Les éditeurs WYSIWYG.

Cette création de contenu se fait grâce à des éditeurs dit WYSIWYG (“What you see is what you get”) c’est-à-dire que ce que vous verrez dans l’éditeur de l’interface d’administration de WordPress sera exactement pareil que sur la page de votre site web.

éditeur de WYSIWYG

Editeur WYSIWYG de WordPress.

affichage WYSIWYG

Affichage sur site web.

Le contenu de cet éditeur va ensuite être récupéré par le fichier PHP qui est chargé d’afficher les pages de votre site. Ce fichier se nomme page.php et se trouve dans le dossier du thème.

Cependant, avec ce fichier, toutes nos pages vont avoir la même structure. La sidebar sera placée au même endroit, si il y en a une, le menu de navigation sera toujours le même, etc. Cela peut être problématique si l’on a envie de diversifier la mise en place du contenu de nos pages.

Encore une fois, les développeurs de WordPress ont pensé à tout car il est possible de créer des templates (modèles en français) de pages personnalisées afin d’avoir la liberté de diversifier le rendu.

Pour cela, il faut créer un nouveau fichier dans votre thème enfant (si vous ne savez pas ce qu’est un thème enfant, un article sur le sujet est disponible ici). Ce fichier doit être nommé comme suit : page-personnalisee.php (le mot personnalisee peut être remplacé par n’importe quel autre mot). Ainsi à l’intérieur de ce fichier et pour que WordPress le prenne en compte, vous allez devoir y placer l’en-tête suivant :

fichier page personnalisée

Attention à ne pas mettre d’espace entre name et les deux points “:” sinon WordPress ne le prendra pas en compte.

Ainsi, après enregistrement de ces modifications, lorsque l’on souhaitera créer une nouvelle page, une nouvelle rubrique Modèles, sur la droite, sera créée nous permettant de sélectionner notre template de page.

rubrique modèles

Ce menu déroulant permet de sélectionner :

  • soit le modèle par défaut (c’est-à-dire le fichier page.php).

  • soit une des pages personnalisées créées en suivant les instructions précédentes.

Exemple de création de page : Deux éditeurs WYSIWYG avec Advanced Custom Fields.

Nous allons créer une page personnalisée avec deux éditeurs de contenus WYSIWYG. Pour cela, nous allons avoir besoin d’installer le plugin ACF afin de créer notre deuxième éditeur.

Nous allons donc nous rendre dans la partie Ajouter du plugin ACF grâce au menu sur la gauche.

ajouter acf

Sur cette page, nous avons plusieurs champs possibles.

groupe de champs acf

Tout d’abord, on renseigne le nom du groupe de champs et ensuite il faut assigner ce champ. Comme on le remarque sur l’image ci-dessus, nous l’assignons à un Modèle de page qui est la Page Personnalisée que nous avons créée précédemment.

Nous pouvons maintenant créer un champ en cliquant sur Ajouter.

modèle de page

Nous donnons un titre à au type de champ. Le nom du champ en dessous va s’auto-compléter en fonction du nom du titre. Ce nom va nous permettre d’identifier le champ afin de le récupérer dans notre page, ce que nous verrons un peu plus loin dans cette article.

Et enfin, on choisi le type de champ qui est ici un éditeur WYSIWYG.

éditeur WYSIWYG

Nous obtenons ainsi bien nos deux éditeurs WYSIWYG dans la page de création de notre Page Personnalisée.

Ensuite, dans le fichier de notre Page Personnalisée, nous allons pouvoir récupérer et afficher le contenu de l’éditeur WYSIWYG créé avec ACF grâce à la fonction the_field(“nom_du_champ”) et le contenu de l’éditeur WYSIWYG classique grâce à the_content().

fichier page personnalisée

Conclusion.

WordPress permet de créer des pages personnalisées afin d’étendre les possibilités de création et d’affichage des pages dans votre site web.

Ainsi grâce au plugin ACF, aux shortcodes ( voici l’article sur les shortcodes ici) et aux widgets (voir l’article sur les sidebar ici), il est désormais possible de créer de multiples types de page pour son site web.

PrestaShop

Prestashop

Platinium partner

Shoppingfeed

Partner

Google

Premier Partner

Google Suite

Partner

Office 365

Partner

Recherche