Avez-vous déjà voulu afficher une carte de site visible pour les visiteurs sur WordPress ? Une carte de site visible vous permet de présenter un schéma hiérarchique de vos différentes pages et sections. Dans cet article, nous allons vous montrer comment créer une carte de site sur WordPress sans écrire de code.
Différence entre une carte de site HTML, une carte de site XML et une carte de site visible sur WordPress
Une carte de site (sitemap) XML est générée pour les machines et les moteurs de recherche. Elle utilise le langage de balisage XML pour représenter le contenu de votre site. Les moteurs de recherche peuvent utiliser ces cartes de site pour gérer le taux d’exploitation de votre site web.
En outre, une carte de site HTML est destinée à être utilisée par les visiteurs de votre site Web (réelles personnes). Elle affiche simplement une liste de vos pages et les différentes sections de votre site sur une seule page. Bien que la carte de site (sitemap) HTML soit utilisée pour montrer la structure de votre site, ce n’est cependant pas souvent l’option idéale pour afficher la hiérarchie de votre site Web.
C’est à ce niveau qu’une carte de site visible par les utilisateurs est très pratique. Elle vous permet d’afficher les éléments, éléments enfants, éléments frères, le tout dans une structure arborescente. Ceci étant dit, nous allons jeter un œil à la façon d’ajouter facilement une carte de site visible par les utilisateurs sur WordPress.
Ajouter une carte de site visible par les utilisateurs sur WordPress
La première chose que vous devez faire c’est d’installer et activer le plugin Slick Sitemap. A présent, avant d’installer le plugin, vous devez créer un menu de navigation dans WordPress. A l’aide des menus de navigation WordPress, vous pouvez créer des menus avec des sous-menus. De même les sous-menus peuvent avoir leurs propres sous-menus.
Ce menu de navigation comportera toutes les pages ou les articles que vous voulez afficher dans votre carte. Vous pouvez nommer ce menu « Carte de site visible » et l’enregistrer.
Vous pouvez également créer un autre menu ou utiliser un menu existant avec seulement quelques pages importantes. Ce menu sera utilisé comme le menu utilitaire au-dessus de votre carte de site visible.
Une fois que vous avez créé les menus, il est temps de configurer votre carte de site. Allez simplement à la page Paramètres »Slick Sitemap et configurez le plugin.
Dans l’option « Default Sitemap Menu », vous devez sélectionner le menu principal « VisualSitemap ». Choisissez le nombre de colonnes que vous souhaitez afficher. Enfin, vous devez choisir le menu utilitaire et cliquer sur le bouton « Enregistrer les modifications » pour tout sauvegarder.
Afficher la carte de site visible sur votre site WordPress
Maintenant que vous avez créé et configuré une carte de site visible par les utilisateurs avec succès, l’étape suivante consiste à afficher cette carte sur une page de votre site WordPress.
Il suffit de créer une nouvelle page dans WordPress et ajouter ce shortcode dans la zone de contenu.
[slick-sitemap]
Après cela, cliquez sur le bouton « Enregistrer » ou « Publier » pour sauvegarderez vos modifications. Vous pouvez maintenant visiter cette page et voir la carte de site en action.
Nous espérons que cet article vous aidera à ajouter une carte de site visible par les utilisateurs sur WordPress. Si vous avez des commentaires sur cet article, ou alors des suggestions, nous vous prions de nous en faire part dans la section dédiée.
Re,
Oui tout à fait, c’est cela : l’arborescence s’affiche mais comme je vous le disais, on voit des traits et un décalage dans les rectangles de différentes couleurs dans lesquels se trouvent le nom des pages. Pas moyen de les faire disparaître. Ou peut-être suis-je trop exigeant ? Parce que sur votre démo, c’est au contraire parfait !
Merci de me dire…
Jean-Marc
Bonjour,
Désolé du retard, j’étais un tout petit peu occupé, tout ce que vous avez à faire dans ce cas, c’est d’utiliser un code CSS personnalisé, j’ai un code pour vous, essayez d’installer le plugin Header & Footer (je crois que c’est le nom) et ajoutez le code suivant :
#post-1255 code {
padding: 0px !important;
}
Si le code ne fonctionne pas, faites-le moi savoir toujours par ce formulaire.
Ce code s’applique uniquement à cette page, donc si vous envisagez d’utiliser l’arborescence dans une autre page, vous devrez nous contacter pour vous fournir un code pour cette page.
Bonjour,
Merci pour cette réponse. C’est très gentil.
Je ne connais pas la gestion des codes et autres langages, malheureusement…
J’ai installé le plugin indiqué avec le paramétrage que j’ai inséré au dessus de la page qui contient le plan du site (qui s’affiche mal). Lien ci-dessous :
http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
Bien entendu, comme je l’ai fait, votre code apparaît sur toutes les pages avec le même message car je ne sais pas faire autrement (l’insérer sur la page du plan et uniquement celle-ci)… Merci de me dire où le mettre exactement dès que vous aurez le temps, c’est très sympa.
Excellente journée à vous.
Jean-Marc
Bonjour,
Vous m’excuserez, mais j’ai pu remarqué en consultant l’adresse que vous m’avez fourni qu’effectivement une arborescence des pages s’affiche (du moins tel que cela est prévu par le menu).
Je me suis permis de faire une capture afin de vous demander si le contenu qui s’affiche chez vous est le même que chez moi.
http://wp-labo.tendoo.org/wp-content/uploads/2016/03/screenshot-newtab-2016-03-27-11-09-40.jpg
Cordialement.
Bonjour,
Tout d’abord merci pour ce tuto.
Je l’ai essayé sur mon site et malheureusement s’affichent des petits traits qui « décalent » les rectangles de différentes couleurs dans lesquels se trouvent le nom des pages. Pas moyen de les faire disparaître (il n’y a pas beaucoup d’options)… dommage. Je vais chercher un autre plugin de ce genre car il est fort utile. Merci encore. Excellente journée
JMarc
Bonjour Jean Marc,
Merci pour le retour d’expérience.
Je vous en prie.
J’ai oublié de mentionné l’adresse où ces « décalages » graphiques sont visibles.
http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
Rien de bien méchant mais… c’est pas très joli !
J’en ai cherché d’autres depuis hier mais je n’ai rien trouvé qui présente un schéma des pages d’un site. Apparemment le standard reste « Sitemap-page » avec lequel on obtient seulement un vulgaire listing alphabétique des pages, articles… (pas de graphisme).
Excellente journée
Jean-Marc
Bonjour Jean-Marc,
Dès que nous en trouverons un de mieux, nous le recommanderons sur ce site.
Cordialement,
Bonjour,
Pouvez vous faire une capture de votre écran des réglages et publier ce dernier ? En principe ce plugin fonctionne normalement. Si ce n’est pas le cas, alors une erreur ou une omission s’est probablement produite durant les réglages.
Cordialement.
Bonjour,
Merci tout d’abord de vous intéresser à mon cas… C’est super gentil.
Voici tout d’abord l’adresse où ce plan est visible :
http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
Réglages de Slick Sitemap :
Default Sitemap Menu : j’ai choisi le nom du menu qui est le même que celui qui s’affiche à droite dans la barre latérale (voir avec le lien ci-dessus) de mon thème (Twenty Sixteen que je n’ai en rien modifié).
Default Columns : 3 colonnes
Default Utility Menu : je n’ai rien choisi, il apparaît donc « Select a menu for Utility ».
Voilà j’espère avoir été complet.
Merci beaucoup pour cette aide car ce plugin est très sympa visuellement.
Excellent dimanche
Jean-Marc
PS : j’ai fait une capture écran mais le « coller » sur cette page de commentaire ne fonctionne pas…