Récemment, j’ai créé un site web pour une clinique privée en utilisant WordPress. Pour rendre l’administration du site web aussi simple que possible, j’ai ajouté quelques blocs WordPress personnalisés. Ici, je vais vous montrer comment créer un bloc WordPress simple par vous-même.
En utilisant les bons outils, vous pouvez créer un bloc WordPress personnalisé de l’éditeur Gutenberg en quelques minutes seulement. Voici comment vous pouvez le faire.
Création d’un bloc WordPress personnalisé sans quitter le panneau d’administration de WordPress
Pour créer un bloc personnalisé dans WordPress, vous devrez télécharger un plugin WordPress gratuit appelé Genesis Custom Blocks. Pas d’inquiétude, vous n’avez pas besoin d’utiliser un thème basé sur Genesis Framework pour utiliser ce plugin – il fonctionne avec tout thème qui prend en charge les blocs WordPress.
Première étape – installer le plugin Custom WordPress Blocks
Allez dans Plugins >> Add new, et installez le plugin Genesis Custom Blocks.
Une fois le plugin activé, vous trouverez ses paramètres dans le panneau d’administration de WordPress >> Custom blocks.
Deuxième étape – créer des champs de blocs WordPress personnalisés
Une fois que le plugin est activé, allez dans Blocs personnalisés >> Ajouter nouveau pour commencer à construire votre premier bloc personnalisé de l’éditeur Gutenberg.
Maintenant vous êtes dans l’onglet Builder où vous ferez la structure réelle du bloc et définirez son nom :
- Entrez le nom du bloc WordPress personnalisé en haut
- Sélectionnez l’icône d’un bloc – son nom et son icône seront affichés dans la page ou l’article pour les éditeurs de sites Web.
- Les éditeurs de WordPress recherchent généralement un bloc en entrant son nom. Vous pouvez spécifier des mots-clés supplémentaires pour vous assurer que les éditeurs de sites Web trouveront le module dont ils ont besoin aussi facilement que possible.
- Choisissez si le bloc doit être affiché dans les pages, dans les articles ou dans les deux types de contenu.
La block WordPress est essentiellement une liste de champs. Dans cet exemple, nous allons créer quatre champs dans notre bloc :
- Champ image pour l’image du médecin
- Champ de texte pour le nom du médecin
- Champ de texte pour la courte biographie du médecin
- Champ de fichier pour le CV du médecin – l’éditeur du site web pourra télécharger un fichier PDF directement dans le bloc.
Pour créer un nouveau champ, cliquez sur le bouton +, puis sélectionnez les paramètres du champ :
- Entrez l’étiquette du champ
- Entrer le nom du champ / slug (qui sera utilisé dans le modèle html)
- type de champ
- largeur du champ
Certains blocs ont des paramètres supplémentaires comme l’espace réservé, le texte d’aide, etc. Vous pouvez même ajouter des instructions sur la façon d’utiliser le champ directement dans l’éditeur WordPress.
Une fois que vous avez ajouté tous les champs, cliquez sur Publier.
Après avoir publié le bloc personnalisé, vous serez informé que vous pouvez ajouter ce fichier à votre thème (en cliquant sur l’icône dans le carré rouge), ou vous pouvez passer à l’onglet Editeur de modèle et créer le code HTML et CSS du bloc à cet endroit.
Troisième étape – créer le balisage HTML et CSS du bloc WordPress personnalisé
Une fois que nous avons mis en place la structure de notre bloc WordPress personnalisé, la prochaine chose dont nous avons besoin est de créer un modèle HTML pour celui-ci. Le modèle est utilisé pour afficher le bloc personnalisé pour les visiteurs du site Web.
Une fois que vous êtes dans l’onglet Template Editor, cliquez sur Markup, et créez la structure HTML que vous voulez.
Pour afficher les valeurs des champs, mettez le nom du champ entre deux parenthèses. Par exemple, {{doctor-image}}, {{cv-file}}, etc.
Vous pouvez trouver plus d’informations sur l’utilisation et le balisage des champs dans la documentation officielle du plugin ici.
Pour ajouter un style CSS à votre bloc, cliquez sur CSS dans le même onglet de l’éditeur de modèle.
C’est tout – votre bloc WordPress personnalisé est prêt à être utilisé.
Si vous souhaitez modifier le style, le balisage html ou les champs personnalisés, vous pouvez toujours modifier votre bloc WordPress personnalisé dans la liste des blocs personnalisés. Ne vous inquiétez donc pas si vous n’êtes pas sûr de l’aspect que doit avoir votre bloc – vous pourrez le mettre à jour plus tard.
Comment utiliser le bloc WordPress personnalisé dans les pages et les articles ?
Pour commencer à utiliser le bloc que vous avez créé dans WordPress, il vous suffit d’aller sur la page ou l’article que vous voulez, et d’ajouter le bloc de la même manière que vous ajoutez tout autre bloc.
Cliquez sur + à l’endroit où vous voulez que le bloc apparaisse, entrez le nom du bloc, et choisissez-le.
Remplissez votre nouveau bloc. Les données seront visibles de la même manière que dans les blocs WordPress natifs, de sorte que les administrateurs du site Web de votre client n’auront aucun problème à les utiliser.
Vous pouvez ajouter autant de blocs personnalisés que vous le souhaitez dans la même page ou le même article.
Profitez de votre nouveau module personnalisé dans WordPress !
Comme vous le voyez, l’ajout de nouveaux modules personnalisés dans WordPress est vraiment facile et direct. Vous avez juste besoin du bon plugin, de quelques connaissances de base en HTML et CSS, et vous pouvez créer n’importe quoi avec WordPress sans avoir recours à des constructeurs de pages tiers.
Vous pouvez créer autant de modules WordPress personnalisés que vous le souhaitez, leur ajouter du style depuis l’administration de WordPress, et créer des sites Web WordPress personnalisés sans jamais quitter le panneau d’administration de WordPress.
