Embed Yoast Breadcrumb in your WordPress theme

This page explains how to embed Yoast Brettcrumb into your WordPress theme.
Since I cannot explain all the themes, I will tell you based on the Hester Blogo and Blogmate themes.

What is breadcrumb?

A breadcrumb is usually a navigation path at the top of a web page. This is a method that helps you quickly navigate the web page structure.
It is very important to understand the site structure in Google SEO as it also helps.

Yoast SEO comes with breadcrumb built-in.

In Yoast SEO settings, you can find it in the Advanced menu at the bottom of the menu.
Once you have the basic setup, you need to integrate Breadcrumbs into your theme.
There are two integration methods:

1. Edit theme files directly
2. Use the sidebar widget

1. Edit the theme file directly

Even beginners can easily add the sidebar widget, but the breadcrumb must be at the top for better visibility.
People who are not familiar with sidebars may not find it easy.

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

For general themes, Yoast’s knowledge base says to place them at the top of single.php or page.php.
If you have installed the Hester Blogo and Blogmate themes, edit the following files.

WordPress installation path/themes/template-parts/header/base.php
Open the file and add the following at the bottom:

<?php do_action( 'bloglo_before_header' ); ?>
<div id="bloglo-header" <?php bloglo_header_classes(); ?>>
	<?php do_action( 'bloglo_header_content' ); ?>
</div><!-- END #bloglo-header -->
<?php do_action( 'bloglo_after_header' ); ?>

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

also write the following CSS:

.breadcrumb {
    max-width: 1420px;
    padding: 0 5rem;
    margin: 0 auto; 
}

2. Add to sidebar

Go to Customize Theme -> Widgets.
Go to the sidebar and click the + button at the bottom.

Search for breadcrumb, insert the widget, and move it to the top.

The results of modifying the theme and placing it at the top or adding a widget to the sidebar are as follows.