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

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

add_filter('theme_breadcrumb_args_filter', 'customize_separator_breadcrumbs');

    function customize_separator_breadcrumbs($args) {
        $args['sep'] = ' >> ';
        return $args;
    }

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Главная</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Результаты поиска для... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

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

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

Добавление собственных хлебных крошек (breadcrumbs) в WordPress — важный аспект улучшения пользовательского опыта и SEO-продвижения сайта. Хлебные крошки позволяют посетителям легко navigировать по сайту и возвращаться к предыдущим категориям или страницам. В этой статье мы рассмотрим, как создать и настроить пользовательские хлебные крошки для страницы аккаунта, используя файл functions.php.

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

Для начала создадим функцию get_breadcrumb() в файле functions.php вашей темы. Эта функция будет отвечать за создание необходимых ссылок для хлебных крошек.

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp; &gt;&nbsp;&nbsp;";
        the_category(' &bull; ');
        if (is_single()) {
            echo " &nbsp;&nbsp; &gt;&nbsp;&nbsp; ";
            the_title();
        }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp; &gt;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp; &gt;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Шаг 2: Вызов функции в шаблонах

После создания функции необходимо добавить вызов get_breadcrumb() в шаблоны, где вы хотите отображать хлебные крошки. Например, в файле single.php или page.php вы можете использовать следующий код:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

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

Если вам нужно изменить разделители, можно использовать фильтр, как показано в вашем примере. Чтобы настроить разделитель, добавьте следующий код:

add_filter('theme_breadcrumb_args_filter', 'customize_separator_breadcrumbs');

function customize_separator_breadcrumbs($args) {
    $args['sep'] = ' >> ';
    return $args;
}

Этот код позволит вам настроить символы между элементами хлебных крошек на «>>».

Шаг 4: Стилизация хлебных крошек

Чтобы сделать хлебные крошки более привлекательными, добавьте соответствующие стили в файл CSS вашей темы:

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

Заключение

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

Для дополнительной информации и примеров вы можете обратиться к этой полезной статье на Stack Overflow. Если у вас возникнут вопросы, не стесняйтесь задавать их в комментариях.