WordPress

Comment personnaliser les zones de widget WordPress

15 mars 2016

Comment personnaliser les zones de widget 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?

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.

séparateur de texte

Si vous avez trouvé cet article intéressant, Partagez le, il intéressera d’autres personnes. Merci!

4 commentaires
  1. Nico

    Très intéressant, j'utilise aussi beaucoup ce genre de personnalisation dans mes réalisations.Petite remarque plus technique, sur la priorité des actions (tu me corrigeras si nécessaire car je ne maîtrise pas encore tout...). Lors du désenregistrement de la sidebar, la valeur 11 dans "add_action" correspond à une dépriorisation (la valeur par défaut étant à 10)Dans certains thèmes ou plus globalement "extensions" on trouve parfois des actions avec une priorité ayant un poids plus élevé (moins prioritaire, par exemple 90).Un cas que j'ai rencontré est que l'affichage d’icônes de partage sur une page affichant des portfolios ne se faisait pas (il se faisait au niveau de chaque post de type portfolio) J'ai donc du ajouter ces lignes dans mon functions.php (un essai que j'ai fait sans trop comprendre au début)remove_filter( 'the_content', 'A2A_SHARE_SAVE_add_to_content', 98 ); // priorité fixée par le développeur add_filter( 'the_content', 'A2A_SHARE_SAVE_add_to_content', 11 ); // ma prioritéD'expérience, connais-tu les bonnes pratiques pour faire ce genre de choix de priorité ?

  2. Hubert

    Bonjour Nico, Selon le codex "La priorité permet de spécifier l'ordre dans lequel les fonctions associées à une action particulière sont exécutées. Les nombres inférieurs correspondent à une exécution au plus tôt, et les fonctions ayant la même priorité sont exécutées dans l'ordre dans lequel elles ont été ajoutées à l'action. Valeur par défaut: 10". Il n'y a pas de "bonnes pratiques" recommandées.

  3. Clemenceb

    bonjour et merci pour ce tuto J'ai réussi à créer ma colonne de widget mais elle ne s'affiche pas sur mon site deco-et-ceramique.comSavez vous quel est le problème ?

  4. Hubert

    Bonjour Clemence, Selon ce que j'ai pu voir sur le site de Dessign.net, concepteur du site la barre latérale devrait être visible dans la partie blog. Une vidéo en bas de la page ci-dessus vous explique comment placer les widgets (aux allentours de 12:45 mn). J'espère que cela vous sera utile.

Laisser un commentaire

You have to agree to the comment policy.

-20% sur ElegantThemes.com Maintenant !Cliquez-ici !
+

-20% sur les thèmes et les plugins d’ElegantThemes.Com

-20%

OFFRE