Nous l'avons tous vu faire de nombreuses fois. De quoi je parle ? L'éditeur WordPress, rempli de HTML ou de shortcodes pour créer une mise en page personnalisée. Cela peut être très bien si vous êtes un développeur et le seul à travailler sur une page, mais que se passe-t-il si la page que vous avez créée était destinée à un client qui souhaite apporter des modifications une fois que vous avez terminé ?

Catastrophe! Il suffit d’une simple frappe incorrecte pour ruiner complètement tout votre travail acharné et recevoir un e-mail urgent de votre client vous informant que le ciel est tombé sur vous.

Heureusement, il existe plusieurs façons de créer des mises en page personnalisées dans WordPress qui facilitent l'expérience d'édition pour vos clients tout en vous offrant la flexibilité dont un développeur a besoin.

Champs personnalisés

Lors de la création d'une page dans WordPress, vous avez peut-être remarqué la zone de champs personnalisés sous l'éditeur. Cette case vous permet de saisir un nom de champ et une valeur qui lui est associée. Que pouvez-vous faire avec cela et pourquoi est-ce puissant ?

Supposons que vous ayez codé un modèle de page personnalisé pour la page d'accueil de votre client et que vous souhaitiez rendre une partie du texte modifiable. Le moyen le plus simple de procéder serait de modifier le texte directement dans le fichier modèle, mais ce n'est pas très convivial. Au lieu de cela, l'utilisation de champs personnalisés peut vous permettre d'exposer des parties d'un modèle de page personnalisé à vos clients pour modification, sans vous soucier de la rupture de la mise en page. Voici comment…

Ajouter un champ personnalisé

La première chose à faire est d'ajouter un nouveau champ personnalisé. Dans la zone Champs personnalisés, sélectionnez un nom existant ou saisissez-en un nouveau, puis saisissez la valeur souhaitée. Pour cet exemple, nous allons rendre l'en-tête de notre modèle de page personnalisé modifiable. Voici à quoi ressemble notre nouveau champ personnalisé.

Modifier votre modèle de page

Maintenant que nous avons un champ personnalisé, ajoutons-le à notre modèle de page personnalisé en utilisant le code ci-dessous.

 <div class="my-heading"> <h1><?php echo get_post_meta( get_the_ID(), 'main-heading', true ); ?></h1> </div>

Dans cet extrait, nous utilisons la fonction get_post_meta pour extraire la valeur de notre champ personnalisé de la base de données WordPress et la faire écho dans une balise h1. Notre champ personnalisé est nommé « main-heading », alors assurez-vous de l'échanger dans l'appel de fonction si le vôtre est différent.

Cette technique utilisant des champs personnalisés peut être répétée autant de fois que vous le souhaitez pour activer l'édition de différentes parties de votre mise en page.

Plugin de champs personnalisés avancés

Les champs personnalisés fonctionnent bien, mais ils ont leurs limites. D'une part, lorsque vous utilisez des champs personnalisés, vous perdez la possibilité d'utiliser les fonctions de base de l'éditeur telles que le gras et l'italique. Ils ne sont pas non plus très conviviaux si vous essayez de rendre modifiable autre chose qu'un texte, comme une image. C'est là qu'intervient l'un de mes plugins préférés, le plugin Advanced Custom Fields (ACF).

ACF vous permet de faire des choses vraiment incroyables, comme remplacer l'éditeur par défaut par vos propres paramètres de page personnalisés. C'est ce que nous faisons actuellement pour la plupart des pages personnalisées du nouveau site Web WordPress de Connor Group. La page d'équipe, par exemple, affiche une grille de vignettes d'employés cliquables qui s'ouvrent sur une biographie d'employé. Nous avons construit une interface simple utilisant ACF qui permettra à l'équipe marketing de Connor Group d'ajouter ou de supprimer facilement des employés au fur et à mesure de leurs déplacements.

L'ajout de ce type de fonctionnalité est facile à réaliser en créant des groupes de champs à l'aide de l'interface glisser-déposer d'ACF. Chaque groupe peut avoir un nombre illimité de types de champs différents et même inclure des groupes imbriqués de champs de répéteur qui peuvent être ajoutés ou supprimés comme les paramètres de la page d'équipe de Connor Group.

Des groupes de champs peuvent être ajoutés à n'importe quel écran de post-édition en fonction d'un ensemble de règles que vous définissez. Par exemple, les paramètres de la capture d'écran ci-dessus ne sont appliqués à l'écran de publication que lorsque la publication en cours de modification est la page Équipe.

Utilisation de champs personnalisés avancés dans votre modèle de page

L’utilisation des valeurs ACF dans vos modèles de page personnalisés devrait vous sembler familière, car cela est similaire à l’utilisation des champs personnalisés WordPress standard.

 <div class="mon-titre">
    <h1><?php the_field( 'titre' ); ?></h1>
</div>

Comme vous pouvez le voir dans l'exemple ci-dessus, le code que nous utilisons ressemble étonnamment au code que nous avons utilisé pour les champs personnalisés standard. La seule différence est que nous utilisons la fonction ACF the_field au lieu de la fonction WordPress get_post_meta. En passant cette fonction, le nom de votre champ affichera tout le contenu qui a été saisi ou l'URL d'une image si vous utilisez un champ d'image.

Advanced Custom Fields est un plugin vraiment puissant qui ouvre un monde de possibilités aux développeurs. Si vous ne l'avez pas déjà fait, je vous suggère fortement d'essayer. D’après mon expérience, cela a été assez amusant à mettre en œuvre et la réponse de nos clients a été extrêmement positive.

Constructeurs de pages frontales

Les constructeurs de pages WordPress front-end sont une option relativement nouvelle et intrigante. Même si vous devrez sacrifier une certaine flexibilité en tant que développeur, il existe de nombreux scénarios dans lesquels son utilisation peut vous faire gagner beaucoup de temps et rendre l'édition d'une page beaucoup plus intuitive pour vos clients.

Développement rapide

L'utilisation d'un générateur de pages vous permet de mettre en page les pages visuellement et rapidement. Depuis la création de notre propre générateur de pages, il y a eu de nombreux scénarios dans lesquels nous n'ouvrons même pas Photoshop. Au lieu de cela, nous réalisons nos maquettes en direct dans le navigateur, les examinons avec le client et apportons les modifications nécessaires. Ce flux de travail peut ne pas fonctionner pour chaque page que vous créez, c'est donc à vous de décider quelle solution est la meilleure dans le contexte de ce que vos clients tentent de réaliser.

Édition intuitive

Le but de tout cela est de faciliter l'édition pour vos clients et c'est exactement ce que l'utilisation d'un constructeur de pages front-end peut faire. Au lieu de travailler dans l’administration WordPress, vos clients pourront pointer et cliquer sur le contenu de leurs pages pour le modifier dans une interface frontale intuitive.

Conclusion

Lorsqu’il s’agit de créer des mises en page personnalisées dans WordPress, tout ce dont vous avez besoin est parfois une solution simple comme les champs personnalisés intégrés. D'autres fois, vous aurez peut-être besoin de quelque chose de plus robuste comme le plugin Advanced Custom Fields ou de quelque chose de plus intuitif qui permet un développement rapide comme un constructeur de pages frontales. En fin de compte, chacune de ces solutions contribue au même objectif : faciliter l’édition de mises en page personnalisées dans WordPress pour vos clients.

Ce sont trois de mes solutions préférées que j’ai dans ma boîte à outils de développement WordPress pour créer des sites clients. Quelles solutions avez-vous trouvées qui fonctionnent bien pour vous et vos clients ?