Une mise en page avancée dans l'éditeur de WordPress

En tant qu'agence Web nous créons souvent des sites Web pour des clients qui n'ont pas d'expérience avec HTML. Aussi, dès lors qu'ils veulent une mise en page plus sophistiquée pour leurs articles (par exemple plusieurs colonnes et plusieurs blocs de texte) il leur faudrait passer par l'éditeur HTML de WordPress car l'éditeur WYSIWYG ne le permet pas.

Dans cet article nous allons voir comment activer un modèle de mise en page multi-colonnes à l'intérieur de l'éditeur visuel de WordPress.

Créer une mise en page personnalisée

Tout ce que nous allons faire c'est d'injecter quelques éléments HTML dans l'éditeur et leur appliquer un peu de style.

En ajoutant le code qui suit dans le fichier functions.php, nous ajouterons, pour tout nouvel article, deux "divs" (content-col-main et content-col-side)

Notez que ce code ne s'appliquera qu'aux nouveaux articles. Les articles créés avant la modification du fichier functions.php conserveront leur mise en page.

Maintenant nous allons nous occuper du style (CSS) du HTML que nous injectons dans l'éditeur WYSIWYG.

Nous ajoutons le code suivant dans le fichier functions.php

La fonction "add_editor_style" applique le code CSS contenu dans la feuille de style passée en paramètre (editor-style.css)

Pour finir, dans le dossier du thème nous ajoutons le fichier "editor-style.css" et nous y plaçons le code suivant :

Maintenant quand nous créons un nouvel article, voici à quoi ressemble l'éditeur visuel :

Mise en page -- WordPress

Pour que l'article soit correctement affiché sur le site Web, il faudra bien évidemment copier/coller le code de la feuille de style "editor-style.css" dans la feuille du style du thème (style.css).

Plusieurs modèles de mise en page

Le code que nous avons vu sera appliqué de la même manière pour les articles, les pages, les articles personnalisés et en fait, partout ou l'éditeur visuel sera utilisé dans le back-office de WordPress.

Voyons donc comment, par le biais de conditions, appliquer un modèle de mise en page en fonction du type d'article.

Nous pouvons ajouter le code CSS de ces différentes mises en page dans le fichier editor-style.css ou créer une feuille de style pour chaque modèle de mise en page  de la manière suivante :

Dans le code ci-dessus (à placer dans le fichier functions.css), il faut remplacer [POSTTYPE] par le nom du type d'article personnalisé.