آموزش طراحی بردکرامب با استایل جذاب بدون استفاده از افزونه

// Custom breadcrumb function by RayaWp.ir
function custom_breadcrumbs() {
    $home_url = home_url();

    if (is_single() || is_page()) {
        ob_start();
        echo '<div class="top-menu-wrap">';
        echo '<ul class="breadcrumb-list">';

        echo '<li class="placeholder-icons"><a href="' . $home_url . '"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="25" height="25"><path d="M24,9.724V19a5.006,5.006,0,0,1-5,5H18a1,1,0,0,1,0-2h1a3,3,0,0,0,3-3V9.724a3,3,0,0,0-1.322-2.487l-7-4.723a2.979,2.979,0,0,0-3.356,0l-7,4.723A3,3,0,0,0,2,9.724V19a3,3,0,0,0,3,3H6a1,1,0,0,1,0,2H5a5.006,5.006,0,0,1-5-5V9.724A4.993,4.993,0,0,1,2.2,5.579L9.2.855a4.981,4.981,0,0,1,5.594,0l7,4.724A5,5,0,0,1,24,9.724Zm-5,5.283a6.952,6.952,0,0,1-2.05,4.949l-3.515,3.438a2.063,2.063,0,0,1-2.87,0l-3.507-3.43A7,7,0,1,1,19,15.007Zm-2,0a5,5,0,1,0-8.536,3.535l3.5,3.422,3.58-3.43A4.958,4.958,0,0,0,17,15.007ZM15,15a3,3,0,1,1-3-3A3,3,0,0,1,15,15Z"></path></svg></a></li>';

        if (is_single()) {
            $categories = get_the_category();
            if ($categories) {
                foreach ($categories as $category) {
                    echo '<li class="links"><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
                }
            }
        }

        if (is_single()) {
            echo '<li class="links">' . get_the_title() . '</li>';
        } elseif (is_page()) {
            echo '<li class="links">' . get_the_title() . '</li>';
        }

        echo '</ul>';
        echo '</div>';
        $output = ob_get_clean();

        return apply_filters('custom_breadcrumb_output', $output);
    }
}

function breadcrumb_shortcode() {
    return custom_breadcrumbs(); 
}
add_shortcode('RayaWp-Bb', 'breadcrumb_shortcode'); 

/* Custom breadcrumb dark Style by RayaWp.ir */
.top-menu-wrap .breadcrumb-list {
    display: flex;
    background: #000; 
    white-space: nowrap;
    align-items: center;
    padding: 0;
    margin: 0;
    padding: 12px;
}

.top-menu-wrap .breadcrumb-list .placeholder-icons {
    display: flex;
    background: #fe346e;
    padding: 10px 15px 10px 15px;
    border-radius: 0 10px 10px 0;
    position: relative;
    margin-left: 7px;
    height: 50px;
    align-items: center;
    transition: all ease 0.2s;
}
a {
    color: #c1c1c1 !important;
}
a:hover {
    color: white !important;
}
li.links {
    color: white;
}
.top-menu-wrap .breadcrumb-list .placeholder-icons::after {
    content: " ";
    position: absolute;
    left: -40px;
    top: 0;
    width: 40px;
    height: 100%;
    border: 1px solid transparent;
    border-color: transparent #fe346e transparent transparent;
    border-width: 25px 25px 25px 0;
    z-index: 3;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list .placeholder-icons svg {
    fill: #fff;
}

.top-menu-wrap .breadcrumb-list .links {
    padding: 10px 40px 10px 10px;
    background: #0a0a12;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 6px;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list li:last-child {
    background: #6640fd;
}

.top-menu-wrap .breadcrumb-list .links::before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    border: 1px solid transparent;
    border-color: transparent #16161e transparent transparent;
    border-width: 25px 25px 25px 0;
    z-index: 1;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list .links::after {
    content: " ";
    position: absolute;
    left: -40px;
    top: 0;
    width: 40px;
    height: 100%;
    border: 1px solid transparent;
    border-color: transparent #0a0a12 transparent transparent;
    border-width: 25px 25px 25px 0;
    z-index: 2;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list li:last-child::after {
    border-color: transparent #6640fd transparent transparent;
}

.top-menu-wrap .breadcrumb-list .links:hover {
    background: #fe346e;
}

.top-menu-wrap .breadcrumb-list .placeholder-icons:hover {
    background: #0a0a12;
}

.top-menu-wrap .breadcrumb-list .links:hover::after {
    border-color: transparent #fe346e transparent transparent;
}

.top-menu-wrap .breadcrumb-list .placeholder-icons:hover::after {
    border-color: transparent #0a0a12 transparent transparent;
}

.top-menu-wrap .breadcrumb-list li:last-child:hover {
    background: #6640fd;
}

.top-menu-wrap .breadcrumb-list li:last-child:hover::after {
    border-color: transparent #6640fd transparent transparent;
}

.top-menu-wrap .breadcrumb-list i {
    margin: 0 13px;
    font-size: 10px;
} 

/* Custom breadcrumb light Style by RayaWp.ir */
.top-menu-wrap .breadcrumb-list {
    display: flex;
    background: #fff; 
    white-space: nowrap;
    align-items: center;
    padding: 0;
    margin: 0;
    padding: 12px;
}

.top-menu-wrap .breadcrumb-list .placeholder-icons {
    display: flex;
    background: #fe346e; 
    padding: 10px 15px 10px 15px;
    border-radius: 0 10px 10px 0;
    position: relative;
    margin-left: 7px;
    height: 50px;
    align-items: center;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list .placeholder-icons::after {
    content: " ";
    position: absolute;
    left: -40px;
    top: 0;
    width: 40px;
    height: 100%;
    border: 1px solid transparent;
    border-color: transparent #fe346e transparent transparent; 
    border-width: 25px 25px 25px 0;
    z-index: 3;
    transition: all ease 0.2s;
}
li.links {
    color: white;
}
.top-menu-wrap .breadcrumb-list .placeholder-icons svg {
    fill: #fff; /* رنگ سفید برای آیکون‌ها */
}

.top-menu-wrap .breadcrumb-list .links {
    padding: 10px 40px 10px 10px;
    background: #fff; 
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 6px;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list li:last-child {
    background: #6640fd; 
}

.top-menu-wrap .breadcrumb-list .links::before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    border: 1px solid transparent;
    border-color: transparent #fff transparent transparent; /* سفید */
    border-width: 25px 25px 25px 0;
    z-index: 1;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list .links::after {
    content: " ";
    position: absolute;
    left: -40px;
    top: 0;
    width: 40px;
    height: 100%;
    border: 1px solid transparent;
    border-color: transparent #fff transparent transparent; 
    border-width: 25px 25px 25px 0;
    z-index: 2;
    transition: all ease 0.2s;
}

.top-menu-wrap .breadcrumb-list li:last-child::after {
    border-color: transparent #6640fd transparent transparent;
}

.top-menu-wrap .breadcrumb-list .links:hover {
    background: #fe346e; 
}

.top-menu-wrap .breadcrumb-list .placeholder-icons:hover {
    background: #d02664; 
}

.top-menu-wrap .breadcrumb-list .links:hover::after {
    border-color: transparent #fe346e transparent transparent; 
}

.top-menu-wrap .breadcrumb-list .placeholder-icons:hover::after {
    border-color: transparent #d02664 transparent transparent;
}

.top-menu-wrap .breadcrumb-list li:last-child:hover {
    background: #6640fd; /
}

.top-menu-wrap .breadcrumb-list li:last-child:hover::after {
    border-color: transparent #6640fd transparent transparent;
}

.top-menu-wrap .breadcrumb-list i {
    margin: 0 13px;
    font-size: 10px;
}