Have you ever wanted to display a site map visible to visiteurs on WordPress? A visible site map allows you to present a hierarchical diagram of your different pages and sections. In this article, we will show you how to create a sitemap in WordPress without writing any code.
Difference between HTML sitemap, XML sitemap, and WordPress visible sitemap
A site map (sitemap) XML is generated for machines and search engines. It uses the XML markup language to represent the contents of your site. Search engines can use these sitemaps to manage your site's exploitation rate. website.
Additionally, an HTML sitemap is intended for use by visiteurs of your Website (real people). It simply displays a list of your pages and the different sections of your site on one page. Although the site map (sitemap) HTML is used to show the structure of your site, however this is often not the ideal option for displaying the hierarchy of your Website.
This is where a site map visible to users comes in handy. It allows you to display the elements, child elements, sibling elements, all in a tree structure. That being said, let's take a look at how to easily add a user viewable sitemap on WordPress.
Add a site map visible to users in WordPress
The first thing you need to do is install and activate the plugin Slick Sitemap. Now, before installing the plugin, you need to create a navigation menu in WordPress. Using the WordPress navigation menus, you can create menus with submenus. Likewise the sub-menus can have their own sub-menus.
This navigation menu will contain all the pages or articles that you want to display in your map. You can name this menu " Visible Site Map And save it.
You can also create another menu or use an existing menu with only a few important pages. This menu will be used as the utility menu above your visible site map.
Once you have created the menus, it's time to set up your site map. Just go to page Settings »Slick Sitemap and configure the plugin.
In the option "Default Sitemap Menu", you must select the main menu "VisualSitemap". Choose the number of columns you want to display. Finally, you have to choose the utility menu and click on the button " Save Changes To save everything.
Display the site map visible on your site WordPress
Now that you have successfully created and configured a user viewable sitemap, the next step is to display this map on a page in your WordPress site.
Simply create a new page in WordPress and add this shortcode in the box contents.
[slick-sitemap]
After that, click on the button " Record " ou "Publish" To save your changes. You can now visit this page and see the site map in action.
We hope this article helps you add a user visible sitemap on WordPress. If you have comments on this article, or suggestions, please let us know in the dedicated section.
Re,
Yes absolutely, that's it: the tree structure is displayed but as I told you, we see lines and an offset in the rectangles of different colors in which the names of the pages are found. No way to make them disappear. Or maybe I am too demanding? Because on your demo, it's on the contrary perfect!
Thank you for telling me…
Jean-Marc
Hello,
Sorry for the delay, I was a little bit busy, all you have to do in this case is use some custom CSS code, I have a code for you, try installing the Header plugin & Footer (I believe that's the name) and add the following code:
# Post-1255 code {
Padding: 0px! Important;
}
If the code does not work, let me know always by this form.
This code only applies to this page, so if you plan to use the tree in another page, you will need to contact us to provide you with a code for that page.
Hello,
Thank you for that answer. It's very sweet.
I don't know how to handle codes and other languages, unfortunately ...
I installed the plugin indicated with the settings that I inserted above the page which contains the site map (which is displayed badly). Link below:
http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
Of course, as I did, your code appears on all pages with the same message because I don't know how to do otherwise (insert it on the plan page and only this one) ... Please tell me where the put it exactly as soon as you have time, it's very nice.
Excellent day to you.
Jean-Marc
Hello,
You will excuse me, but I could notice by consulting the address which you provided me that indeed a tree structure of the pages is displayed (at least as it is envisaged by the menu).
I took the liberty of taking a screenshot to ask you if the content displayed for you is the same as for me.
http://wp-labo.tendoo.org/wp-content/uploads/2016/03/screenshot-newtab-2016-03-27-11-09-40.jpg
Kind regards.
Hello,
First of all thank you for this tutorial.
I tried it on my site and unfortunately little lines appear which “shift” the rectangles of different colors in which the names of the pages are. No way to make them disappear (there aren't many options)… too bad. I will look for another plugin of this kind because it is very useful. Thanks again. Excellent day
JMarc
Hello Jean Marc,
Thank you for the feedback.
You're welcome.
I forgot to mention the address where these graphic "offsets" are visible.
http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
Nothing really bad but… it's not very pretty!
I looked for others since yesterday but I couldn't find anything that shows a diagram of the pages of a site. Apparently the standard remains "Sitemap-page" with which we only get a vulgar alphabetical listing of pages, articles… (no graphics).
Excellent day
Jean-Marc
Hello Jean-Marc,
As soon as we find one better, we will recommend it on this site.
Sincerely,
Hello,
Can you take a screenshot of your settings screen and publish it? In principle this plugin works normally. If not, then an error or omission probably occurred during the settings.
Kind regards.
Hello,
First of all, thank you for your interest in my case… It's super nice.
First of all, here is the address where this plan is visible:
http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
Slick Sitemap Settings:
Default Sitemap Menu: I chose the name of the menu which is the same as the one displayed on the right in the sidebar (see with the link above) of my theme (Twenty Sixteen that I have nothing amended).
Default Columns: 3 columns
Default Utility Menu: I didn't choose anything, so it appears “Select a menu for Utility”.
Here I hope to have been complete.
Thank you very much for this help because this plugin is very visually friendly.
Great Sunday
Jean-Marc
PS: I took a screenshot but the "paste" on this comment page does not work ...