+7 982 100 5 999

Хлебные крошки (Breadgrumbs)

index.php

<div class="breadgrumbs">
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/news/">Новости</a></li>
        <li><?php single_cat_title(); ?></li>
    </ul>
</div>

single-taxonomy.php

<div class="breadgrumbs">
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/news/">Новости</a></li>
        <li>
        <?php $cur_terms = get_the_terms( $post->ID, 'routescat' );
        if( is_array( $cur_terms ) ){
            foreach( $cur_terms as $cur_term ){
                echo '<a href="'. get_term_link( $cur_term->term_id, $cur_term->taxonomy ) .'">'. $cur_term->name .'</a>';
            }
        } ?>
        </li>
        <li><?php the_title(); ?></li>
    </ul>
</div>

single.php

<div class="breadgrumbs">
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/news/">Новости</a></li>
        <li><?php the_category(' '); ?></li>
        <li><?php the_title(); ?></li>
    </ul>
</div>

LESS

.breadgrumbs{
    ul{
        padding: 0;
        margin: 0;

        li{
            list-style: none;
            display: inline-block;
            vertical-align: text-top;
            font-size: 14px;
            margin-right: 15px;
            padding-right: 15px;
            position: relative;

            &::before{
                content: '';
                position: absolute;
                display: block;
                right: -8px;
                top: 2px;
                width: 14px;
                height: 14px;
                background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 50% 50%;
                background-size: contain;
            }
            &:last-child{
                padding-right: 0;
                margin-right: 0;

                &::before{
                    display: none;
                }
            }
            a{
                color: @color-1;
                text-decoration: none;

                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}