Menu
homeInstructions

Breadcrumbs plugin. Why do you need breadcrumbs in WordPress? Generating Breadcrumbs Using the Yoast SEO Plugin

So-called “Breadcrumbs” serve to improve site navigation and help the site visitor figure out where he is now. A visitor on any page of the site understands his location in the blog structure with the help of breadcrumbs.

Breadcrumbs are another element internal linking site. Navigation around the site is simplified, which is convenient for the site visitor, and in this regard, behavioral factors are increased.

The term “Breadcrumbs” itself is taken from the Brothers Grimm fairy tale “Hansel and Gretel,” in which children were taken into the forest. The first time, when the father, at the behest of the evil stepmother, takes his brother and sister into the forest, they find their way back, thanks to the fact that they left pebbles along the way. The second time the children did not have any pebbles, so they left them on their way instead of pebbles. bread crumbs, which were pecked by forest birds and children got lost in the forest. After various adventures, the children still managed to return home.

Typically, the Breadcrumbs navigation is a bar at the top of the page that looks something like this:

All sections of the site, except the last one, are links. The last navigation section is the exact page you are on now. There is no need to create a hyperlink to this page.

This last element may not be required separate page, and for example the name of the category, if you are included in some category. In this case, the title of the category will no longer be a hyperlink.

Breadcrumbs can be installed on a website using a plugin, or without using a special plugin for this. First, let's look at installing breadcrumbs using a plugin Breadcrumb NavXT.

Breadcrumb NavXT plugin

To install the Breadcrumb NavXT plugin, you need to log in to the “WordPress Admin Panel” => “Plugins” => “Add New”. In the “Search” field you need to enter the expression “Breadcrumb NavXT”, and after that you need to click on the “Search for Plugins” button.
In the “Install Plugin” window, under the plugin name “Breadcrumb NavXT”, click on the “Install” link.

In the “Plugin Installation: Breadcrumb NavXT” window that opens, click on the “Activate Plugin” link. After that, in the sidebar " WordPress Admin Panels"appeared new item"Breadcrumb NavXT". If you click on this item, then you can enter the settings of the breadcrumbs plugin.

In the window " Breadcrumb Settings NavXT" contains quite a lot of settings for this plugin. Breadcrumb NavXT settings can be left at their default settings. In the “Basic” tab, if you want, you can change the “Link to Home” item.

Now you need to insert the following code into your theme files, in the places where breadcrumbs will be displayed:

?

It is advisable to insert this code into the following files of your theme: “Single entry (single.php)”, “Page template (page.php)”, “Archives (arhvie.php)”, “Search results (search.php)”.

In order to insert this code, you need to enter the “WordPress Admin Panel” => “Appearance” => “Editor” => “Templates”.

In the “Single Post (single.php)” template, which is responsible for pages with articles, the code is inserted as shown in this image.

After inserting the code, click on the “Update File” button.

The code is inserted, then you need to click on the “Update File” button.

You will also need to insert this code into the “Archives (arhvie.php)” file, which is responsible for the categories.

After the code is inserted, click on the “Update File” button.

And after installing the code in the WordPress theme files, the code is inserted into the “Search Results (search.php)” file, which is responsible for searching the site. Paste the code in the place as shown in the image.

This image shows what breadcrumb navigation looks like. The home page name has not been changed to the site name.

You can also insert the following code into the “Style Sheet (style.ccs)” file (this is optional):

Breadcrumb ( font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; ) .breadcrumb a( color: #1B7499; ) .breadcrumb a:hover ( color: #EF0E0E; )

In this code you can change the size and font (font:bolder 12px “Trebuchet MS”, Verdana, Arial), padding (padding-bottom: 10px), as well as the color of breadcrumb links in a static state and when hovering the mouse cursor over them (you can change digital values).

The readings in this code can be changed at your discretion, or you can find another similar code on the Internet. You can also do without installing this code in the “Style Sheet (style.ccs)” file. In the theme I installed, after installing the code, the font changed a little.

This article looked at installing breadcrumbs on a website using the Breadcrumb NavXT plugin. The next article will discuss this question - how to install without using a plugin.

Conclusions of the article

Using the Breadcrumb NavXT plugin, navigation, so-called “breadcrumbs”, is installed on the site, which helps the user understand which section of the site he is in at a given time.

Greetings, dear readers of the blog site. In this article, I will show you how to make the navigation bar that you can see at the top before the article headings. This navigation chain makes it simple for me plugin forWordPress— BreadcrumbNavXT, which translates to “breadcrumbs.”

The plugin got this name because its author, John Havlik, liked the fairy tale about the Brothers Grimm, where the boy Hansel sprinkled bread crumbs to find his way back. True, it would be more logical to call the plugin “pebbles”, since according to the story of the fairy tale, Hansel and Gretel could not find their way back, since the bread crumbs were eaten by birds. Well, okay, that’s not the point, the main thing is that this plugin will help visitors not get lost on your site and will let you know exactly where and in what category (part of the site) they are currently located.

In addition, the Breadcrumb NavXT plugin helps to evenly distribute static weight across all pages of the site, which is very important for its promotion in search engines. Just in case, if you think that internal linking (optimization) of a site is not so important, then I recommend that you read this one, from which you will change your point of view.

So, in this article I will show you how to implement this navigation on your website or blog using the Breadcrumb NavXT plugin , as well as simple code.

Installing the Breadcrumb NavXT breadcrumb plugin.

1 ) As usual, download the plugin and upload it to the blog, activate it.

2 ) Now we need to place special code in the place where you want to see the line of breadcrumbs. To do this, go to “appearance” “editor” and select the file into which you will paste the code. Most often, the plugin code is inserted into the “single entry” file (single.php) immediately before or after the article title. If you don’t understand codes at all, then just look for two tags at the very beginning of the code

And , which are responsible for displaying the names of publications. My code looks like this:</p> <p><b><h2>" title="<?php the_title (); ?>!}"><?php the_title (); ?></h2> </b></p> <p>When you find something similar, immediately paste this breadcrumb code in front of it and update the file.</p> <p><b><?php </b><br><br><b>(bcn_display();)</b><br><b>?> </b></p> <p>By the way, if you don’t like horizontal navigation and want it to be displayed vertically, then you need to insert this code instead of the previous one.</p> <p><b><?php if (function_exists ("bcn_display_list")) </b><br><b>{ </b><br><b>bcn_display_list();</b><br><b>}?> </b></p> <p>Good, as you can see, you now have a navigation bar, but without displaying the publication date at the very end, like mine. If you want to attach it to your navigation bar, then you just need to find the code in your theme that is responsible for displaying the publication date, and add it after the breadcrumb code.</p> <p><b><?php </b><br><b>if (function_exists("bcn_display"))</b><br><b>(bcn_display();)</b><br><b>?><span>> <span>Published<?php the_time (" j F Y"); ?></span></div> </span> </b></p> <p>If something is not clear, then > - displays such an arrow for me > and the letter j - stands for day, F - month, Y - year. I think after such explanations, it won’t be difficult for you to find such code yourself.</p> <p>Okay, now let's look at the design. The font style itself and the color of the navigation bar links are taken from your theme styles, but if you don't like them and want to change them, then just add this extra line to the code we pasted above.</p> <p><b><divclass="breadcrumb"></div> </b></p> <p>As a result, you should end up with code like this:</p> <p><b><divclass="breadcrumb"> </b> </span><br><b><?php </b><br><b>if (function_exists("bcn_display"))</b><br><b>{ </b><br><b>bcn_display();></b><br><b>} </b><br><b>?> </b><br><b></div> </b> </p> <p>Now go to “appearance” “editor” and open the “style sheet” file (style.css). And paste this code almost to the very bottom and update the file.</p> <p><b>.breadcrumb (</b><br><b>font:bolder 12px “Trebuchet MS”, Verdana, Arial;</b><br><b>padding-bottom: 10px;</b><br><b>} </b><br><b>.breadcrumb a(</b><br><b>color: #1B7499;</b><br><b>} </b><br><b>.breadcrumb a:hover (</b><br><b>color: #EF0E0E;</b><br><b>} </b></p> <p>Before moving directly to the review of modules, I’ll say a few words about how and why this solution is applied:</p> <ul><li>Firstly, it is useful from a usability point of view - navigation will orient people on the site and clarify its structure.</li> <li>Secondly, this feature also works for optimization, because is essentially another option, and also increases the number of clicks and dwell time (+ may appear in the results).</li> </ul><p>However, such functionality is effective in every web project. If you have a simple 10-20 page business card with no nested hierarchy, then there is no point in adding breadcrumbs to WP. The element will provide absolutely no benefit, but will only take up free space on the screen. In the case of corporate portals with multi-level categories/sections, it’s a completely different matter. Plus it looks great too.</p> <p>Theoretically, this block may not be displayed on all pages. For example, you have a blog, which initially provides several traditional paths through the site: tags and categories, archives of dates, authors, as well as specific posts. I would leave navigation in sections and notes, while in labels and dates the value of such information is minimal, because it simply duplicates the title. If the installed WordPress breadcrumb plugins do not allow you to do this directly, use . In addition, it is advisable to design the element as unobtrusively as possible through layout and styles.</p> <p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread2.jpg' width="100%" loading=lazy loading=lazy></p> <p>It’s stupid when immediately under the chain “Home” - “Category” - “Post Title” you see the same title + an indication of the current category. By the way, such a display of categories is often found in standard WP templates, so after integrating the appropriate solution, it is advisable to correct this nuance.</p> <h2>Plugins and Breadcrumbs in WordPress</h2> <p>Modules for this task can be easily found by the English name of the Breadcrumbs function - in the WordPress repository or through search engines. There are plenty of different implementation options, but most of them have not been updated for several years.</p> <p><img src='https://i2.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread3-560x380.jpg' width="100%" loading=lazy loading=lazy></p> <p>Perhaps the authors are tired of competing with the permanent leaders Breadcrumb NavXT with 600 thousand. downloads and SEO by Yoast. In addition, it is quite difficult to come up with something extra original in this matter, because it is as simple as possible and you can even implement breadcrumbs in WordPress without a plugin. Be that as it may, I have selected 4 of the most interesting solutions:</p> <p><img src='https://i0.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread41-560x250.jpg' width="100%" loading=lazy loading=lazy></p> <p>The main task of the module, in principle, has nothing to do with our topic today, but it cannot be ignored. One of the additional features of the Yoast SEO plugin is breadcrumbs. That is, you do not have to install a new module, but simply activate the appropriate option. In my work I use this option.</p> <p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread42-560x250.jpg' width="100%" loading=lazy loading=lazy></p> <p>is the most popular breadcrumb plugin in WordPress with over 600 thousand downloads. Updated regularly and contains many features to easily customize your navigation display. It also includes a built-in widget, support for bbPress, BuddyPress, localization, the ability for developers to use filters/hooks, and much more.</p> <p>Breadcrumb</p> <p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread43-560x250.jpg' width="100%" loading=lazy loading=lazy></p> <p>In principle, it is difficult to find solutions that would be more interesting than the previous two, although there are good attempts. For example, the Breadcrumb module for WordPress has support for shortcodes, plus the chain of links itself has an original design (see the Live Demo link!). It is not clear whether the designs are supported in the free version. You can also customize the separator type and add text at the beginning of the element. According to the developers, the script is as simple and lightweight as possible.</p> <p><img src='https://i1.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread44-560x250.jpg' width="100%" loading=lazy loading=lazy></p> <p>Another option that has, plus or minus, a decent number of downloads, despite the fact that it was updated about a year ago. The authors promise flexible customization of breadcrumbs in WordPress: built-in hooks, display options and style support (there is a CSS Sample in the description). The module seemed like a pretty good and simple solution with good grades.</p> <h3>Breadcrumbs in Yoast SEO</h3> <p>I will not describe in detail all the intricacies of the work, you can read about it in, I will focus exclusively on creating an element with crumbs. The integration process consists of two parts - installation in the admin panel + editing the template.</p> <p>After activation, a whole new SEO section will appear where you need to select the “Advanced” option. Next, move the switch in the item with the strange name “Enable Crumb” to the “On” position:</p> <p><img src='https://i0.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread51-560x489.jpg' width="100%" loading=lazy loading=lazy></p> <p>In principle, there are not so many different options here. You define the separator symbol, home title, prefix, text for archives and 404 pages. Just below, select the taxonomy option displayed in the post (category is the most logical).</p> <p>Then go to the template file where you are going to display the navigation block and add the lines:</p> <table><tr><td class="code"> <?php if ( function_exists ("yoast_breadcrumb" ) ) { yoast_breadcrumb("<p id="breadcrumbs">" , "</p>" ) ; } ?> </td> </tr></table><p><?php if (function_exists("yoast_breadcrumb")) { yoast_breadcrumb(""); } ?></p> <p>The most popular places to insert code are in posts (single.php) and pages (page.php) before displaying the header. Sometimes it can be placed at the end of the header layout (header.php). The code above has a conditional statement and checks for the presence of the plugin, and then displays the result. With this design, you can easily disable breadcrumbs in the settings. By the way, this code was added initially to many professional themes, because The module is very popular.</p> <p>Another advantage of Yoast SEO is that breadcrumbs can be set in additional parameters of blog posts:</p> <p><img src='https://i0.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread52-560x377.jpg' width="100%" loading=lazy loading=lazy></p> <p>That is, you have a chance to manually determine any WP post header value through the admin panel. This is useful for long article titles + allows you to get rid of duplicate information.</p> <h3>Breadcrumb NavXT Plugin for WordPress</h3> <p>Also, when creating breadcrumbs for WordPress, the Breadcrumb NavXT planin is used. The module has good functionality, which I partially mentioned above, plus it contains many interesting options. Almost every user can understand it and easily change the necessary settings of the navigation element.</p> <p>Via the admin panel or download from the official repository. Important! For Breadcrumb NavXT version 5.2 you will need PHP5.3, earlier releases require PHP5.2. Then you activate it, and the corresponding section will appear in WP.</p> <p><img src='https://i0.wp.com/wordpressinside.ru/wp-content/uploads/wordpressinside/newbread61-560x477.jpg' width="100%" loading=lazy loading=lazy></p> <p>There are 4 parameter tabs here:</p> <ul><li>In “Basic” you can select the type of separator, remove the link to the main page and configure the display of the current page. The string format is specified through templates.</li> <li>“Posts” - contains options for posts.</li> <li>“Taxonomies” - are responsible for tags/categories.</li> <li>“Other” - formats of author pages, archives, 404 errors.</li> </ul><p>I advise you to go through each tab and look at all the features. The display format allows you to make any changes to this navigation - add your own text/symbols, change styles, etc.</p> <p>After specifying the Breadcrumbs parameters in the WordPress plugin, you need to set the output of information in the template - open the corresponding layout file (usually header.php) and place the lines in the right place:</p> <table><tr><td class="code"> <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if (function_exists ("bcn_display" ) ) { bcn_display() ; } ?> </div> </td> </tr></table><p><div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists("bcn_display")) { bcn_display(); }?> </div></p> <p>Similar to working with Yoast SEO, the choice of where to place the code depends on the installed theme. If you intend to display a block in the header, then use header.php. Considering that this file is common to all pages of the layout, you will see a chain of links on each of them. You can also show an element only in selected sections - in this case, paste the code into single.php, page.php, archive.php, etc. Overall, Breadcrumb NavXT is a good tool.</p> <h2>Breadcrumbs in WordPress without a plugin</h2> <p>It is possible to implement the Breadcrumbs function in WordPress without plugins. However, before moving on to describing the different options, I will express my subjective opinion on why this is not the best idea:</p> <ul><li>Integration will certainly be challenging for novice users.</li> <li>Editing parameters directly in the code is not particularly clear - setting display templates through the admin panel is much more convenient than editing directly.</li> <li>Modules have more features - take at least localization, Schema.org support, widgets.</li> <li>Not all codes found on the web are current, correct and regularly updated, while at least Yoast SEO and Breadcrumb NavXT in WordPress work stably.</li> </ul><p>To be honest, I don’t think that creating breadcrumbs in WordPress without a plugin will give you a serious performance boost. Yes, if you are a cool web developer, creating a project for yourself, then you can get by with “clean code”; in all other cases, a ready-made module is much simpler.</p> <p>One of the most compact and plus or minus current solutions. The first thing you do is add a new custom function get_breadcrumb() to your functions.php file:</p> <table><tr><td class="code"> <span>/** * Generate breadcrumbs * @author CodexWorld * @authorURL www.codexworld.com */</span> function get_breadcrumb() ( echo "Home" ; if (is_category() || is_single() ) ( echo " » " ; the_category(" . " ) ; if (is_single() ) ( echo " » " ; the_title() ; ) ) elseif (is_page() ) ( echo " » " ; echo the_title() ; ) elseif (is_search() ) ( echo " » Search Results for... " ; echo "" <em>" ; echo the_search_query() ; echo "</em>"" ; } } </td> </tr></table><p>/** * Generate breadcrumbs * @author CodexWorld * @authorURL www.codexworld.com */ function get_breadcrumb() ( echo "Home"; if (is_category() || is_single()) ( echo " " "; the_category(" . "); if (is_single()) ( echo " » "; the_title(); ) ) elseif (is_page()) ( echo " » "; echo the_title(); ) elseif (is_search()) ( echo " » Search Results for... "; echo "" <em>"; echo the_search_query(); echo "</em>""; } }</p> <p>Then, in the post display layout single.php or any other, call it:</p> <table><tr><td class="code"> <div class="breadcrumb"><?php get_breadcrumb(); ?></div> </td> </tr></table><p><div class="breadcrumb"><?php get_breadcrumb(); ?></div></p> <table><tr><td class="code">breadcrumb ( padding : 8px 15px ; margin-bottom : 20px ; list-style : none ; background-color : #f5f5f5 ; border-radius : 4px ; ) .breadcrumb a ( color : #428bca ; text-decoration : none ; )</td> </tr></table><p>breadcrumb ( padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; ) .breadcrumb a ( color: #428bca; text-decoration: none; )</p> <p>As a result you will get something like:</p> <p>If this is enough for you, then why not. I can also recommend the option from Dimox, which tried to take into account all the shortcomings of existing snippets. There is much more source code there, it is quite possible to create a full-fledged module from it :)</p> <h2>How to Remove Breadcrumbs in WordPress</h2> <p>In principle, this task is the reverse of the process of installing an element. Therefore, before disabling it, you need to understand exactly how everything is implemented in your specific case. The algorithm is approximately the following:</p> <ol><li>Let's see if there is a breadcrumb plugin for a WordPress site. If yes, then try to hide the display of the chain of links in the settings and/or deactivate it.</li> <li>If the developer performed the integration correctly, then deleting the module will not lead to errors. Otherwise, we look for the navigation output code in the template files (WinGrep can help). These could be, for example, the functions yoast_breadcrumb(), bcn_display(), bread_crumb(), etc. Getting rid of extra lines.</li> <li>Let's check the display of the project pages in the browser again.</li> </ol><p>In principle, disabling or removing breadcrumbs in WordPress is not so difficult, the main thing is to understand how they were added. Edit the code carefully so as not to delete anything important (you can comment out the lines first).</p> <p><b>Total.</b> In the article, I discussed in detail how to make breadcrumbs in WordPress; the information on setting it up should be enough for you. Before installation, I advise you to think about whether you really need this unit. As for implementation, I personally don’t see the point of implementing a site path element in WordPress without a plugin, given that your web project will probably have Yoast SEO. As for other modules, they are useful only in the case of some original functionality. Breadcrumb NavXT seems pretty good, but I'm all for Yoast's solution.</p> <p><i>If you have any questions about working with Breadcrumbs breadcrumbs and WordPress plugins for them, write below, and we’ll sort it out.</i></p> <p><i>P.S. Guard. Nowadays, it is necessary to use modern pipeline systems - gas pipes presented by the Eurotrubplast Trade House meet all quality standards.</i></p> <p>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.</p> <p>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.</p> <p>First, let me explain what “breadcrumbs” are and why they are needed.</p> <p>So, <span>“Breadcrumbs” are additional page-by-page navigation that displays in which category or section the article is located.</span> 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:</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/zamena-kartinki.jpg' width="100%" loading=lazy loading=lazy></p> <p>On our website it looks like this:</p> <p><img src='https://i2.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/hlebnyie-kroshki-nash-sayt.jpg' width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>"Why?" - you ask, we decided to use this plugin. The answer here will be simple. There are a large number of similar services on the Internet that will help with the withdrawal of “crumbs”, but at the same time they will additionally load the site, which 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.</p> <h2><span><b>Setting up breadcrumb output with the Yoast SEO plugin</b> </span></h2> <p>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.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Nastroyki-plagina-SEO.jpg' height="264" width="157" loading=lazy loading=lazy></p> <p>In the window that opens, check the “Enable breadcrumbs” checkbox.</p> <p><img src='https://i2.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Vklyuchenie-navigatsii.jpg' width="100%" loading=lazy loading=lazy></p> <p>To our joy, the settings will open all in Russian, and they are intuitive. In the video that will appear in this article soon, I will show more clearly what will happen when you change some items in 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”.</p> <p>After enabling the 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.</p> <p><img src='https://i0.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Perehod-po-ssyilke.jpg' width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/Kod-dlya-vstavki-v-shablon.jpg' width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>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/.</p> <p><i>Note:</i> Please note that it is better to insert the code through an 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.</p> <p>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.</p> <p>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:</p> <p>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.</p> <p><img src='https://i1.wp.com/blog-bridge.ru/wp-content/uploads/2015/12/obrazets-perespamlennosti.jpg' width="100%" loading=lazy loading=lazy></p> <p>To avoid this, you need to additionally insert a small code into the functions.php file.</p><p>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");</p><p>Now all our settings are completed. If you did everything correctly, then you will get something similar to what you see on our blog.</p> <p>If you have any questions, write in the comments!</p> <p>Bye-bye everyone!</p> <p><i>Anton Kalmykov was with you</i></p> <p>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:</p> <h2>What are breadcrumbs and what are they for?</h2> <p>Breadcrumbs is a term used to describe a hierarchical navigation menu presented as a chain of links. It is often used as an additional navigation menu.</p> <p>Breadcrumbs are different from the default WordPress navigation menu system.</p> <p>The purpose of breadcrumbs is to help users navigate the site. They help to understand where the user is now. It also helps search engines determine the hierarchy of links to web pages.</p> <p>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:</p> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/breadcrumbs-seo-261125.png' width="100%" loading=lazy loading=lazy></p> <h3>Adding breadcrumbs using Breadcrumb NavXT Plugin</h3> <p>This is a flexible and easy to use WordPress breadcrumb plugin. It has more diverse features 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: <span>Settings - Breadcrumb NavXT</span>:</p> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/breadcrumbnavxt-settings-261126.png' width="100%" loading=lazy loading=lazy></p> <p>For most sites, the default settings will be fine. But if necessary, you can make changes to the settings.</p> <p>The settings page is divided into several sections. On the General tab, you can define how the plugin will behave on the site.</p> <p>Here you can change the link template. These templates use Schema.org parameters in the link tag.</p> <p>In the “Post types” section, you can set “breadcrumbs” for posts, pages, and any custom post types. You can choose to display the record hierarchy. By default the plugin will use the hierarchy " <span>Site title > Category > Post title</span>».</p> <p>You can replace navigation elements with tags, dates, or post parents. The Taxonomies and Authors tabs have similar templates for menu links. Don't forget to click on the " <span>Save changes</span>».</p> <h3>Displaying Breadcrumb NavXT on your site</h3> <p>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:</p> <p><div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <?php if(function_exists("bcn_display")) { bcn_display(); }?> </div></p> <p>Go to the site and open a post or page. You will see that you already have breadcrumbs displayed.</p> <h3>Adding Breadcrumbs with Yoast SEO Plugin</h3> <p>Install and activate Yoast SEO Plugin. After activating the plugin you need to go to the page <span>SEO > Advanced</span> and check the box for the option " <span>Enable breadcrumbs</span>»:</p> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201602/yoastbreadcrumb-1-261131.png' width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>Once you are finished, click on the " <span>Save changes</span>».</p> <h3>Generating Breadcrumbs Using the Yoast SEO Plugin</h3> <p>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.</p> <p>Paste this code into your theme's header.php at the end of the file:</p> <p><?php if (function_exists("yoast_breadcrumb")) {yoast_breadcrumb("");} ?></p> <p>That's all, now you can go to your website, breadcrumbs will already be displayed there.</p> <p>We hope this article helped you.</p> <p>Translation of the article " <span>How to Display Breadcrumb Navigation Links in WordPress</span>"was prepared by the friendly project team.</p> <p>Good bad</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://viws.ru/en/category/internet/">Internet</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/programs/">Programs</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/instructions/">Instructions</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/browsers/">Browsers</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/windows-10/">Windows 10</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/android/">Android</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/ios/">iOS</a> </li> <li class="submenu"><a href="https://viws.ru/en/category/communication/">Connection</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">The last notes</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/en/besplatnyi-onlain-sborshchik-razborshchik-i-kompressor-pdf-kak-soedinit-faily-v-odin.html" class="thumb"><img width="95" height="95" src="/uploads/9a33039a30feeb66635a37d6efafcc8d.jpg" class="attachment-mini size-mini wp-post-image" alt="How to combine files into one file?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/besplatnyi-onlain-sborshchik-razborshchik-i-kompressor-pdf-kak-soedinit-faily-v-odin.html">How to combine files into one file?</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/en/cifrovoi-telefon-isdn-tehnologiya-isdn-osnovnye-principy-isdn.html" class="thumb"><img width="95" height="95" src="/uploads/0ed8a01e3a4ecd770c6ba7be6fb99ca8.jpg" class="attachment-mini size-mini wp-post-image" alt="Digital phone isdn. ISDN technology. ISDN Basics" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/cifrovoi-telefon-isdn-tehnologiya-isdn-osnovnye-principy-isdn.html">Digital phone isdn. ISDN technology. ISDN Basics</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/en/samyi-moshchnyi-noutbuk-15-dyuimov.html" class="thumb"><img width="95" height="95" src="/uploads/9fefb37f6d9b50525ffecc9ce2c32378.jpg" class="attachment-mini size-mini wp-post-image" alt="The most powerful 15 inch laptop" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/samyi-moshchnyi-noutbuk-15-dyuimov.html">The most powerful 15 inch laptop</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/en/net-knopki-zapustit-ot-imeni-administratora-zapusk-ot-imeni.html" class="thumb"><img width="95" height="95" src="/uploads/90543552a38410ca8f6214ba70083c71.jpg" class="attachment-mini size-mini wp-post-image" alt="Run any program as administrator" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/net-knopki-zapustit-ot-imeni-administratora-zapusk-ot-imeni.html">Run any program as administrator</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/en/tp-link-n600-sbros-nastroek-sbros-nastroek-routera-sposoby-i-posledstviya.html" class="thumb"><img width="95" height="95" src="/uploads/367bc3ce6dd19fdeb5e4a5e214c075af.jpg" class="attachment-mini size-mini wp-post-image" alt="Resetting the router: methods and consequences" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/tp-link-n600-sbros-nastroek-sbros-nastroek-routera-sposoby-i-posledstviya.html">Resetting the router: methods and consequences</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">Popular</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/en/russkoyazychnye-telekanaly-sputnika-hotberd-samostoyatelnaya-nastroika.html" class="thumb"><img width="95" height="95" src="/uploads/f135318d597d26615b49c4dd6cc8e5a8.jpg" class="attachment-mini size-mini wp-post-image" alt="Self-configuring a satellite dish to receive HOTBIRD" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/russkoyazychnye-telekanaly-sputnika-hotberd-samostoyatelnaya-nastroika.html">Self-configuring a satellite dish to receive HOTBIRD</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/en/delo-trezvyh-skomorohov-andrei-belyanin-andrei-belyanin---delo-trezvyh.html" class="thumb"><img width="95" height="95" src="/uploads/610a41d2693830513493f41d17e2a865.jpg" class="attachment-mini size-mini wp-post-image" alt="Andrey Belyanin - the case of sober buffoons The case of drunken buffoons" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/delo-trezvyh-skomorohov-andrei-belyanin-andrei-belyanin---delo-trezvyh.html">Andrey Belyanin - the case of sober buffoons The case of drunken buffoons</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/en/samye-opasnye-internet-virusy-virusnye-zabolevaniya-perechen.html" class="thumb"><img width="95" height="95" src="/uploads/cca7510941161dd7d7a5f89fb9ac84c2.jpg" class="attachment-mini size-mini wp-post-image" alt="Viral diseases - a list of common ailments and the most dangerous viruses Methods of infection by viruses" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/en/samye-opasnye-internet-virusy-virusnye-zabolevaniya-perechen.html">Viral diseases - a list of common ailments and the most dangerous viruses Methods of infection by viruses</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">News</div> <div class="business_news"> <div class="news"> <div class="date">2024-04-28 01:39:23</div> <a href="https://viws.ru/en/popov-vasilii-grigorevich-uchastnik-vov-kak-uznat-gde-voeval-moi-ded.html" class="title">How can I find out where my grandfather fought in the Second World War and what awards he had?</a> </div> <div class="news"> <div class="date">2024-04-28 01:39:23</div> <a href="https://viws.ru/en/fonovaya-kartinka-fonovaya-kartinka-html-fon-stranicy.html" class="title">Background image HTML page background</a> </div> <div class="news"> <div class="date">2024-04-27 01:49:48</div> <a href="https://viws.ru/en/proshivka-samsung-galaxy-j7-2016-sm-j710f-proshivka-samsung-galaxy-j7-2016-sm-j710f-samsung-galaxy-j-7.html" class="title">Firmware Samsung Galaxy J7 (2016) SM-J710F Samsung galaxy j 7 firmware</a> </div> <div class="news"> <div class="date">2024-04-27 01:49:48</div> <a href="https://viws.ru/en/reshenie-problemy-s-failami-na-karte-pamyati-reshenie-problemy-s.html" class="title">Solving the problem with files on a memory card How to recover files from the lost dir folder</a> </div> <div class="news"> <div class="date">2024-04-27 01:49:48</div> <a href="https://viws.ru/en/pochemu-v-vaibere-ne-vidno-kontaktov-viber-ne-vidit-kontaktov-strannoe.html" class="title">Viber doesn't see contacts</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://viws.ru/en/" class="logo" style="background:none;">viws.ru</a> <div class="copyright"> <p>viws.ru - All about modern technology. Breakdowns, social networks, internet, viruses</p> <p><span>2024 - All rights reserved</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://viws.ru/en/feedback.html">Contacts</a></li> <li><a href="">About the site</a></li> <li><a href="">Advertising on the website</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://viws.ru/en/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/en/category/programs/">Programs</a></li> <li id="menu-item-"><a href="https://viws.ru/en/category/instructions/">Instructions</a></li> <li id="menu-item-"><a href="https://viws.ru/en/category/browsers/">Browsers</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://viws.ru/en/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/en/category/programs/">Programs</a></li> <li id="menu-item-"><a href="https://viws.ru/en/category/instructions/">Instructions</a></li> <li id="menu-item-"><a href="https://viws.ru/en/category/browsers/">Browsers</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://viws.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://viws.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </body> </html>