Breadcrump function with schema

Add function to your theme’s functions.php file. And output it with the function name.

function get_breadcrumb() {
    $first[] = ['name' => __('Home', 'cco'), 'pos' => '1', 'item' => get_home_url(), 'a' => true];
	$second[] = ['name' => get_the_title(), 'pos' => '2', 'item' => get_the_permalink(), 'a' => false];
    $breadcrumps = array_merge($first, $second);
	echo '<span class="breadcrumbs f-5">';
	foreach ($breadcrumps as $breadcrump) {
		$tag = $breadcrump['a'] ? 'a class="breadcrumb_cco n'.$breadcrump['pos'].'" rel="nofollow" href="'.$breadcrump['item'].'"' : 'div class="breadcrumb_cco"';
		$tagend = $breadcrump['a'] ? 'a' : 'div';
		echo '<'.$tag.'>'.$breadcrump['name'].'';
	}
	echo'</span>';?>
    <script defer="defer" type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                                <?php foreach ($breadcrumps as $breadcrump) { ?>
            {
                "@type": "ListItem",
                "position": "<?= $breadcrump['pos'];?>",
                "name": "<?= $breadcrump['name'];?>",
                "item": "<?= $breadcrump['item'];?>"
            }
                <?php if ( $breadcrump !== end( $breadcrumps ) ) { echo ','; }
                                } ?>
            ]
                 }
    </script>
        <?php }
       

Basic styling:

.breadcrumbs .breadcrumb_cco {
    display: inline-block;
}

.breadcrumbs .breadcrumb_cco.n1:after {
    color: #65c4bc;
    content: "»";
    margin: 0 .4rem;
}