Как добавить хлебные крошки в заголовок WordPress?

Вопрос или проблема

Я хотел бы отобразить другие пути/страницы, которые находятся перед текущим сайтом, плюс текущий сайт, как вы можете видеть здесь.

скриншот

Я искал в интернете и не смог ничего найти. Возможно, дело в том, что я не знаю, что именно искать.

Мне всегда нравилось решение без плагинов, даже если оно сложное. Для создания хлебных крошек вам понадобятся функции.

Одна из них создаст цепочку элементов (таких как категории) для вас. Она будет использована для формирования хлебных крошек позже:

function get_category_parents( $id, $link = false, $separator = "https://wordpress.stackexchange.com/", $nicename = false, $visited = array(), $iscrumb=false ) {
    $chain = '';
    $parent = get_term( $id, 'category' );
    if ( is_wp_error( $parent ) ) {
        return $parent;
    }
    if ( $nicename ) {
        $name = $parent->slug;
    } else {
        $name = $parent->name;
    }
    if ( $parent->parent && ( $parent->parent != $parent->term_id ) && !in_array( $parent->parent, $visited ) ) {
        $visited[] = $parent->parent;
        $chain .= get_category_parents( $parent->parent, $link, $separator, $nicename, $visited , $iscrumb);
    }
    if ($iscrumb){
        $chain .= '<li><span class="sep">/</span><a href="' . esc_url( get_category_link( $parent->term_id ) ) . '"><span>'.$name.'</span></a></li>' . $separator ;
    } elseif ( $link && !$iscrumb) {
        $chain .= '<a href="' . esc_url( get_category_link( $parent->term_id ) ) . '">'.$name.'</a>' . $separator ;
    } else {
        $chain .= $name.$separator;
    }
    return $chain;
}

Теперь, когда у нас есть наша цепочка, давайте сформируем хлебные крошки:

function get_breadcrumbs() {
    global $wp_query;?>
    <ul><?php 
        // Добавление главной страницы  ?>
        <li><a href="https://wordpress.stackexchange.com/questions/194898/<?php echo esc_url( home_url() ); ?>"> <span> <?php bloginfo('name'); ?></span></a></li><?php
        if ( ! is_front_page() ) {
            // Проверка на категории, архивы, страницу поиска, одиночные записи, страницы, страницу 404 и вложения 
            if ( is_category() ) {
                $cat_obj     = $wp_query->get_queried_object();
                $thisCat     = get_category( $cat_obj->term_id );
                $parentCat   = get_category( $thisCat->parent );
                if($thisCat->parent != 0) {
                    $cat_parents = get_category_parents( $parentCat, true, '', false, array(), true );
                }
                if ( $thisCat->parent != 0 && ! is_wp_error( $cat_parents ) ) {
                    echo $cat_parents;
                }
                echo '<li><span class="sep">/</span><a href="'.get_category_link($thisCat).'"><span>'.single_cat_title( '', false ).'</span></a></li>';
            } elseif ( is_archive() && ! is_category() ) { ?>
                <li><?php _e( '<span class="sep">/</span> Архивы' , 'text-domain' ); ?></li><?php 
            } elseif ( is_search() ) { ?>
                <li><?php _e( '<span class="sep">/</span> Результаты поиска' , 'text-domain' ); ?></li><?php 
            } elseif ( is_404() ) { ?>
                <li><?php _e( '<span class="sep">/</span> 404 Не найдено' , 'text-domain'); ?></li><?php
            } elseif ( is_singular( 'post' ) ) {
                $category    = get_the_category();
                $category_id = get_cat_ID( $category[0]->cat_name );
                $cat_parents = get_category_parents( $category_id, true, '',false, array(), true );
                if ( ! is_wp_error( $cat_parents ) ) {
                    echo $cat_parents; 
                } 
            } elseif ( is_singular( 'attachment' ) ) { ?>
                <li>
                    <?php _e( '<span class="sep">/</span>', 'text-domain' ); the_title(); ?>
                </li><?php 
            } elseif ( is_page() ) {
                $post = $wp_query->get_queried_object();
                if ( $post->post_parent == 0 ) { ?>
                    <li><?php _e( '<span class="sep">/</span>', 'text-domain' ); the_title(); ?></li><?php
                } else {
                    $title = the_title( '','', false );
                    $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
                    array_push( $ancestors, $post->ID );
                    foreach ( $ancestors as $ancestor ) {
                        if ( $ancestor != end( $ancestors ) ) { ?>
                            <li>
                                <?php _e( '<span class="sep">/</span>', 'text-domain' ); ?><a href="<?php echo esc_url( get_permalink( $ancestor ) ); ?>"> <span><?php echo strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ); ?></span></a>
                            </li><?php 
                        } else { ?>
                            <li>
                                <?php _e( '<span class="sep">/</span>', 'text-domain' ); ?><?php echo strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ); ?>
                            </li><?php 
                        }
                    }
                }
            }
        } ?>
    </ul><?php 
}

А теперь, просто вызвав get_breadcrumbs(); в файле header.php вашей темы, вы получите красивую навигацию на своем сайте без установки каких-либо плагинов.

Я бы также использовал условие, чтобы скрыть хлебные крошки на главной странице:

if (!is_home()) {
    get_breadcrumbs();
}

Если я вас правильно понимаю, вы ищете хлебные крошки. Лучше всего, что я знаю, это хлебные крошки в SEO Suite от Yoast.

Вам просто нужно установить его и добавить следующий код в вашу тему.

yoast_breadcrumb('', '', false);

Ответ или решение

Как добавить хлебные крошки в заголовок WordPress

Хлебные крошки (breadcrumbs) — это элементы навигации, которые помогают пользователям понять, где они находятся на сайте и как они могут вернуться на предыдущие страницы. Если вы хотите добавить хлебные крошки в заголовок вашего сайта WordPress без использования плагинов, следуйте данным рекомендациям.

Шаг 1: Создание функции для получения родительских категорий

Первым делом вам нужно создать функцию, которая будет возвращать цепочку родительских категорий текущего элемента. Добавьте следующий код в файл functions.php вашей темы:

function get_category_parents($id, $link = false, $separator = ' > ', $nicename = false, $visited = array(), $iscrumb = false) {
    $chain = '';
    $parent = get_term($id, 'category');

    if (is_wp_error($parent)) {
        return $parent;
    }

    $name = $nicename ? $parent->slug : $parent->name;

    if ($parent->parent && ($parent->parent != $parent->term_id) && !in_array($parent->parent, $visited)) {
        $visited[] = $parent->parent;
        $chain .= get_category_parents($parent->parent, $link, $separator, $nicename, $visited, $iscrumb);
    }

    if ($iscrumb) {
        $chain .= '<li><span class="sep">/</span><a href="' . esc_url(get_category_link($parent->term_id)) . '"><span>' . $name . '</span></a></li>' . $separator;
    } elseif ($link && !$iscrumb) {
        $chain .= '<a href="' . esc_url(get_category_link($parent->term_id)) . '">' . $name . '</a>' . $separator;
    } else {
        $chain .= $name . $separator;
    }

    return $chain;
}

Шаг 2: Создание функции для отображения хлебных крошек

Теперь создайте функцию для отображения хлебных крошек, которая будет использовать ранее созданную функцию. Вставьте следующий код также в functions.php:

function get_breadcrumbs() {
    global $wp_query;
    echo '<ul class="breadcrumbs">';

    // Добавление главной страницы
    echo '<li><a href="' . esc_url(home_url()) . '"> ' . get_bloginfo('name') . '</a></li>';

    if (!is_front_page()) {
        if (is_category()) {
            $cat_obj = $wp_query->get_queried_object();
            $thisCat = get_category($cat_obj->term_id);
            $parentCat = get_category($thisCat->parent);
            if($thisCat->parent != 0) {
                $cat_parents = get_category_parents($parentCat, true, '', false, array(), true);
                if (!is_wp_error($cat_parents)) {
                    echo $cat_parents;
                }
            }
            echo '<li><span class="sep">/</span><a href="' . get_category_link($thisCat) . '"><span>' . single_cat_title('', false) . '</span></a></li>';
        } elseif (is_singular('post')) {
            $category = get_the_category();
            $category_id = get_cat_ID($category[0]->cat_name);
            $cat_parents = get_category_parents($category_id, true, '', false, array(), true);
            if (!is_wp_error($cat_parents)) {
                echo $cat_parents;
            }
        } elseif (is_page()) {
            $post = $wp_query->get_queried_object();
            if ($post->post_parent != 0) {
                $ancestors = array_reverse(get_post_ancestors($post->ID));
                foreach ($ancestors as $ancestor) {
                    echo '<li><a href="' . esc_url(get_permalink($ancestor)) . '">' . get_the_title($ancestor) . '</a></li>';
                }
            }
            echo '<li><span class="sep">/</span>' . get_the_title() . '</li>';
        }
    }
    echo '</ul>';
}

Шаг 3: Внедрение хлебных крошек в заголовок сайта

Теперь вам нужно вызвать созданную функцию get_breadcrumbs() в файле заголовка вашей темы, обычно это файл header.php. Вставьте следующий код в нужное место, не забудьте добавить условие для скрытия хлебных крошек на главной странице:

if (!is_home()) {
    get_breadcrumbs();
}

Заключение

С помощью вышеописанных шагов вы сможете легко добавить хлебные крошки в заголовок вашего сайта на WordPress без использования сторонних плагинов. Это не только улучшит навигацию для пользователей, но и может положительно сказаться на SEO вашего сайта. Отображение структуры сайта с помощью хлебных крошек помогает поисковым системам лучше понять его организацию.

Оцените материал
Добавить комментарий

Капча загружается...