Breadcrumbs help user to navigate through your site easily and make the search engine results contemporary by displaying the breadcrumb trail. Though most of the themes offer breadcrumb as a default feature you may not have complete control over it on page-by-page mode. WordPress SEO plugin by Yoast is a power pack to boost SEO of your WordPress site and offers simple and effective way to handle breadcrumbs better than dedicated plugins for creating breadcrumbs. In this article we will discuss how to add breadcrumb in WordPress using Yoast SEO plugin along with customizing options.

如何在WordPress SEO Plugin by Yoast插件中添加面包屑导航条

The WordPress Toolbox
Unlimited Downloads: 500,000+ WordPress Themes, Plugins, Templates & Design Assets

如何在WordPress SEO Plugin by Yoast插件中添加面包屑导航条


Installing WordPress SEO Plugin

Login to your WordPress admin dashboard and navigate to “Plugins > Add New” menu. Search for “WordPress SEO” or look under the “popular” tab to find “WordPress SEO by Yoast” plugin.

Install the plugin and activate it on your site.

How to Add Breadcrumb

Once the plugin is installed it will add a new navigation menu with the name “SEO” and go to “SEO > Advanced” option.

如何在WordPress SEO Plugin by Yoast插件中添加面包屑导航条

Click on the checkbox “Enable Breadcrumbs” and customize your settings. Below are the options you can customize and applicable throughout your site:

  • Add separator between breadcrumbs level, it could be symbols like >, <, – or anything.

如何在WordPress SEO Plugin by Yoast插件中添加面包屑导航条

  • Enter the anchor text to be shown for the “Home” page.
  • Add prefixes for the breadcrumb paths on various pages like home, archives, 404 page, etc.
  • You can enable or disable the “Blog” page from the breadcrumbs.
  • If you want highlight the title in the breadcrumb by making it bold.
  • Choose the taxonomy and post type to be shown in the breadcrumb.

Save your changes and the next step is to add the below PHP code in your theme file.

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Navigate to “Appearance > Editor” and based on the layout of your theme you may need to paste this code either in “header.php” or in “single.php” file. For example, below is the breadcrumb display in twenty fifteen theme when the code is placed inside “single.php” file.

如何在WordPress SEO Plugin by Yoast插件中添加面包屑导航条

Changing the Post Title in Breadcrumb

Sometime the actual post title may be very long and you want to cut off to shorter title only in the breadcrumb display. Yoast SEO plugin will create a meta box in WordPress visual editor and offer various features applicable at page level.

When you are creating or editing a post, go to “Advanced” tab in WordPress SEO plugin meta box and enter the required breadcrumb title for that page. This will be displayed in the breadcrumb trial instead of the actual post title.

如何在WordPress SEO Plugin by Yoast插件中添加面包屑导航条