WordPress sont utiles aux propriétaires de sites car ils permettent de stocker des données supplémentaires et d'améliorer les fonctionnalités des extensions et des thèmes . Les champs personnalisés avancés vous permettent d'ajouter des informations uniques. Par exemple, une extension WooCommerce utilise des champs pour les détails des produits tels que le prix et la couleur. Une extension d'événements utilise des champs pour le lieu et l'heure de l'événement. Les champs personnalisés vous offrent la flexibilité nécessaire pour stocker des données pertinentes.
Les champs personnalisés de WordPress permettent d'inclure, de stocker et d'afficher des données supplémentaires relatives au contenu. Fonctionnant comme des conteneurs de métadonnées, ils alimentent diverses fonctionnalités dans les extensions et les thèmes. De plus, les utilisateurs peuvent créer des champs personnalisés adaptés à leurs besoins spécifiques, facilitant ainsi la gestion personnalisée des données au sein de WordPress.
Dans ce blog, nous explorerons comment intégrer des champs personnalisés avancés dans la conception WordPress à différentes étapes du développement WordPress .
Pourquoi avez-vous besoin de champs personnalisés dans WordPress ?
Que vous gériez une boutique en ligne avec WooCommerce ou planifiiez des événements avec une extension de calendrier, les champs personnalisés offrent une solution polyvalente pour adapter votre site web à vos besoins spécifiques. Ils vous permettent de stocker des données supplémentaires par rapport aux champs standard des articles ou des pages, vous offrant ainsi la possibilité de créer des mises en page plus dynamiques et attrayantes.
À lire également : Plus de 40 plugins WooCommerce incontournables
Les principaux avantages de l'utilisation des champs personnalisés sont les suivants :
Stockage des métadonnées : Stockez les métadonnées pertinentes pour les articles, les pages ou les types de publications personnalisés.
Affichage amélioré du contenu : Présentez le contenu de manière organisée et esthétique.
Intégration de plugins : Intégrez facilement les plugins populaires pour le référencement (SEO) , le commerce électronique, la mise en cache , les événements, la sécurité , la recherche WordPress et bien plus encore.
Expérience utilisateur personnalisée : Adaptez l’expérience utilisateur de votre site web de petite entreprise en affichant un contenu spécifique en fonction de champs personnalisés.
Flexibilité à l'épreuve du temps : Adaptez-vous facilement à l'évolution des besoins en contenu sans modifier la structure de base de WordPress.
Votre site WordPress, à l'aspect désordonné, fait fuir vos clients ?
Nos designers expérimentés peuvent moderniser le design de votre site WordPress grâce à des champs personnalisés avancés
Que sont les champs personnalisés intégrés à WordPress ?
Ajouter des champs personnalisés dans WordPress est un processus simple et efficace, qui améliore l'organisation et les fonctionnalités du contenu. Grâce aux options disponibles dans les éditeurs classique et par blocs, l'activation des champs personnalisés intégrés à WordPress est aisée et permet une saisie simplifiée des paires clé/valeur pour une personnalisation avancée.
Voici comment vous devriez procéder :
Configuration de l'éditeur classique : Accédez aux options d'écran et activez les champs personnalisés pour l'interface de l'éditeur classique.
En savoir plus : WordPress 6.2 : Éditeur de site repensé, mode d’écriture sans distraction et insertion de blocs mise à jour
Configuration de l'éditeur de blocs : Accédez à la zone Options et activez les champs personnalisés pour l'éditeur de blocs.
Accéder aux champs personnalisés : Une fois activés, les champs personnalisés se trouvent sous votre contenu.
Saisie des données : Entrez les informations de votre champ personnalisé à l’aide de paires clé/valeur.
Fonctionnalités intégrées : Bien que fonctionnelle, la méthode native peut manquer d’ergonomie. Vérifiez les options d’optimisation.
Pensez aux plugins : nombreux sont ceux qui optent pour le plugin Advanced Custom Fields pour une expérience plus intuitive.
Ajouter vos champs dans Advanced Custom Fields : Guide étape par étape
Advanced Custom Fields (ACF) propose une version premium accessible et abordable. La version gratuite couvre la plupart des besoins de base grâce à ses différents types de champs et ses fonctionnalités conviviales.
La version Pro propose des fonctionnalités pratiques telles que les champs répétables pour gérer plusieurs instances de données par article, les blocs ACF pour Gutenberg , les champs de contenu flexibles pour des mises en page personnalisées et les champs de galerie pour importer plusieurs images. ACF Pro est disponible à partir de 49 $ par an pour une utilisation sur un seul site, avec la possibilité de passer à une version supérieure selon vos besoins.
Que vous utilisiez la version gratuite ou la version pro, l'ajout de vos champs suivra cette méthode :
Créer un nouveau groupe de champs
Après avoir installé et activé la version accessible d'Advanced Custom Fields depuis WordPress.org, rendez-vous dans Champs personnalisés > Ajouter pour créer votre premier groupe de champs.
Un « groupe de champs » est un ensemble de champs personnalisés affichés ensemble dans votre tableau de bord WordPress.
Dans cet exemple, nous allons créer un groupe de champs avec cinq champs personnalisés.
Nommez votre groupe de champs et choisissez où il doit apparaître. Pour les articles de blog, conservez l'option par défaut « Article ». Si vous souhaitez l'afficher ailleurs, par exemple avec un type de publication personnalisé, vous pouvez la modifier. Vous pouvez également ajouter des règles pour afficher vos champs à différents endroits.
Lire la suite : Comment développer un site web WordPress personnalisé ?
Ajouter des champs personnalisés
Pour continuer, sélectionnez le bouton « + Ajouter un champ » afin d'intégrer votre champ personnalisé initial. Bien que de nombreuses options vous soient proposées, il est facultatif de remplir tous les champs.
Les deux sélections principales sont :
Libellé du champ : il s’agit du nom visible dans l’éditeur et qui sert de base au nom du champ utilisé dans le code. La modification du nom du champ est facultative.
Type de champ : Choisissez le type de données que vous souhaitez collecter, par exemple Nombre pour les données numériques ou Adresse électronique pour les adresses électroniques.
Pour le premier champ, choisissez le type de champ « Bouton radio ». Ensuite, saisissez les options disponibles pour la sélection par boutons radio dans la zone « Choix ». Vous pouvez également ajuster les paramètres tels que les exigences du champ et la valeur par défaut selon vos besoins.
Prenons l'exemple d'un champ personnalisé permettant de saisir la distance parcourue. Dans ce cas, sélectionnez le type de champ « Nombre ». Vous pouvez indiquer l'unité de distance pour plus de clarté et définir des valeurs minimales et maximales à des fins de validation.
Répétez ces étapes pour chaque champ personnalisé supplémentaire que vous souhaitez inclure. Une fois terminé, votre configuration devrait ressembler à l'exemple fourni.
Configurer et publier
Pour terminer, faites défiler vers le bas jusqu'à la section « Paramètres ». Vous pourrez alors modifier l'apparence de vos champs dans l'éditeur WordPress.
En général, vous pouvez conserver les paramètres par défaut, mais n'hésitez pas à les personnaliser si nécessaire. Par exemple, vous pouvez afficher vos champs personnalisés au-dessus de l'éditeur WordPress standard. Une fois vos paramètres configurés, cliquez sur « Publier » pour activer votre groupe de champs.
À lire également : Résolution du problème WordPress « Échec de la publication. La réponse n’est pas une réponse JSON valide. »
Développer les informations dans l'éditeur WordPress
Une fois votre groupe de champs publié, vos champs personnalisés seront disponibles dès la création d'un nouvel article. Ils s'intégreront parfaitement sous l'éditeur, aussi bien dans l'éditeur TinyMCE classique que dans le nouvel éditeur de blocs.
Champs personnalisés avancés en front-end
Félicitations ! Vous avez parcouru la moitié du chemin avec les champs personnalisés avancés. Passons maintenant à une étape cruciale : afficher les données de vos champs personnalisés sur la partie visible de votre site web.
Malgré l'ajout de champs personnalisés à vos articles de blog, ils apparaissent toujours comme des articles classiques affichés sur le site.
Changeons cela !
Voici trois méthodes pour afficher les données de vos champs personnalisés avancés :
Fichiers de modèles du thème : Idéaux pour les personnes à l’aise avec les aspects techniques et la manipulation de fichiers de modèles. Vous pouvez également consulter des modèles d’IA .
Code court : Simple et adapté à l’insertion de données de champ dans des articles spécifiques, mais nécessite une intervention manuelle.
Elementor Pro : Une option premium qui élimine le travail en PHP, idéale si vous préférez un éditeur visuel.
Choisissez la méthode qui vous convient ou explorez-les toutes : c’est vous qui décidez !
À lire également : Gutenberg contre Elementor : qui l’emportera en 2024 ?
Modèle de champs personnalisés avancés avec thèmes
La première méthode pour afficher les informations de vos champs personnalisés consiste à ajouter les fonctions PHP d'Advanced Custom Fields directement aux fichiers de modèle de votre thème enfant. Bien qu'un peu complexe, elle garantit un affichage cohérent des champs personnalisés.
Localisez et modifiez le fichier modèle unique correspondant à votre type de publication (par exemple, single.php ou content-single.php pour le thème TwentyNineteen).
Utilisez la fonction the_field() pour afficher les informations du champ, en combinant le balisage HTML avec PHP.
Placez ce code au-dessus du contenu habituel de votre article dans le fichier de modèle de thème, et le tour est joué ! Les données de votre champ personnalisé s’afficheront parfaitement au-dessus du contenu WordPress.
Lire la suite : Comment convertir du HTML en thème WordPress ?
Champs personnalisés avancés avec un code court
Vous cherchez une façon plus simple d'afficher les données de vos champs personnalisés ? Pensez aux codes courts. Il vous suffit d'insérer le code court chaque fois que vous souhaitez afficher un champ personnalisé. Bien que pratique, cette méthode nécessite une intervention manuelle et n'est pas automatisée.
Voici un exemple de shortcode :
L'insertion de ce code dans l'éditeur WordPress produira le même rendu côté client que la méthode utilisant un modèle de thème.
Conclusion
La maîtrise des champs personnalisés avancés ouvre un champ des possibles infini pour améliorer les fonctionnalités et la présentation du contenu de votre site WordPress. Que vous soyez propriétaire d'une boutique en ligne, organisateur d'événements ou simplement à la recherche d'une solution pour personnaliser votre site, les champs personnalisés vous permettent de stocker et d'afficher des données uniques en toute simplicité.
Grâce à l'interface intuitive, aux types de champs et aux options d'intégration de l'extension, vous pouvez créer des mises en page attrayantes, simplifier la gestion de contenu et offrir des expériences utilisateur sur mesure. Les champs personnalisés vous permettent d'adapter votre site web à son évolution sans en modifier la structure principale. Exploitez toute la puissance d'Advanced Custom Fields et découvrez un univers de personnalisation qui propulsera votre site WordPress vers de nouveaux sommets de professionnalisme et de sophistication.
