Comment personnaliser les zones de widget WordPress

Valentin
18 Déc 2023
WordPress

Avez-vous déjà trouvé le thème parfait et découvert, seulement trop tard, que vous ne pouvez pas placer de widget là où vous le souhaitez? C’est dommage, n’est ce pas? Heureusement, un des plus grands atouts de WordPress est sa flexibilité, et les zones de widget WordPress ne font pas exception à la règle.

Alors, si vous souhaitez:

Ajouter un formulaire de souscription après un article

Supprimer la barre latérale et, à la place, centrer votre contenu

Ajouter des widgets de pied de page, ou les supprimer

… C’est ici que cela se passe.

Comment personnaliser les zones de widget WordPress?

Heureusement, avec WordPress, il est simple d’ajouter, supprimer ou modifier les zones de widget en seulement quelques lignes de code. Vous n’êtes pas obligés de changer de thème pour obtenir le look dont vous rêvez, il suffit de suivre le guide ci-dessous!

Un petit mot avant de commencer

Ce tutoriel est un peu plus avancé que bon nombre d’autres articles du site. Il nécessite une petite maîtrise des bases de l’ édition de fichiers de thème WordPress, et la compréhension du code HTML/PHP de base serait un plus.

Si vous savez créer un thème enfant ou vos propres shortcodes, cela n’en sera que plus facile.

Comment ajouter ou supprimer des zones de widget WordPress

Les zones de widget WordPress sont créées en trois étapes simples:

Etape 1 – Vous créez ( « enregistrez ») la nouvelle zone de widget WordPress avec quelques lignes de code PHP dans le fichier functions.php de votre thème.

Etape 2 – Vous insérez quelques lignes de code dans le fichier de modèle dans lequel vous souhaitez qu’apparaisse le widget (comme par exemple footer.php), encore une fois avec seulement quelques lignes de code PHP.

Etape 3 – La mise en page et l’aspect de la zone de widget sont personnalisés en utilisant du code CSS.

Dans ce tutoriel, nous n’aborderons que les deux premières étapes, ajouter ou supprimer une zone de widget WordPress.

Attention

Avant d’apporter des modifications à votre thème, il est fortement conseillé de créer un thème enfant. De cette façon, vos modifications ne seront pas perdues lorsque votre thème sera mis à jour.

Vous pouvez également envisager la création d’une page de maintenance, afin que vos lecteurs ne soient pas confus ou désorientés par des widgets ou des messages d’erreur potentiels pendant que vous ferez les ajustement nécessaires sur votre site.

Étape 1: Enregistrer ou désenregistrer une zone de widget WordPress

Comme mentionné ci-dessus, la première étape pour ajouter une zone de widget WordPress est de l’enregistrer dans le fichier functions.php.

Il faut donc, dès à présent créer un nouveau fichier functions.php dans le répertoire de votre thème enfant, ce fichier se chargera avant le fichier functions.php du thème parent.

Pour enregistrer une nouvelle zone de widget WordPress

Ajoutez le code ci-dessous à la fin du fichier functions.php de votre thème enfant:

/**
 * Enregistrer une nouvelle zone de widget
 **/
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'First right sidebar',
'id' => 'first_right_sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );

Vous pouvez remplacer le nom (« First right sidebar ») et l’ID (« first_right_sidebar ») du widget qui sont situés dans les deux premières lignes. (Ces données sont des références internes et ne modifient en rien l’apparence ou la fonction de votre zone de widgets.)

Les lignes “before widget” et “after widget” servent à envelopper la zone entre les balises <div>, ce qui les distingue et rend le style plus clair.

Les lignes “before title” et “after title” servent au code que vous souhaitez placer avant et après les titres individuels des widgets. Dans notre exemple, le code affiche les titres des rubriques de widgets au format H2).

Pour désenregistrer une zone de widget WordPress existante

Ajoutez le code ci-dessous à la fin du fichier functions.php de votre thème enfant:

/**
 * D&#233;senregistrer une nouvelle zone de widget
 **/
function remove_a_widget_area(){

// Unregister a widget area
unregister_sidebar( ‘ID' );
}
add_action( 'widgets_init', ‘remove_a_widget_area’, 11 );

Vous devez remplacer l’ID ci-dessus avec l’ID de la zone de widget que vous souhaitez supprimer.

Vous trouverez cette ID en allant dans le fichier functions.php du thème principal afin de rechercher à quel endroit la zone de widget est enregistrée (comme dans l’exemple de code ci-dessus pour l’ enregistrement d’ une zone de widget, l’ID se situe sur la deuxième ligne, après la zone nom du widget).

Vérifiez l’apparence de votre site après avoir effectué ces changements. Vous n’aurez probablement rien d’autre à faire si votre zone de widget a disparu! Mais si toutes sortes de messages d’erreurs apparaissent, il faudra poursuivre avec l’étape 2 ci-dessous.

Si la mise en page du site est affectée par la suppression d’une zone de widget WordPress, vous pouvez probablement la réparer avec du code CSS, il est inutile de modifier tout autre code dans votre fichier functions.php.

Étape 2: Ajouter ou supprimer une zone widget dans vos fichiers de thème

A présent que votre nouvelle zone de widget est enregistrée dans WordPress, vous avez besoin d’indiquer à WordPress où elle devra apparaître sur votre site.

Ensuite, il faudra ouvrir le fichier correspondant dans lequel vous voulez ajouter ou retirer une zone de widget. Cela dépendra entièrement de la structure du thème que vous utilisez, mais vous pouvez commencer par les lignes directrices suivantes:

Pour un widget positionné après un article, vous aurez probablement à ajouter votre zone de widget dans le fichier single.php quelque part après la fonction the_content(), qui affiche le contenu de l’article.

Les widgets d’entête sont habituellement dans le fichier header.php. Assurez-vous d’ajouter le code après la balise <body> d’ouverture.
Les widgets de la barre latérale sont généralement dans le fichier sidebar.php.

Les widgets du pied de page sont habituellement dans le fichier footer.php. Assurez-vous d’ajouter le widget avant la balise </ body> de fermeture.

Vous pouvez consulter la hiérarchie des modèles dans le codex WordPress, afin de savoir quel modèle affiche quel contenu. N’hésitez pas, si vous avez un doute, à demander au développeur de votre thème le nom des fichiers à modifier.

Si vous utilisez un thème enfant, il suffit de copier le fichier de modèle (y compris tout son contenu) depuis le répertoire du thème parent, et de le copier dans le répertoire du thème enfant. Le fichier du thème enfant sera utilisé à la place de l’original.

Ajout d’une zone de widget à votre thème

Une fois que vous avez localisé le fichier et la zone où vous souhaitez que votre widget apparaisse, il suffit de copier et coller le code suivant:

<?php if ( is_active_sidebar( 'after_post_widget' ) ) : ?>;
<?php dynamic_sidebar( 'after_post_widget' ); ?>;
<?php endif; ?>;

(Assurez – vous de remplacer le texte ‘after_post_widget’ avec l’ID de votre widget que vous avez créé à l’étape précédente.)

Ce code vérifie d’abord si la zone de widget existe. Ensuite, si elle existe, il affiche la zone de widget. Ce code supplémentaire empêche l’affichage des messages d’erreur au cas où quelque chose irait mal dans la première étape ou si l’ID est incorrecte.

Supprimer une zone widget de votre thème

Pour supprimer une zone de widget, vous aurez besoin d’ouvrir le fichier modèle correspondant et localiser l’ endroit où se situe le code de la zone de widget.

Rappel: Ici encore, vérifiez la hiérarchie des modèles dans le codex WordPress et envisagez de vérifier avec le développeur de votre thème si vous ne savez pas quel fichier éditer.

Ensuite, il vous faut trouver le code » dynamic_sidebar « , comme dans l’exemple ci-dessus.

Vous pouvez à présent supprimer le code. Gardez à l’esprit, que le code peut être un peu différent dans vos fichiers si le développeur a ajouté d’autres éléments. En fonction de la mise en page de votre thème, vous devrez peut-être vous débarrasser des balises <div>.

Conclusion

Changer les zones de widget WordPress est un excellent moyen pour donner à votre thème un aspect unique et veiller à ce qu’il se démarque des sites utilisant un thème similaire. Cela améliore la flexibilité dans l’aspect et le fonctionnement de votre site.

Si vous n’êtes pas à l’aise avec l’édition de code, il préférable de vous adresser d’abord au développeur du thème. Si vous avez besoin d’une aide supplémentaire, il sera à même de vous assister, et peut être même qu’il dispose de quelques tutoriels sur la façon de faire avec votre thème.

Avez-vous déjà personnalisé les zones de widgets de votre thème, ou envisagez vous de le faire après avoir lu cet article? Faites nous part de vos idées er réflexions dans les commentaires ci-dessous.