{"id":11504,"date":"2020-05-17T14:00:08","date_gmt":"2020-05-17T14:00:08","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-un-widget-wordpress-a-len-tete-de-votre-site-web\/"},"modified":"2020-05-17T14:00:08","modified_gmt":"2020-05-17T14:00:08","slug":"comment-ajouter-un-widget-wordpress-a-len-tete-de-votre-site-web","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-un-widget-wordpress-a-len-tete-de-votre-site-web\/","title":{"rendered":"Comment ajouter un widget WordPress \u00e0 l’en-t\u00eate de votre site Web"},"content":{"rendered":"

Voulez-vous ajouter un widget WordPress \u00e0 la zone d’en-t\u00eate de votre site Web? Les widgets vous permettent d’ajouter facilement des blocs de contenu aux sections d\u00e9sign\u00e9es de votre th\u00e8me. Dans cet article, nous vous montrerons comment ajouter facilement un widget WordPress \u00e0 l’en-t\u00eate de votre site. <\/p>\n

\"Ajoutez<\/p>\n

Remarque:<\/strong> Il s’agit d’un didacticiel de niveau interm\u00e9diaire. Vous devrez ajouter du code \u00e0 vos fichiers de th\u00e8me WordPress et \u00e9crire du CSS. <\/p>\n

<\/span>Pourquoi et quand avez-vous besoin d’un widget d’en-t\u00eate sur votre site?<\/span><\/h4>\n

Les widgets vous permettent d’ajouter facilement des blocs de contenu \u00e0 une zone d\u00e9sign\u00e9e dans votre th\u00e8me WordPress. Ces zones d\u00e9sign\u00e9es sont appel\u00e9es barres lat\u00e9rales ou zones pr\u00eates pour les widgets. <\/p>\n

Vous pouvez utiliser une zone pr\u00eate pour les widgets dans l’en-t\u00eate ou avant le contenu pour afficher des annonces, des articles r\u00e9cents ou tout ce que vous voulez. <\/p>\n

Cette zone particuli\u00e8re est appel\u00e9e \u00abSous le pli\u00bb et tous les sites populaires l’utilisent pour montrer des choses vraiment importantes. <\/p>\n

\"La<\/p>\n

Les th\u00e8mes WordPress ajoutent g\u00e9n\u00e9ralement des barres lat\u00e9rales \u00e0 c\u00f4t\u00e9 du contenu ou dans la zone de pied de page. Peu de th\u00e8mes WordPress ajoutent des zones pr\u00eates pour les widgets au contenu ou \u00e0 l’en-t\u00eate. <\/p>\n

C’est pourquoi dans cet article, nous expliquerons comment ajouter une zone de widget \u00e0 l’en-t\u00eate de votre site Web WordPress. <\/p>\n

<\/span>\u00c9tape 1. Cr\u00e9ez une zone de widget d’en-t\u00eate<\/span><\/h4>\n

Tout d’abord, nous devons cr\u00e9er une zone de widget personnalis\u00e9e. Cette \u00e9tape vous permettra de visualiser votre zone de widget personnalis\u00e9e dans Apparence \u00bbWidgets<\/strong> page dans votre tableau de bord WordPress.<\/p>\n

Vous devrez ajouter ce code au fichier functions.php de votre th\u00e8me. <\/p>\n

function wpb_widgets_init() {\r\n\r\n\tregister_sidebar( array(\r\n\t\t'name'          => 'Custom Header Widget Area',\r\n\t\t'id'            => 'custom-header-widget',\r\n\t\t'before_widget' => '
',\r\n\t\t'after_widget'  => '<\/p>',\r\n\t\t'before_title'  => '
<\/span>',\r\n\t\t'after_title'   => '<\/span><\/h2>',\r\n\t) );\r\n\r\n}\r\nadd_action( 'widgets_init', 'wpb_widgets_init' );\r\n<\/pre>\n
Ce code enregistre une nouvelle barre lat\u00e9rale ou une zone pr\u00eate pour les widgets pour votre th\u00e8me. <\/p>\n
Vous pouvez maintenant aller \u00e0 Apparence \u00bbWidgets<\/strong> et vous verrez une nouvelle zone de widget intitul\u00e9e \u00abZone de widget En-t\u00eate personnalis\u00e9\u00bb. <\/p>\n
\"Zone<\/p>\n
Allez-y et ajoutez un widget texte \u00e0 cette zone de widget nouvellement cr\u00e9\u00e9e et enregistrez-la. Consultez notre guide sur la fa\u00e7on d’ajouter et d’utiliser des widgets dans WordPress pour des instructions d\u00e9taill\u00e9es sur la fa\u00e7on d’ajouter des widgets.<\/p>\n
<\/span>\u00c9tape 2: affichez votre widget d’en-t\u00eate personnalis\u00e9<\/span><\/h4>\n
Si vous visitez votre site Web maintenant, vous ne pourrez pas voir le widget de texte que vous venez d’ajouter \u00e0 votre widget d’en-t\u00eate nouvellement cr\u00e9\u00e9. <\/p>\n
En effet, nous n’avons pas encore indiqu\u00e9 \u00e0 WordPress o\u00f9 afficher cette zone de widget. <\/p>\n
Faisons cela dans cette \u00e9tape. <\/p>\n
Vous devrez modifier le fichier header.php dans votre th\u00e8me et ajouter ce code l\u00e0 o\u00f9 vous souhaitez afficher votre zone de widget personnalis\u00e9e. <\/p>\n
\r\n    \r\n\t\r\n\r\n\r\n<\/pre>\n
N’oubliez pas de sauvegarder vos modifications. <\/p>\n
Vous pouvez maintenant visiter leur site Web et vous verrez la zone de widget d’en-t\u00eate. <\/p>\n
\"Widget<\/p>\n
Vous remarquerez qu’il a l’air un peu poli. C’est l\u00e0 que vous aurez besoin de CSS pour le rendre plus beau. <\/p>\n
<\/span>\u00c9tape 3: Concevoir la zone de widget d’en-t\u00eate avec CSS<\/span><\/h4>\n
Selon votre th\u00e8me, vous devrez ajouter du CSS pour contr\u00f4ler la fa\u00e7on dont la zone de widget d’en-t\u00eate et chaque widget qu’il contient sont affich\u00e9s. <\/p>\n
La fa\u00e7on la plus simple de le faire est d’utiliser le plugin CSS Hero. Il vous permet d’utiliser une interface utilisateur intuitive pour changer le CSS de n’importe quel th\u00e8me WordPress. Pour plus de d\u00e9tails, consultez notre revue CSS Hero.<\/p>\n
Si vous ne souhaitez pas utiliser de plugin, vous pouvez ajouter du CSS personnalis\u00e9 \u00e0 votre th\u00e8me en visitant Apparence \u00bbPersonnaliser<\/strong> page. <\/p>\n
Cela lancera l’interface de personnalisation du th\u00e8me WordPress. Vous devrez cliquer sur l’onglet \u00abCSS suppl\u00e9mentaire\u00bb. <\/p>\n
\"Ajouter<\/p>\n
L’onglet CSS suppl\u00e9mentaire dans le personnalisateur de th\u00e8me vous permet d’ajouter votre CSS personnalis\u00e9 tout en observant les modifications qui apparaissent dans l’aper\u00e7u en direct. <\/p>\n
Pour les besoins de ce didacticiel, nous supposons que vous n’utiliserez cette zone que pour ajouter un seul widget pour afficher des banni\u00e8res publicitaires ou un widget de menu personnalis\u00e9. <\/p>\n
Voici quelques exemples CSS pour vous aider \u00e0 d\u00e9marrer. <\/p>\n
div#header-widget-area {\r\n    width: 100%;\r\n    background-color: #f7f7f7;\r\nborder-bottom:1px solid #eeeeee;\r\n    text-align: center;\r\n}\t\r\nh2.chw-title {\r\n    margin-top: 0px;\r\n    text-align: left;\r\n    text-transform: uppercase;\r\n    font-size: small;\r\n    background-color: #feffce;\r\n    width: 130px;\r\n    padding: 5px;\r\n    }\r\n\r\n<\/pre>\n
Voici \u00e0 quoi ressemblait notre zone de widget d’en-t\u00eate personnalis\u00e9 dans le th\u00e8me Twenty Seventeen par d\u00e9faut. <\/p>\n
\"Aper\u00e7u<\/p>\n
Vous devrez peut-\u00eatre ajuster le CSS pour correspondre \u00e0 votre th\u00e8me. Jetez un \u0153il \u00e0 notre guide sur la fa\u00e7on d’ajouter des styles personnalis\u00e9s aux widgets WordPress. <\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 apprendre \u00e0 ajouter un widget WordPress \u00e0 l’en-t\u00eate de votre site. Vous pouvez \u00e9galement consulter notre liste des 25 widgets WordPress les plus utiles pour votre site. <\/p>\n
Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour regarder des vid\u00e9os de didacticiel WordPress. Vous pouvez \u00e9galement nous trouver sur Twitter et Facebook. <\/p>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n