- \n
- L’image de marque :<\/strong> Il peut s’agir du nom du site et, fr\u00e9quemment, d’un logo. L’utilisation de couleurs, d’images ou de vid\u00e9os dans l’en-t\u00eate peut renforcer cette image de marque.<\/li>\n
- La navigation principale :<\/strong> Si votre site web comporte plus d’une page, les visiteurs chercheront probablement un menu de navigation vers le haut de chaque page.<\/li>\n
- Navigation secondaire : <\/strong>La navigation secondaire pourrait \u00eatre n’importe quel lien ind\u00e9pendant de l’emplacement actuel d’un utilisateur dans la hi\u00e9rarchie du menu primaire. Pensez \u00e0 un bouton de \u00ab connexion \u00bb et \u00e0 des ic\u00f4nes reliant aux comptes de r\u00e9seaux sociaux ou \u00e0 un panier d’achat.<\/li>\n
- Recherche :<\/strong> Si votre site web prend en charge la recherche, la bo\u00eete de saisie de la recherche n’a pas besoin d’\u00eatre<\/em> dans l’en-t\u00eate, mais les visiteurs ne la chercheront certainement pas dans le pied de page.<\/li>\n<\/ul>\n
Le CMS<\/a> WordPress peut g\u00e9n\u00e9rer dynamiquement des composants comme les en-t\u00eates en combinant le balisage des mod\u00e8les de th\u00e8mes avec le contenu trouv\u00e9 dans une base de donn\u00e9es – comme les liens vers un logo et les entr\u00e9es de menu – et les injecter dans chaque page.<\/p>\n
L’\u00e9cosyst\u00e8me des th\u00e8mes WordPress offre une riche s\u00e9lection de designs pour presque tous les sites web. Avec des dizaines de milliers de th\u00e8mes \u00e0 choisir sur diff\u00e9rentes places de march\u00e9, choisir le meilleur pour ton objectif peut \u00eatre d\u00e9courageant.<\/p>\n
Mais lorsque vous aurez finalement choisi et install\u00e9 un th\u00e8me<\/a>, vous devrez personnaliser au moins certains composants – comme l’en-t\u00eate – pour imprimer votre marque sur le site et vous l’approprier.<\/p>\n
Voyons comment proc\u00e9der.
\n<\/div><\/kinsta-auto-toc><\/p>\n Blocs vs classique : L’histoire de deux th\u00e8mes<\/h2>\n
La fa\u00e7on dont vous personnalisez l’en-t\u00eate de ton site WordPress est d\u00e9termin\u00e9e par la fa\u00e7on dont son th\u00e8me a \u00e9t\u00e9 construit (et, parfois, par l’ampleur de la personnalisation que tu souhaites effectuer). Il existe trois fa\u00e7ons de modifier l’en-t\u00eate d’un site natif de WordPress :<\/p>\n
- \n
- En utilisant l’\u00e9diteur de site <\/strong>: WordPress 5.0<\/a> a introduit un \u00e9diteur de blocs pour le contenu des sites web, connu sous le nom de Gutenberg<\/a>. Avec la sortie de WordPress 5.9<\/a>, le concept de bloc s’est \u00e9tendu aux th\u00e8mes et est devenu une option robuste pour l’\u00e9dition compl\u00e8te du site<\/a>. L’\u00e9diteur de site et la possibilit\u00e9 de construire les diff\u00e9rentes parties d’un th\u00e8me de site web avec des composants bas\u00e9s sur HTML ont apport\u00e9 une flexibilit\u00e9 sans pr\u00e9c\u00e9dent \u00e0 la personnalisation native de WordPress.<\/li>\n
- Utiliser la personnalisation de WordPress <\/strong>: Nous n’essayons pas de vous faire sentir vieux, mais les th\u00e8mes qui ne peuvent \u00eatre modifi\u00e9s qu’en utilisant la personnalisation, autrefois r\u00e9volutionnaire, et les widgets associ\u00e9s sont appel\u00e9s th\u00e8mes \u00ab classiques \u00bb. Malgr\u00e9 ce nom \u00e0 consonance r\u00e9tro, de nouveaux th\u00e8mes de style classique sont toujours publi\u00e9s, venant s’ajouter aux milliers de th\u00e8mes d\u00e9j\u00e0 pr\u00e9sents sur le march\u00e9. Compar\u00e9s aux th\u00e8mes Site Editor et Block, les th\u00e8mes Customizer et Classic offrent moins d’options pour la personnalisation de l’en-t\u00eate.<\/li>\n
- Modifier directement les fichiers du th\u00e8me <\/strong>: Vous devrez (ou quelqu’un \u00e0 qui vous demanderez de l’aide) avoir quelques connaissances de base en PHP pour modifier le code des fichiers de th\u00e8mes WordPress classiques, mais c’est une solution lorsque la personnalisation, ne peut pas te fournir ce dont vous avez pour l’en-t\u00eate de votre site.<\/li>\n<\/ul>\n
Ce que nous ne couvrons pas ici, c’est la personnalisation de l’en-t\u00eate dans les constructeurs de pages WordPress<\/a> tiers comme Divi<\/a> ou toute autre extension con\u00e7ue sp\u00e9cifiquement pour s’attaquer aux en-t\u00eates (et aux pieds de page<\/a>) des sites web. Ces extensions pourraient valoir la peine d’\u00eatre explor\u00e9es si votre seule option n\u00e9cessite de modifier directement les fichiers du th\u00e8me et que vous voulez \u00e9viter la programmation PHP.<\/p>\n
Comment modifier l’en-t\u00eate d’un th\u00e8me en bloc ?<\/h2>\n
Si vous avez utilis\u00e9 Gutenberg pour cr\u00e9er du contenu, vous savez que WordPress est livr\u00e9 avec une grande collection de blocs que vous pouvez placer sur les pages pour composer n’importe quoi, des titres, paragraphes et listes aux m\u00e9dias, \u00e0 la navigation et aux formulaires. Il existe une classe de blocs qui effectuent des t\u00e2ches comme les widgets dans les th\u00e8mes classiques, notamment la g\u00e9n\u00e9ration de liens vers les derniers articles et commentaires, l’affichage d’un nuage d’\u00e9tiquettes ou l’insertion d’un calendrier.<\/p>\n
Plusieurs blocs peuvent \u00eatre combin\u00e9s, stylis\u00e9s et enregistr\u00e9s en tant que mod\u00e8les. Vous pouvez \u00e9galement ajouter ces composants aux parties d’un th\u00e8me WordPress qui aident \u00e0 d\u00e9finir la mise en page, y compris les en-t\u00eates.<\/p>\n
Comme les blocs individuels, les parties de mod\u00e8les peuvent \u00eatre d\u00e9finies dans des fichiers HTML<\/a>. Les th\u00e8mes \u00e0 blocs sont faciles \u00e0 personnaliser car les informations d\u00e9crivant ces modifications sont enregistr\u00e9es dans la base de donn\u00e9es de WordPress et appliqu\u00e9es aux diff\u00e9rents composants lorsqu’une page est g\u00e9n\u00e9r\u00e9e.<\/p>\n
Ainsi, lorsque nous parlons de \u00ab modifier \u00bb un en-t\u00eate dans un th\u00e8me de bloc, nous parlons rarement de modifier un fichier stock\u00e9 dans un r\u00e9pertoire de th\u00e8me WordPress.<\/p>\n
Sous le capot : L’en-t\u00eate d’un th\u00e8me en bloc<\/h3>\n
L’inspection du code HTML derri\u00e8re une partie de mod\u00e8le comme l’en-t\u00eate permet d’expliquer ce qui se passe lorsque vous personnalisez un th\u00e8me.<\/p>\n
Nous utilisons le th\u00e8me Seedlet pour ce tutoriel parce qu’il est disponible sous forme de Seedlet (Blocks)<\/a> et de l’ancien Seedlet (Classic)<\/a>. Seedlet (Blocks) utilise le th\u00e8me Blockbase<\/a> comme parent, et voici tout le contenu du fichier
header.html<\/code> dans les r\u00e9pertoires du th\u00e8me Seedlet :<\/p>\n<!-- wp:pattern {\"slug\":\"blockbase\/header-centered\"} \/-->\n<!-- wp:spacer {\"height\":60} -->\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/code><\/pre>\nLa plus grande partie de la magie des blocs WordPress se produit dans les commentaires HTML. Les commentaires peuvent transmettre des informations de style et d’autres directives pendant la construction de la page. Le code HTML ci-dessus ajoute un espacement vertical \u00e0 notre en-t\u00eate par d\u00e9faut, mais l’action principale est la demande d’inclusion d’une composition dans le th\u00e8me Blockbase qui (une fois que
.html<\/code> est ajout\u00e9) se trouve dans le fichierheader-centered.html<\/code>.<\/p>\nLe r\u00e9pertoire des parties de mod\u00e8le dans le th\u00e8me Blockbase comprend ces fichiers li\u00e9s \u00e0 un en-t\u00eate :<\/p>\n
header-centered.html\nheader-default.html\nheader-linear.html\nheader-minimal.html\nheader-rounded-logo.html\nheader-wide.html<\/code><\/pre>\n\u00c0 titre d’exemple, le fichier
header-rounded-logo.html<\/code> comprend un commentaire HTML qui ajoute une classe CSS pour le d\u00e9tourage circulaire de l’image du logo. Si cette approche nous tenait \u00e0 c\u0153ur, nous pourrions<\/em> modifier notre fichier Seedletheader.html<\/code> pour inclureheader-rounded-logo.html<\/code> au lieu deheader-centered.html<\/code>. Mais nous n’avons pas besoin de le faire parce que nous pouvons appliquer cette partie de mod\u00e8le dans l’\u00e9diteur de site WordPress et laisser les fichiers de th\u00e8me sur le disque dur intacts.<\/p>\nUtilisation de l’\u00e9diteur de site pour personnaliser un en-t\u00eate<\/h3>\n
Avec un th\u00e8me bloc actif sur notre site Web, nous pouvons acc\u00e9der \u00e0 l’\u00c9diteur de site dans le panneau d’administration de WordPress<\/a> en s\u00e9lectionnant Apparence<\/strong> > \u00c9diteur<\/strong>:<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-site-editor.png\")
Acc\u00e8s \u00e0 l’\u00e9diteur de site depuis le panneau d’administration de WordPress.<\/figcaption><\/figure>\n La vue initiale dans l’\u00e9diteur de site est une mise en page compl\u00e8te qui comprendra l’en-t\u00eate, le pied de page et toutes les autres parties du mod\u00e8le d\u00e9j\u00e0 ajout\u00e9es par le d\u00e9veloppeur du th\u00e8me. Nous pouvons cliquer sur la zone de l’en-t\u00eate pour commencer imm\u00e9diatement \u00e0 modifier.<\/p>\n
Ci-dessous, notre en-t\u00eate comprend un espace r\u00e9serv\u00e9 pour un logo et affiche d\u00e9j\u00e0 le nom du site et la navigation principale (qui se compose maintenant uniquement de \u00ab \u00c0 propos de nous \u00bb et de \u00ab Page d’exemple \u00bb). Si nous ajoutons un slogan aux informations de base de notre site, il appara\u00eetra \u00e9galement ici.<\/p>\n
Ces \u00e9l\u00e9ments d’identit\u00e9 du site apparaissent d\u00e9j\u00e0 dans notre en-t\u00eate car la partie du mod\u00e8le
header-centered.html<\/code> mentionn\u00e9e ci-dessus inclut ces commentaires :<\/p>\n<!-- wp:site-logo {\"align\":\"center\",\"width\":128} \/-->\n<!-- wp:site-title {\"textAlign\":\"center\",\"style\":{\"spacing\":{\"padding\":{\"top\":\"30px\",\"bottom\":\"20px\"}}}} \/-->\n<!-- wp:site-tagline {\"textAlign\":\"center\",\"fontSize\":\"small\"} \/--><\/code><\/pre>\nLa navigation principale est g\u00e9n\u00e9r\u00e9e par ce commentaire :<\/p>\n
<!-- wp:navigation {\"layout\":{\"type\":\"flex\",\"setCascadingProperties\":true,\"justifyContent\":\"center\",\"orientation\":\"horizontal\"}} \/--><\/code><\/pre>\nAjoutons notre logo :<\/p>\n
- \n
- S\u00e9lectionnez l’espace r\u00e9serv\u00e9 du logo.<\/li>\n
- Cliquez sur le bouton Ajouter un m\u00e9dia<\/strong>.<\/li>\n
- Choisissez votre logo dans la m\u00e9diath\u00e8que de WordPress ou t\u00e9l\u00e9versez-le.<\/li>\n<\/ol>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-logo.png\")
Ajout d’un logo \u00e0 une partie du mod\u00e8le d’en-t\u00eate.<\/figcaption><\/figure>\n Personnaliser l’en-t\u00eate d’un site web en y ajoutant un logo est une t\u00e2che si courante que m\u00eame la plupart des th\u00e8mes WordPress classiques simplifient le travail dans la personnalisation. Ajoutons donc un bloc qui n’est pas d\u00e9j\u00e0 anticip\u00e9 dans le mod\u00e8le : un menu secondaire pr\u00e8s du haut de la page avec l’entr\u00e9e : Boutique<\/strong>.<\/p>\n
Tout d’abord, nous basculons l’affichage de l’insertion de bloc en cliquant sur l’ic\u00f4ne de basculement situ\u00e9e dans le coin sup\u00e9rieur gauche de l’\u00e9diteur de site :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-inserter.png\")
Basculer l’afficheur de blocs.<\/figcaption><\/figure>\n Lorsque l’outil d’insertion de blocs est actif :<\/p>\n
- \n
- Trouvez le bloc de navigation (vous pouvez le rechercher).<\/li>\n
- Faites glisser le bloc jusqu’\u00e0 la marge sup\u00e9rieure de l’en-t\u00eate.<\/li>\n<\/ol>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-add-navigation.png\")
Faire glisser un bloc de navigation dans la zone d’en-t\u00eate.<\/figcaption><\/figure>\n Maintenant, nous modifions le bloc de navigation en cr\u00e9ant un lien personnalis\u00e9 (d\u00e9tach\u00e9 de la navigation principale) qui affiche le texte Boutique<\/strong> et comporte l’URL de notre sous-domaine de commerce \u00e9lectronique :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-toggle-edit-link.png\")
Cr\u00e9ation d’un lien de page pour notre nouveau bloc de navigation.<\/figcaption><\/figure>\n Par d\u00e9faut, tout ce qui se trouve dans cette partie du mod\u00e8le d’en-t\u00eate est centr\u00e9 sur la page. Nous voulons que le lien de la boutique<\/strong> flotte \u00e0 droite. Pour cela :<\/p>\n
- \n
- Cliquez sur le nouveau bloc de navigation.<\/li>\n
- Cliquez sur l’ic\u00f4ne Modifier la justification des \u00e9l\u00e9ments<\/strong> dans la barre d’outils.<\/li>\n
- S\u00e9lectionnez Justifier les \u00e9l\u00e9ments \u00e0 droite.<\/strong><\/li>\n<\/ol>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-navigation-justify.png\")
Modification du positionnement horizontal du bloc sur l’en-t\u00eate.<\/figcaption><\/figure>\n Voici l’en-t\u00eate termin\u00e9 :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-block-theme-secondary-navigation-after.png\")
En-t\u00eate du th\u00e8me de bloc avec un menu secondaire contenant le lien Boutique<\/strong>.<\/figcaption><\/figure>\n Comment modifier l’en-t\u00eate d’un th\u00e8me classique avec la personnalisation ?<\/h2>\n
Lorsque la premi\u00e8re version de la personnalisation de th\u00e8me a \u00e9t\u00e9 publi\u00e9e en 2012, en m\u00eame temps que WordPress 3.4<\/a>, il s’agissait d’un bond en avant pour aider les administrateurs \u00e0 modifier l’aspect et la convivialit\u00e9 de leurs sites web sans coder.<\/p>\n
La personnalisation a \u00e9t\u00e9 consid\u00e9rablement am\u00e9lior\u00e9e depuis, mais une chose reste vraie : le d\u00e9veloppeur d’un th\u00e8me d\u00e9termine ce qui peut ou ne peut pas \u00eatre personnalis\u00e9 \u00e0 l’aide de l’outil. Cela contraste avec la libert\u00e9 dont disposent les propri\u00e9taires de sites avec l’\u00c9diteur de site bas\u00e9 sur des blocs.<\/p>\n
Utilisation de la personnalisation de WordPress<\/h3>\n
Lorsqu’un th\u00e8me classique prenant en charge la personnalisation est actif sur un site, vous pouvez y acc\u00e9der dans le panneau d’administration de WordPress en s\u00e9lectionnant Apparence<\/strong> > Personnaliser<\/strong>.<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customizer-menu.png\")
Acc\u00e8s \u00e0 la personnalisation du th\u00e8me depuis le panneau d’administration de WordPress.<\/figcaption><\/figure>\n Dans le menu principal de la personnalisation, nous s\u00e9lectionnons Identit\u00e9 du site <\/strong>pour atteindre les composants personnalisables de l’en-t\u00eate :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-customize-menu.png\")
S\u00e9lection de l’option Identit\u00e9 du site dans la personnalisation du th\u00e8me classique.<\/figcaption><\/figure>\n Dans la section Identit\u00e9 du site<\/strong> de ce th\u00e8me, nous pouvons ajouter ou modifier un logo et \u00e9diter le titre du site et toute accroche. (Le titre du site et le slogan sont initialement renseign\u00e9s par les entr\u00e9es de la page R\u00e9glages g\u00e9n\u00e9raux<\/strong> du panneau d’administration).<\/p>\n
Ce th\u00e8me place \u00e9galement la navigation principale du site dans l’en-t\u00eate. Il y a \u00e9galement un emplacement pour la navigation vers le bas dans le pied de page et pour un menu de liens vers les r\u00e9seaux sociaux. La personnalisation vous permet de choisir le menu que vous voulez attribuer \u00e0 chacun de ces emplacements, mais les emplacements eux-m\u00eames sont essentiellement fixes.<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-select-logo.png\")
Ajout d’un logo dans la personnalisation pour les th\u00e8mes WordPress classiques.<\/figcaption><\/figure>\n Apr\u00e8s avoir cliqu\u00e9 sur le bouton S\u00e9lectionner un logo<\/strong> mis en \u00e9vidence ci-dessus, nous pouvons choisir un logo dans la m\u00e9diath\u00e8que de WordPress ou en t\u00e9l\u00e9verser un nouveau.<\/p>\n
Ci-dessous, avec un logo en place, la personnalisation nous permet de supprimer l’image ou de la remplacer par une autre :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-add-logo.png\")
Le logo ajout\u00e9 \u00e0 l’en-t\u00eate \u00e0 l’aide de la personnalisation de WordPress.<\/figcaption><\/figure>\n Sous le capot : Que peut personnaliser la personnalisation ?<\/h3>\n
Alors, comment la personnalisation d\u00e9termine-t-elle si nous pouvons t\u00e9l\u00e9verser un logo et o\u00f9 il doit \u00eatre plac\u00e9 une fois que nous l’avons fait ?<\/p>\n
Cela commence par cette entr\u00e9e dans le script
functions.php<\/code> du th\u00e8me :<\/p>\n\/**\n* Add support for core custom logo.\n*\n* @link https:\/\/codex.wordpress.org\/Theme_Logo\n*\/\nadd_theme_support(\n 'custom-logo',\n array(\n 'height' => 240,\n 'width' => 240,\n 'flex-width' => false,\n 'flex-height' => false,\n )\n);<\/code><\/pre>\nCe bloc de code active le bouton S\u00e9lectionner un logo<\/strong> dans l’onglet Identit\u00e9 du site<\/strong> de la personnalisation, ainsi que son lien vers les fonctions de la m\u00e9diath\u00e8que.<\/p>\n
Ensuite, dans le code PHP utilis\u00e9 pour construire l’en-t\u00eate du site, ce court extrait de code est ajout\u00e9 \u00e0 l’endroit o\u00f9 le logo doit appara\u00eetre :<\/p>\n
<div class=\"site-logo\"><?php the_custom_logo(); ?><\/div><\/code><\/pre>\nLe r\u00e9sultat :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-before.png\")
L’en-t\u00eate du site apr\u00e8s la mise \u00e0 jour du logo dans la personnalisation du th\u00e8me.<\/figcaption><\/figure>\n Modifier un en-t\u00eate WordPress en modifiant les fichiers du th\u00e8me<\/h2>\n
Ci-dessus, lorsque nous avons personnalis\u00e9 l’en-t\u00eate d’un th\u00e8me de blocs \u00e0 l’aide de l’\u00e9diteur de site, nous avons ajout\u00e9 un menu secondaire avec un lien Boutique<\/strong>. Nous \u00e9tions libres de placer ce bloc de navigation o\u00f9 nous voulions dans notre en-t\u00eate. Notre version classique du th\u00e8me n’a pas d’emplacement r\u00e9serv\u00e9 pour un tel menu, nous devrons donc modifier le code PHP li\u00e9 \u00e0 l’en-t\u00eate pour effectuer le changement.<\/p>\n
Nous pourrions simplement ouvrir le fichier de th\u00e8me appropri\u00e9 et ajouter manuellement le code HTML pour notre menu secondaire, mais ce serait manquer de perspicacit\u00e9. Plus tard, nous pourrions vouloir mettre \u00e0 jour le texte de notre lien d’achat (Acheter maintenant ?), changer son URL<\/a> ou ajouter un autre \u00e9l\u00e9ment \u00e0 ce menu (Se connecter ?).<\/p>\n
Nous voulons ajouter une nouvelle navigation \u00e0 l’en-t\u00eate qui soit enregistr\u00e9e dans la personnalisation, ce qui permettra de modifier le contenu du menu secondaire dans l’\u00e9diteur de menu de WordPress sans avoir \u00e0 retourner dans le code du th\u00e8me.<\/p>\n
Avant de commencer : Sauvegardez<\/h3>\n
Fouiller dans le code PHP de ton th\u00e8me WordPress classique pour personnaliser l’en-t\u00eate de votre site est souvent d\u00e9crit comme l’\u00e9dition du fichier
header.php<\/code>. C’est le cas dans de nombreux th\u00e8mes, mais d’autres peuvent combiner plusieurs fichiers pour construire un seul en-t\u00eate.<\/p>\nAvant d’apporter des modifications aux fichiers du th\u00e8me, faites des sauvegardes. Voici comment faire des sauvegardes<\/a> et comment les restaurer<\/a>.<\/p>\n
M\u00eame avec des sauvegardes, vous pouvez rencontrer des probl\u00e8mes lorsqu’une mise \u00e0 jour d’un th\u00e8me tiers \u00e9crase vos modifications. Vos modifications pourraient dispara\u00eetre du site jusqu’\u00e0 ce que vous puissiez restaurer vos fichiers de th\u00e8me modifi\u00e9s \u00e0 partir d’une sauvegarde. C’est pourquoi nous vous recommandons vivement de cr\u00e9er un th\u00e8me enfant<\/a> uniquement pour vos fichiers modifi\u00e9s et de tester les mises \u00e0 jour sur un site WordPress de staging<\/a>.<\/p>\n
Modifier un en-t\u00eate WordPress dans un th\u00e8me classique<\/h3>\n
Notre exemple de th\u00e8me classique a un emplacement r\u00e9serv\u00e9 dans l’en-t\u00eate pour la navigation principale. Dans la personnalisation, nous pouvons s\u00e9lectionner le menu WordPress que nous voulons attribuer \u00e0 cet emplacement. Dans notre cas, ce menu est nomm\u00e9 \u00ab Menu principal \u00bb.<\/p>\n
Il y a \u00e9galement des emplacements dans le th\u00e8me pour la navigation dans le pied de page et les liens sociaux, mais vous pouvez ci-dessous qu’ils ne sont pas activ\u00e9s pour le moment :<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-theme-primary-menu-create.png\")
Modification des menus dans la personnalisation d’un th\u00e8me classique.<\/figcaption><\/figure>\n Si nous jetons un coup d’\u0153il au script
functions.php<\/code> du th\u00e8me, nous voyons o\u00f9 ces emplacements de menu sont r\u00e9f\u00e9renc\u00e9s pour la premi\u00e8re fois :<\/p>\n\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nCi-dessous, nous ajoutons \u00e0 ce bloc une entr\u00e9e pour notre nouveau menu \u00ab Navigation secondaire \u00bb :<\/p>\n
\/\/ This theme uses wp_nav_menu() \nregister_nav_menus(\n array(\n 'primary' => __( 'Primary Navigation', 'seedlet' ),\n 'secondary' => __( 'Secondary Navigation', 'seedlet' ),\n 'footer' => __( 'Footer Navigation', 'seedlet' ),\n 'social' => __( 'Social Links Navigation', 'seedlet' ),\n )\n);<\/code><\/pre>\nLorsque nous retournons dans la personnalisation, la nouvelle option Navigation secondaire<\/strong> appara\u00eet dans la zone Emplacements du menu <\/strong>:<\/p>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/edit-header-classic-theme-secondary-menu.png\")
Option de navigation secondaire enregistr\u00e9e dans la personnalisation du th\u00e8me.<\/figcaption><\/figure>\n Nous pouvons donner un nom \u00e0 notre menu (Menu secondaire<\/strong>) et commencer \u00e0 y ajouter des liens. Comme nous l’avons fait avec l’\u00e9diteur de site dans le th\u00e8me bas\u00e9 sur les blocs, nous allons cr\u00e9er une entr\u00e9e pour Shop<\/strong>.<\/p>\n
Dans le fichier de th\u00e8me de l’en-t\u00eate, nous avons ajout\u00e9 un code qui confirme que le menu de navigation secondaire existe et qu’il a au moins une entr\u00e9e dans la liste des liens. Nous analysons ensuite le contenu du menu et l’affichons :<\/p>\n
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n<div id=\"secondary-navigation\" class=\"secondary-navigation\" role=\"navigation\">\n<?php\n\/\/ Get menu slug\n$location_name = 'secondary;\n$locations = get_nav_menu_locations();\n$menu_id = $locations[ $location_name ];\n$menu_obj = wp_get_nav_menu_object( $menu_id );\nwp_nav_menu(\n array(\n 'theme_location' => 'secondary',\n 'menu_class' => 'menu-wrapper',\n 'container_class' => 'secondary-menu-container',\n 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s<\/ul>',\n )\n);\n?>\n<\/div><!-- #secondary-navigation -->\n<?php endif; ?> \n<div class=\"menu-button-container\">\n<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>\n <button id=\"secondary-open-menu\" class=\"button open\">\n <span class=\"dropdown-icon open\"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?><\/span>\n <span class=\"hide-visually expanded-text\"><?php _e( 'expanded', 'seedlet' ); ?><\/span>\n <\/button>\n<?php endif; ?>\n<\/div><\/code><\/pre>\n - S\u00e9lectionnez Justifier les \u00e9l\u00e9ments \u00e0 droite.<\/strong><\/li>\n<\/ol>\n
- Choisissez votre logo dans la m\u00e9diath\u00e8que de WordPress ou t\u00e9l\u00e9versez-le.<\/li>\n<\/ol>\n
- Utiliser la personnalisation de WordPress <\/strong>: Nous n’essayons pas de vous faire sentir vieux, mais les th\u00e8mes qui ne peuvent \u00eatre modifi\u00e9s qu’en utilisant la personnalisation, autrefois r\u00e9volutionnaire, et les widgets associ\u00e9s sont appel\u00e9s th\u00e8mes \u00ab classiques \u00bb. Malgr\u00e9 ce nom \u00e0 consonance r\u00e9tro, de nouveaux th\u00e8mes de style classique sont toujours publi\u00e9s, venant s’ajouter aux milliers de th\u00e8mes d\u00e9j\u00e0 pr\u00e9sents sur le march\u00e9. Compar\u00e9s aux th\u00e8mes Site Editor et Block, les th\u00e8mes Customizer et Classic offrent moins d’options pour la personnalisation de l’en-t\u00eate.<\/li>\n
- La navigation principale :<\/strong> Si votre site web comporte plus d’une page, les visiteurs chercheront probablement un menu de navigation vers le haut de chaque page.<\/li>\n
![\"Capture](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/secondary-menu-edit-header-after.png\")