Breadcrumb navxt plugin. Why crumbs and why without a plugin? Adding breadcrumbs using Breadcrumb NavXT Plugin

Let's start by telling you what breadcrumbs are generally used for when designing websites.

What are breadcrumbs?

bread crumbs (breadcrumbs) is a site navigation element. They are also called breadcrumbs, duplicate navigation, navigation menu etc. In English-language literature you can also find the name: “ cookie crumbs"(cookie crumb). Also sometimes breadcrumbs can be called a navigation path. Actually, all these synonyms describe the same object, which we will analyze further.

Breadcrumbs visually display the path from the main (root) page of the site to the page on which this moment the user is located. Why did this navigation get such a strange name? If you have read the Brothers Grimm fairy tale “Hansel and Gretel,” then you know that in it the children, having overheard their parents talking about being left in the forest, tried to stock up on small pebbles in advance, which they threw on the road in order to get out. The first time it worked, but the second time they couldn’t collect stones, so the children threw crumbs of bread on the road. However, they did not foresee that these crumbs would be eaten by birds. As a result, the children got lost and came across the witch's house. There is no point in retelling the entire plot of the fairy tale; you most likely read it anyway. Actually, the name of the navigation refers us to this event.

Visually, breadcrumbs are usually a small menu, most often located at the top of the page. The items included in this menu are hyperlinks (except for the last item) and reflect the hierarchical structure of materials on the site.

Breadcrumbs are used by search robots. With the help of this navigation, robots are able to quickly understand the architecture of your site and analyze it. Accordingly, you cannot ignore breadcrumbs or deliberately refuse them, since this may indirectly affect the deterioration of site indexing (or the robot’s incomplete crawling of resource pages).

More importantly, bread crumbs have a positive effect on user experience interactions. The user can always understand where exactly he is currently located on the site, and can quickly move to the previous level of nesting of materials (or to a specific section), i.e. a person has before his eyes the route that he took from the main page of the site to current page. IN Google results Breadcrumbs are also used, and they are introduced not to simplify the work of search robots, but precisely so that the user can see the structure of the materials.

Breadcrumbs are a multi-level navigation system that tells users where on the site they are currently located in relation to the main page. In this article we will show you how to display WordPress breadcrumbs:

What are breadcrumbs and what are they for?

Breadcrumbs is a term used to describe a hierarchical navigation menu presented as a chain of links. It is often used as additional menu navigation.

Breadcrumbs are different from the menu system WordPress navigation, used by default.

The purpose of breadcrumbs is to help users navigate the site. They help to understand where the user is now. This also helps search engines define the hierarchy of links to web pages.

Search engines such as Google have begun to display site breadcrumbs in search results. This increases the site's visibility in search results and improves conversion rates:

Adding breadcrumbs using Breadcrumb NavXT Plugin

This is a flexible and easy to use WordPress breadcrumb plugin. He has more various functions than you can imagine. The first thing you need to do is install and activate the Breadcrumb NavXT plugin. After activating it, you need to go to the plugin settings page: Settings - Breadcrumb NavXT:

For most sites, the default settings will be fine. But if necessary, you can make changes to the settings.

The settings page is divided into several sections. On the General tab, you can define how the plugin will behave on the site.

Here you can change the link template. These templates use Schema.org parameters in the link tag.

In the "Post types" section, you can set "breadcrumbs" for posts, pages, as well as any custom types records. You can choose to display the record hierarchy. By default the plugin will use the hierarchy " Site title > Category > Post title».

You can replace navigation items with tags, dates, or parent elements records. The Taxonomies and Authors tabs have similar templates for menu links. Don't forget to click on the " Save changes».

Displaying Breadcrumb NavXT on your site

To use this WordPress breadcrumbs plugin, you must edit the theme files. You need to add the following code to the theme's header.php file in the place where the breadcrumbs will be displayed:

Go to the site and open a post or page. You will see that you already have breadcrumbs displayed.

Adding Breadcrumbs with Yoast SEO Plugin

Install and activate Yoast SEO Plugin. After activating the plugin you need to go to the page SEO > Advanced and check the box for the option " Enable breadcrumbs»:

After this, several options will become available with which you can change the display option for breadcrumbs. The default settings should be fine for most sites, but can be easily changed if necessary.

Once you are finished, click on the " Save changes».

Generating Breadcrumbs Using the Yoast SEO Plugin

Some themes already support Yoast breadcrumbs. Go to the site and open any page or post to see if it displays WordPress breadcrumbs. If not, then you need to add a small piece of code to the active theme.

Paste this code into your theme's header.php at the end of the file:

That's all, now you can go to your website, breadcrumbs will already be displayed there.

We hope this article helped you.

Translation of the article " How to Display Breadcrumb Navigation Links in WordPress"was prepared by the friendly project team.

Good bad

Hi all!. Today in this article I would like to tell you how you can improve the usability of your website using the Yoast SEO plugin, which I will talk about in detail in one of my next articles.

Surely many have already heard about this plugin and know that it is necessary for writing SEO-optimized articles. But few people realize what else WordPress Yoast SEO breadcrumbs can do.

First, let me explain what “breadcrumbs” are and why they are needed.

So, "breadcrumbs" are an additional page navigation, which displays in which category or section the article is located. A visitor, having gone to some page of your blog, must understand which section he is in and whether he is looking for the information he needs in the right category. This navigation can be summarized as follows:

On our website it looks like this:

In addition, the presence of this navigation helps robots more clearly understand the site structure and index your blog faster. And this is very important for online projects.

"Why?" - you ask, we decided to use this plugin. The answer here will be simple. exists on the Internet a large number of similar services, which will help with the withdrawal of “crumbs”, but at the same time they will additionally load the site, this certainly will not make it any better. And since we still use Yoast SEO to optimize posts, it would be a sin not to take advantage of its capabilities and not make convenient usability with its help.

Setting up breadcrumb output using the Yoast SEO plugin

I won’t write here how to install this Yoast SEO. If you don’t know how to do this, then read this article of mine “”. In it I tell in detail and show in what ways you can install the necessary plugins for work.

In the window that opens, check the “Enable breadcrumbs” checkbox.

To our joy, the settings will open all in Russian, and they are intuitive. In the video that will appear soon in this article, I will more clearly show what will happen when you change some points of this menu. In the meantime, you can easily experiment and try changing the settings yourself. It’s impossible to do anything terrible here, since these are just visual adjustments to our “crumbs”.

After enabling breadcrumbs, the next step is to insert the activation code for this feature into your theme template. To find out what code needs to be inserted, follow the link that comes after the settings of our chain.

After we get to the official website of this plugin, we copy the required code and paste it into the place in our theme where we plan for them to be displayed.

I cannot recommend a universal place to insert this code, since it depends on the theme you are using. You may need to write it either in the file single.php, or in page.php, and in some cases in header.php.

In our case, we inserted the code almost at the very beginning of the single.php file, which is located at www/wp-content/themes/your theme/.

Note: Please note that it is better to insert the code via FTP client. We use Filezilla, the work of which has been written about in detail. Be sure to read our instructions to avoid many beginner mistakes.

Moreover, please also note that the code we have is slightly different from the one recommended to us by the developers. Namely, we wrapped the breadcrumbs function in a div tag. This is done so that you can set your own individual display style.

To do this, in the style.css file we write the styles that we require. In them we can set the color, background, font size, underlining, that is, lead to a look that would completely suit our taste or be combined with the overall style of the page. In our case it looks like this:

At this point, setting up the plugin is almost complete, but in this version, after the headings are displayed, the title of the article will also be displayed. This may lead to over-spamming. I think you will agree with me that this is unnecessary, since the title of the article is already clearly visible to the user and there is no need to duplicate it again.

To avoid this, you need to additionally insert small code to the functions.php file.

Function adjust_single_breadcrumb($link_output) ( if(strpos($link_output, "breadcrumb_last") !== false) ( $link_output = ""; ) return $link_output; ) add_filter("wpseo_breadcrumb_single_link", "adjust_single_breadcrumb");

Now all our settings are finished. If you did everything correctly, then you will get approximately the same as on our blog.

If you have any questions, write in the comments!

Bye-bye everyone!

Anton Kalmykov was with you

Hello, dear readers of the blog site. Today I want to talk about how I now implement breadcrumbs that help the reader understand what structure this article is located within. Probably, they are primarily necessary for projects with complex system nested categories (headings), but personally I liked them purely externally.

There is also an optimization rationale for using crumbs - they are an element internal linking, which I wrote about not so long ago. Another thing is that they add static weight to the headings and home page, which I personally don’t need at all. However, I already had a period when the crumbs were quite long time(more than a year, and this coincided with the period of greatest growth in attendance).

Why crumbs and why without a plugin?

They were then implemented on the basis of a plugin - quite functional, but with rather poor capabilities visual design crumbs.

Of course, it would be possible to use styles to create beauty, but then I was not very friendly with him. Only after writing about CSS styles did I begin to understand it a little myself. It turned out like in the joke about the teacher who was indignant at the lack of understanding of the students, who angrily declared: “I explained it three times! I understood it myself! And you...".

Well, then I removed the crumbs and I don’t even remember exactly why, but definitely not because of optimization reasons. In general, if you rely on my articles, then crumbs will be superfluous in the delicate matter of creating ideal scheme linking. But, nevertheless, should I believe it after.

There are many theories about this issue. If in the mentioned articles I tried to be clever and look for truth in lofty matters (Ajax, correct scheme linking) then this friend, for example, tells how to optimize WordPress in abstracts, without details, but quite understandable. You have to be simpler and people will be drawn to you, and perhaps search engines will follow them. Okay, back to the crumbs.

It’s not at all difficult to make them and you don’t have to install plugins. This has its advantage, because one crooked plugin can overwhelm a fairly powerful server. For example, I had similar problems after installing the internal linking plugin described a little earlier (a pop-up panel in the right area that appears on my blog when you scroll its page to the start of comments).

I, as you remember (though it’s not clear why you need to remember this, but still), am now sitting on Infobox. It’s a wonderful and inexpensive thing, but a little over a month ago I had it - as if I had been returned to normal.

The terrible brakes rolled in waves, which quite often happens on regular hosting, if someone from your own server starts to eat shared resources will not measure or harm any of your virtual neighbors.

I started writing angry letters to technical support, demanding satisfaction and shaking them with a link to the article mentioned just above about their Parallels, which I praised there, but how disgusting it turned out to be.

They answered me (politely, but quite convincingly) that my workload was very high. I answered them that since the beginning of the year it has decreased significantly (meaning traffic and number of views). Well, in general, they convinced me to think in the direction of what I, in fact, Lately I did something like this with my blog that could have had such a negative impact on his work.

Due to the difficulties that arose with search traffic, I was thinking mainly about ways to get everything back, or I was indulging in melancholy, remembering the glory days before the collapse. In general, I had a hard time remembering that around the same time I installed this same upPrev plugin. I went into its settings and read the phrase correctly on the “Cache” tab:

Use on large sites (more than 1000 posts) may cause the site to crash

More precisely, I simply didn’t read it to the end at the time of setup and checked the box automatically, deciding that the cache is generally wonderful, and in relation to WordPress, it’s generally a complete cimus (remember mine and it allows you to pay for hosting several times less). In general, I disabled the cache in upPrev and the brakes disappeared.

Of course, this example does not clearly indicate that plugins are harmful, but they can cause slowdowns (maybe even unnoticeable at first). In general, if someone has also installed upPrev, then you know what to do if the hoster informs you that the permissible load has been exceeded or you feel it yourself.

That’s why, whenever possible, I try to make do with as little as possible. Moreover, it is quite interesting to use different functions, because you seem to yourself smarter than you really are. This is especially great when you know PHP, or rather don’t know it at all. That’s when a real puzzle turns out, like, for example, the one I described.

Well, and among other things, these bread crumbs make a very pleasant visual impression:

And to customize them to the design of your blog, you will have a choice of six color schemes.

Implementation of beautiful breadcrumbs for WordPress

First you will need to connect to your server ( virtual hosting) via FTP. For example, using the described Filezilla. Then go to the folder with your current topic design, which usually lives along this path:

/wp-content/themes/its name

In general, I described WordPress themes, or rather told what files (templates) they can consist of and what fragments of the blog layout they are responsible for. However, in addition to purely design solutions in the theme folder you will also find a functions.php file (if it doesn’t exist, just create it).

It is used to write all sorts of functions or filters that allow you to implement a lot of useful things without digging directly into the engine files, changes in which may later be lost. And everything you add to functions.php will live until you change the theme.

So, add the following function to this wonderful file:

//Breadcrumb like Google function the_breadcrumb() ( if (!is_home()) ( echo "

"; }

Just don't push her inside already. existing function. It would probably be easiest to find the word function and insert the above construction immediately before it (although it would be better to separate it with a line break for clarity).

This is the frame. Now we need to add some more styles to it. First, it is advisable for you to decide on the color, but you can adjust it along the way.

The archive will contain six graphic files in PNG format, each of which consists of stripes of the shade you choose and different degrees of lightening:

One of the bars will be used by default, another will be shown when you move the mouse cursor over it, and the third will be shown when you click on a breadcrumb link. All this is set, naturally, in CSS styles, which we will now write down.

But first, unpack the archive with the backgrounds and upload them to the folder with your theme in the directory there:

/wp-content/themes/theme folder/images

Now open for editing (preferably not in the WordPress admin, but by connecting to the site via FTP) the file with styles style.css from the folder with your theme. You can add the following code right to the end:

#breadcrumb (display:block;float:none;margin:0 0 40px 0;font-weight:600;) #breadcrumb ul (font-family: Helvetica, sans-serif;list-style: none;).crumbs (display : block;) .crumbs li.first (padding-left: 8px;) .crumbs li a, .crumbs li a:link, .crumbs li a:visited (color: #616d7e;display: block;float: left;font -size: 11px;margin-left: -13px;padding: 7px 17px 11px 25px;position: relative;text-decoration: none;) .crumbs li a (background-image: url(images/bg-crumbs-blue.png );background-position: 100% 0%;background-repeat: no-repeat;position: relative;) .crumbs li a:hover (background-position: 100% -48px;color: #333;cursor: pointer;) .crumbs li a:active (background-position: 100% -96px;color: #333;) .crumbs li.first a span (border-left: 1px solid #d9d9d9;height: 29px;left: 0;position: absolute ;top: 0;width: 3px;)

In the line background-image: url (images/bg-crumbs-blue.png) you are free to change the name graphic file background on the one whose the color suits the design best your blog. About how it works, as well as about all its possible variations (color, position, image, repeat, attachment). In fact, it’s scary how interesting, because it opens up a lot of possibilities.

Displaying crumbs in WordPress posts and slightly tuning them

Actually, we have prepared the base and now all that remains is to decide where exactly our bread crumbs will be visible to visitors. Obviously, on the main page they will be superfluous. Personally, I decided to display them only in posts, which means we will need to add the code for calling them to the file (template) of your theme that is responsible for this.

In most cases, this will be a single.php file, but it is possible that you have index.php running instead (see above link to the article about WordPress themes). Then to display breadcrumbs only in posts, you will have to create a single.php file by copying the contents of index.php into it, and then adding the code to call breadcrumbs only in single.

It (the code) will look like this:

Without hesitation, I pushed it in at the very beginning, right after loading the blog header:

Actually, there were crumbs on the blog, but after wandering through the pages I discovered one unpleasant thing - some of the titles of my articles turned out to be longer than the width of the graphic background. The letters climbed onto its borders and it was not ice.

It could, of course, be extended to graphic editor() strips of substrate, but that would be too simple, and we are not looking for easy ways. Or vice versa.

In general, I'm a little reduced the number of characters(replaced the_title() in the code with trim_title_chars (60, "...")), which is displayed in the link to the current post, because my titles are too long and simply do not fit into the substrate blanks:

Function the_breadcrumb() ( ... if(is_single()) ( echo "

";trim_title_chars(60, "...");echo "

"; ... }

Here, but for this we had to add one more function to our long-suffering functions.php file:

Function trim_title_chars($count, $after) ( $title = get_the_title(); if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count); else $after = ""; echo $title . $after ;

A wonderful thing and can replace the_title() with trim_title_chars (60, "...") wherever you need it. For example, I have this implemented in . Naturally, the number 60 means the number of Taital symbols displayed and you are free to replace it with the one you need.

But then I didn’t like that the words were cut off in the middle or something else ugly, so I ended up replacing trim_title_chars (60, "...") with trim_title_words (5, "..."). Guess what is there 5? Well, obviously, there are words, and then there will be an ellipsis.

Echo"

";trim_title_words(5, "...");echo "

However, you need to add one more function to functions.php:

Function trim_title_words($count, $after) ( $title = get_the_title(); $words = split(" ", $title); if (count($words) > $count) ( array_splice($words, $count); $title = implode(" ", $words); else $after = ""; echo $title )

That's all I wanted to say on this significant occasion.

P.S. I moved my little report to the comments to the post about.

Good luck to you! Before see you soon on the pages of the blog site

You can watch more videos by going to

");">

Breadcrumbs - a convenient way to link a blog

One of simple ways at the same time simplify site navigation and linking, these are breadcrumbs. It got its name in honor of the way in which the heroes of the German fairy tale “Hansel and Gretel” tried to find their way out of the forest.

True, the crumbs did not help the children - they were pecked by birds, but in website development the function, named after the unsuccessful method of rescue, has taken root and is used in resources for a variety of purposes, from personal blogs to online stores.

You've probably seen this breadcrumb trail on the most different internet resources. It is usually placed above the article and looks something like this:

Home page> Category > Subcategory > Current page

Moreover, all the “links”, except the last one, are internal links.

Thanks to this chain, the reader can understand at any time what level of the site he is at and has the opportunity to go through the entire chain and immediately go to the section he is interested in or return to the main page of the resource.

What are the benefits of breadcrumbs for a website and blog?

As stated above, firstly, it makes navigation easier. For example, a reader came to an article, read it and decided to read other articles in the section. Thanks to breadcrumbs, he does not need to look for a site map or a list of categories. He'll just go back a step.

You subtly invite the reader to click on the links, giving them another reason to stay on your site. This, in turn, improves behavioral factors, then for what search robots, first of all, blogs and websites differ.

The more complex the site structure, the more important it is to install breadcrumbs on it. Since visitors, especially those visiting for the first time, this resource, it is difficult to understand all the blocks, pages, sections and subsections. If they don't have any hints, they will just leave after reading just one article.

The second task of this element, closely related to the first, is internal optimization site, or rather another way to link as much as possible large quantity articles. Moreover, unlike manual linking, here everything happens automatically. The required breadcrumb trail immediately appears above each published article.

This function can be added to websites and blogs different ways. Let's consider two of the most simple options for WordPress - installation using a plugin and making small changes to the code.

How to add breadcrumbs to a blog with a plugin

The easiest way to install breadcrumbs on a blog is to install a special plugin. For WordPress, Breadcrumb NavXT is usually used.

The way to install it is standard: go to the blog admin -> Plugins -> Add new. In the window that appears, insert the name of the plugin and click “Find plugins.”

Here it is, our plugin, click “Install now”, then “Activate”.

and above this line insert the following piece of code:

If you want to place the breadcrumbs in another place, then you place the same code there.

After that, go to “Settings” -> “ Breadcrumb Settings NavXT" and in the "Link name" column, change the name to your own and save the changes.

All that remains is to go to the blog and admire the result.

How to add breadcrumbs to a blog without a plugin

Since any plugins are an additional load on the blog, slowing down its work, it is better to just change the code a little, especially since in this case, it's easier than installing a plugin.

Go to the admin panel -> " Appearance" -> "Editor" -> functions.php. Here, anywhere (the main thing is not inside another function), insert the following code:

Function the_breadcrumb() ( echo "You are here: "; if (!is_front_page()) ( echo "Home"; echo " » "; if (is_category() || is_single()) ( the_category(" "); if (is_single()) ( echo " " "; the_title(); ) ) elseif (is_page()) ( echo the_title(); ) ) else ( echo "Home"; ) )

and save. If you're worried about getting confused, just paste it at the very end, above the last parenthesis.

Now you need this code:

place it where you want the breadcrumbs to appear, for example, again above the article title. To do this, go to single.php, look for the line with the_title and paste this code above it and save the changes.

You can go to the website and see what happened. As you can see, You are here and Home are clearly out of place here and they need to be changed to something more appropriate, for example, to Path and Home (or the name of the blog).

In addition, you need to make sure that the changes look equally good on different browsers– do not overlap with other parts of the topic and, at the same time, are clearly visible.

That's it, Breadcrumbs help your readers, and you can be proud that you figured out how to install them yourself. Thank you all for your attention!

P.S. At the end of the article, there is a video on how to add breadcrumbs to your blog: