Пишем глоссарий или словарь терминов на основе меток (тегов) WordPress

Данная статья посвящена созданию простого глоссария (словаря терминов) без плагинов на базе функционала меток (тегов) WordPress. Это некий аналог Википедии, с помощью которого ваш контент может быть более понятным для посетителей вашего ресурса.

Зачем нужен глоссарий для сайта WordPress?

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

Если говорить еще проще, то нам предстоит создать страницу в WordPress с выводом всех тегов сайта, сортированных в алфавитном порядке.

Наполнение тегов

Каждый тег необходимо заполнять как мини-статью, которая будет описывать определенный термин и давать общее представление о метке или теге, как о подразделе вашего сайта. Пример того, что получилось на данном ресурсе: https://nikonorow.ru/tag-glossary/

Создание раздела глоссария

Первым делом, мы создадим пустой файл шаблона с расширением .php с любым названием (в моем случае это gloss.php). В нем пропишем комментарий Template name, который затем поможет нам выбрать нужный шаблон при создании страницы.

<?php /* Template name: Глоссарий */ ?>

Сохраняем и загружаем данный файл в папку, где лежит ваша тема WordPress (путь: /wp-content/themes/имя вашей темы).

Как создать страницу WordPress?

Затем, мы создадим страницу для нашего словаря терминов. Переходим в админ-панель вордпресс, выбираем в левом меню пункт «Страницы» (1) и нажимаем «Добавить новую.» (2):

Заполняем заголовок (1), описание раздела (2), уникальный URL-адрес (3). Выбираем файл нашего будущего шаблона (4), в открывшемся списке выбираем нужный шаблон (5) и нажимаем опубликовать (6).

Пишем код шаблона на PHP:

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

<?php /* Template name: Глоссарий тегов */ ?>
<?php get_header(); //выводим шапку сайта (header.php из вашего шаблона) 
?>

<div class="main-content">
    <div class="container">

        <div class="wlatest">
            <div class="wtopics" id="portfolio">
                <div class="block-title">
                    <?php the_title('<h1><span class="white">#</span>', '</h1>'); //выводим заголовок страницы 
                    ?>
                </div>
                <?php the_content(); //выводим текст или контент страницы
                ?>
            </div>
            <div class="wposts">
                <?php
                $tags = get_tags(); // записываем в переменную $tags список тегов
                if ($tags_list) {
                    $all = ''; // переменная для всех тегов
                    foreach ($tags as $tag) {  // запускем цикл и обращаемся к каждому объекту массива тегов
                        $letter = mb_substr($tag->name, 0, 1, 'utf-8'); //выводим первую букву тега - UTF-8 нужен для корректного отображения кириллицы
                        $pos = strpos($all, $letter); // Ищем первую букву в переменной all
                        if ($pos === false) { // если не нашли, показываем букву
                            $all .= $letter;  // и добавляем ее в переменную.
                ?>
                            <div class="npost">
                                <div class="textpost">
                                    <?php
                                    echo '<h3 class="yellow">' . $letter . '</h3>'; // выводим заголовок letter
                                    $tags_list = get_tags(); // записываем в переменную $tag_list список тегов
                                    foreach ($tag_list as $t) { //запускем цикл и обращаемся к каждому объекту массива тегов
                                        if ($letter == mb_substr($t->name, 0, 1, 'utf-8')) { //если первая буква тега равна заголовку letter
                                            echo '<p><a href="' . get_tag_link($t->term_id) . '" class="tag mons-up white">' . $t->name . '</a></p>'; // то выводим ссылку на данный тег, внутри которой будет само название тега
                                        }
                                    }
                                    ?>

                                </div>
                            </div>
                <?php
                        }
                    }
                }
                ?>
            </div>
        </div>

    </div>
</div>

</body>
<?php get_footer(); // выводим подвал сайта (footer.php из вашего шаблона)> 

Не забудьте переписать верстку под ваш шаблон (об обновлении шаблона и верстки данного сайта — смотрите здесь), либо используйте данные html-фрагменты, но в style.css вашей темы пропишите парараметры классов. После того вы как во всем разобрались, рекомендую удалить комментарии из кода, чтобы ускорить его. И, в дальнейшем, не комментируйте так много и таким образом. Данные пояснения необходимы только для данной статьи, чтобы максимально разжевать суть происходящего.

Итог

Вот мы и написали простой раздел, который выводит все метки сайта и служит в качестве глоссария. Еще раз повторю пример того, что получилось на данном ресурсе: https://nikonorow.ru/tag-glossary/

Дополнять и переделывать данный функционал можно как угодно:

• В идеале, в данный раздел можно добавить простую навигацию по алфавиту (вывести уникальные значения всех первых букв, например: появится алфавитная полоса и нажимая на букву «А» — пользователю отображается только блок терминов, начинающихся с данной буквы.
• Второй вариант — сделать поиск, который будет отображать термины, введенные пользователем в строке поиска. Данный функционал можно реализовать с помощью javascript.

Можно использовать оба варианта одновременно, это лишь идея по поводу того, как можно улучшить данный раздел.