Les widgets rendent WordPress vraiment flexible. En ajoutant des zones de widget à vos thèmes, vous permettez aux utilisateurs d’insérer leur propre contenu personnalisé sans avoir à écrire une ligne de code.
Ils sont plus courants dans les barres latérales et les pieds de page, où ils sont souvent utilisés pour contenir des widgets tels que le widget de recherche, le widget des derniers messages ou peut-être un menu personnalisé. Mais si vous les ajoutez à votre page et publiez des modèles, vous les rendez encore plus puissants.
Vous pouvez ajouter des zones de widget à n’importe quel fichier de modèle que vous aimez. J’aime en ajouter beaucoup à mes thèmes, dans des endroits tels que l’en-tête, avant et après la navigation principale, et avant et après le contenu. Vous pouvez soit les ajouter à une partie de modèle (telle que l’en-tête) utilisée par chaque page de votre site, soit être plus précis et simplement les ajouter à des fichiers de modèle pour un type de contenu donné.
Dans cet article, je vais vous montrer comment faire exactement cela. Je vais créer un thème enfant du thème par défaut Twenty Seventeen, puis dans ce thème enfant, je vais créer de nouveaux fichiers de modèle: un fichier de modèle de page personnalisé, un fichier d’archive de catégorie et un fichier de modèle de publication unique.
Dans chacun d’eux, je vais ajouter une zone de widget spécifique à ce type de contenu, afin que les utilisateurs ne la voient que lorsqu’ils consultent une page à l’aide du modèle de page, d’une archive de catégorie ou d’un seul article, respectivement.
Alors commençons!
Remarque: J’ai ajouté le code de ce post à GitHub afin que vous puissiez le vérifier si vous travaillez avec ce tutoriel.
Configuration du thème Enfant
Je vais utiliser un thème enfant des vingt-sept: si vous travaillez avec votre propre thème, vous pouvez le modifier directement au lieu de créer un thème enfant. Mais si vous utilisez un thème tiers, vous devez créer un thème enfant. En effet, lorsque vous mettez à jour le thème, toutes les modifications que vous y apportez seront perdues.
Donc, dans votre dossier wp-content/themes, créez un nouveau dossier avec le nom de votre thème. J’appelle le mien wpmu-template-widgets. Dans cela, ajoutez un style.fichier css et ajoutez-y ceci:
Rappelez-vous, si vous travaillez avec votre propre thème, vous pouvez ignorer cette étape. Et si vous utilisez un thème parent différent, vous devrez modifier la feuille de style pour refléter cela. Si vous n’êtes pas sûr, consultez notre article sur la création de thèmes enfants.
Enregistrement des zones de widget
Avant de pouvoir ajouter les zones de widget à nos fichiers de modèles, nous devons les enregistrer dans le fichier de fonctions du thème. Ouvrez votre fichier de fonctions si votre thème en a déjà un, ou s’il s’agit d’un nouveau thème enfant, créez un fichier appelé fonctions.php.
Commençons par ajouter la fonction vide pour enregistrer les widgets et l’accrocher au crochet widgets_init. Ajoutez ceci à votre fichier de fonctions:
Dans cette fonction, nous allons enregistrer quatre zones de widgets: une pour chacun des modèles d’archive de publication et de catégorie, et deux pour le modèle de page personnalisé.
Commencez par enregistrer le premier widget:
Cela utilise la fonction register_sidebar(), avec un tableau de paramètres comme suit:
- Le nom de la zone du widget, qui apparaîtra dans l’écran d’administration des widgets et dans le personnalisateur. J’ai rendu ça traduisable.
- Un identifiant unique pour la zone du widget.
- Balisage pour avant le widget, qui utilise des espaces réservés pour l’internationalisation.
- Balisage pour après le widget.
- Balisage avant et après le titre du widget, qui est enfermé dans un élément
h3.
Donc c’est le premier. Maintenant, toujours dans votre fonction, ajoutez les trois autres:
Nous avons donc maintenant quatre widgets:
- Un après le contenu des publications individuelles.
- Un avant le contenu d’une archive de catégorie.
- Un avant et un après le contenu de notre modèle de page widgetisé.
Si vous souhaitez déplacer vos zones de widget (par exemple, placer l’archive de catégorie après le contenu ou la publication unique avant le contenu), vous devez les renommer de manière appropriée. C’est pour que vous sachiez ce qui se passe lorsque vous viendrez modifier votre code à l’avenir, et que vos utilisateurs sachent où les zones de widgets seront affichées lorsqu’ils y ajouteront des widgets via l’écran d’administration des widgets. N’oubliez pas que si vous modifiez cela, vous devrez placer le code pour afficher les widgets au bon endroit dans vos fichiers de modèle à l’étape suivante, ce qui pourrait être différent de l’endroit où je mets le mien.
Maintenant, si vous ouvrez votre page d’administration des widgets, vous verrez vos zones de widgets, prêtes pour les widgets:
Mais si vous ajoutez des widgets à vos nouvelles zones de widgets, ils n’apparaîtront pas dans le frontal de votre site. Ils doivent encore être codés dans les fichiers de modèle.
Ajout de vos zones de widget aux fichiers de modèle
Maintenant, nous ajoutons le code pour afficher les zones de widget. Si vous travaillez avec votre propre thème, vous devrez peut-être simplement modifier vos fichiers de modèles de thème existants. Si vous travaillez avec un thème enfant (ou si votre thème n’a pas déjà les fichiers de modèle pertinents), vous devrez créer de nouveaux fichiers.
Commençons par le fichier de modèle de page widgetisé, car votre thème n’aura pas cela de toute façon.
Dans votre dossier thème, créez un nouveau fichier. J’appelle le mien page_widgetized.php. Ouvrez ce fichier et ajoutez-le:
Cela indique à WordPress qu’il s’agit d’un modèle de page personnalisé. Si vous voulez en savoir plus sur eux, consultez notre guide détaillé.
Remarque: N’utilisez pas page-widgetized comme nom de fichier. En effet, page- est un suffixe réservé dans WordPress. Utilisez un trait de soulignement au lieu d’un tiret, ou évitez simplement d’utiliser la page au début si vous préférez.
Maintenant, sous ce texte commenté, copiez tout de la page de votre thème (ou du thème parent).fichier php. Une alternative est de faire une copie du fichier et d’ajouter le texte commenté, c’est à vous de décider.
Vous pourrez désormais sélectionner ce modèle lors de la modification d’une page de votre site:
Sélectionnez-le pour l’une de vos pages afin de pouvoir essayer les widgets. Voici ma page:
Cela n’a pas l’air très excitant en ce moment car je n’ai pas ajouté les zones de widget au fichier de modèle. Faisons ça.
Dans votre fichier de modèle, ajoutez ce code immédiatement au-dessus du contenu de la page, pour la zone de widget de contenu ci-dessus:
Cela vérifie si la zone de widget a été remplie, en utilisant l’ID unique que vous avez créé pour la zone de widget lorsque vous l’avez enregistrée dans votre fichier de fonctions. S’il a été rempli, il affiche le contenu de la zone du widget.
Ajoutez maintenant la zone du widget sous le contenu. Après votre contenu (et à l’intérieur de tout élément englobant), ajoutez ceci:
Enregistrez votre fichier de modèle de page.
Voici le code complet de mon fichier de modèle de page, afin que vous puissiez voir où se trouve le widget avant et après la boucle:
Maintenant pour le tester. J’ai ajouté un widget à chacune des nouvelles zones de widget:
Et voici à quoi ils ressemblent sur ma page:
C’est donc le modèle de page personnalisé configuré. Vous devez maintenant modifier les deux autres fichiers de modèle de page (ou les créer si nécessaire). Suivez ces étapes:
- Si vous travaillez avec un thème enfant, créez un fichier appelé catégorie.php. Copiez le contenu de la catégorie.fichier php de votre thème parent (s’il en a un) ou de l’archive.fichier php (ou index.php s’il n’a pas cela).
- Si vous ne travaillez pas avec un thème enfant, mais que votre thème n’a pas de catégorie.fichier php, créez-en un en copiant l’archive.fichier php (ou si vous n’en avez pas, l’index.fichier php).
- Ajoutez la zone de widget au–dessus du contenu de votre fichier d’archive de catégorie – encore une fois, immédiatement avant la boucle.
Voici le code de la zone du widget:
Répétez maintenant ceci pour le modèle unique:
- Créez une publication unique.fichier php si votre thème n’en a pas (ou si vous utilisez un thème enfant). Copiez le contenu de la publication unique de votre thème parent.fichier php dans celui-ci, ou à partir du fichier de modèle suivant dans la hiérarchie des modèles (single.php, singulier.php ou index.php).
- Encore une fois, ajoutez la zone du widget – cette fois après le contenu.
Voici le code:
Maintenant, si vous ajoutez des widgets, ils apparaîtront sur votre site. Voici le mien montrant une liste de messages récents après un seul message:
L’ajout de zones de widget aux modèles Vous offre une flexibilité
Les zones de widget permettent aux utilisateurs de votre thème d’ajouter du contenu supplémentaire sans avoir à écrire du code. Mais ils ne sont pas seulement pour la barre latérale. L’ajout de zones de widgets supplémentaires à vos fichiers de modèles vous donne des zones ciblées de votre site auxquelles vous pouvez ajouter des widgets, avec un contrôle précis sur l’endroit où ils apparaîtront.
Vous pouvez aller plus loin dans ces exemples si vous le souhaitez, en ajoutant des zones de widget à tous vos fichiers, ou même en utilisant différentes versions de la barre latérale.fichier php pour différents types de contenu. Le monde est votre huître!