Как сделать алфавитный каталог с помощью облака меток

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Или вывод тегов WordPress по алфавиту

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

Как практически применить такое облако:

  1. На сайтах с большим количеством разнородного материала оно пригодится для облегчения поиска по темам – благодаря ему, пользователь с легкостью найдет интересующей его материал.
    Особенно полезной будет страница с облаком тегов (меток) на сайтах-порталах или в каталогах: вывод по алфавиту поможет посетителям быстро сориентироваться в сотнях страниц схожей тематики.
  2. А еще при помощи тегов можно структурировать контент на сайте, например, создать каталог товаров или организаций. К записи с описанием товара или организации добавить метку, а затем вывести все метки на отдельной странице и назвать ее каталогом.
  3. Кроме того, страница с тегами (метками) это еще один способ улучшить поведенческие факторы сайта, поскольку она поможет задержать посетителя на сайте, предложив ему не привычный контент.

Организовать вывод тегов WordPress можно в несколько колонок, в зависимости от ширины контентной части страницы.

Теги wordpress

Как вывести теги WordPress на отдельную страницу?

Сначала, нужно создать файл с именем template-tags.php. Для этого скачайте на свой компьютер page.php вашей темы и отредактируйте его, следующим образом:

  1. Переименуйте в template-tags.php.
  2. Функцию
    <?php  get_header(); ?>

    замените следующими строками:

    <?php  /* Template Name: template-tags.php */
    get_header(); 
    ?>

    Как видите, мы добавили в файл название шаблона.
    Название можно писать по английски или по русски – разницы нет.

  3. Удалите цикл wordpress. Код цикла выглядит примерно так, но, может содержать и другие теги:
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
    <?php endwhile; endif; ?>

    Вместо него, вставьте этот код:

    <?php
         $tags = get_tags('orderby=name&order=ASC');
         $capital = '';
         $i = 0;
           $cols_number = 2; // Количество колонок
           $cut = ceil( count($tags)/$cols_number );
           $cutter = $cut;
           $letter_i = 0;
           $output = '<div class="column">';
           foreach ( $tags as $tag ) {
           $i++;
           $firstletter = mb_substr($tag->name, 0, 1);
             if ( $firstletter !=  $capital ) {
                $letter_i++;
                if ( $letter_i != 1 ) $output .= '';
                   if ( $i > $cutter ) {
                      $output .= '</div><div class="column">';
                      $cutter = $cutter + $cut;
             }
             $capital = $firstletter;
             $output .= '<div class="tag-title">' . $capital . '</div>';
           }
           $term = get_term_by('id', (int)$tag->term_id, 'post_tag');
           $output .= '<p><a href="' . get_term_link( (int)$tag->term_id,
    'post_tag' ) . '">' . $tag->name . '</a> (' . $term->count . ')</p>';
        }
        echo $output . '</div>';
    ?>

Сохраните внесенные изменения и закачайте файл в папку с темой на хостинге.

Далее, нужно внести изменения в styles.css вашей темы, например, чтобы вывести теги в две колонки:

/*  Catalog    */
 
#catalog {
  margin-bottom: 20px;
}
#catalog p {
  margin: 0 0 5px 0;
}
.tag-title {
  font-size: 18px;
  margin: 10px 0 7px 0 !important;
  font-weight: normal;
}
.column {
  float: left; 
  width: 48%; 
}

Добавьте этот код в самый конец файла.
Если, хотите сделать четыре колонки, в коде вывода в переменной $cols_number = 2; цифру 2 замените на 4, а в параметре width селектора .column укажите 24%.

Чтобы увидеть результат проделанной работы, создайте новую страницу на своем блоге, а в качестве шаблона для нее, выберите созданный файл.

После публикации вы увидите облако тегов WordPress в алфавитном порядке в несколько колонок. Например, так, как на сайте vasha-klumba.ru.

А как добавить в каталог изображения читайте в следующем посте →

Скачать код можно по ссылке ниже ↓

Уже скачали 74 раз(а)

Открыть ↓

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

Код для вывода облака тегов (меток) в виде алфавитного списка взят с этого сайта.

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

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Как же все разжевано))
    Имхо, в коде лишнее
    $term = get_term_by('id', (int)$tag->term_id, 'post_tag');
    Это сразу есть в массиве, зачем второй раз вызывать?

    • Для того, чтобы вывести количество меток одного типа :).

      • Не буду спорить, предложу лишь свой вариант решения, только что набросал)
        $tags = get_tags('orderby=name');
        $cols_n = 3; // Колличество колонок
        $one_n = ceil(count($tags)/$cols_n);
        foreach($tags as $tag){
        $first = strtolower(mb_substr($tag->name, 0, 1));
        $tags_alf[$first][$tag->term_id] = $tag;
        }
        foreach($tags_alf as $lit => $tags){
        $mout .= ''.$lit.'';
        foreach($tags as $id => $tag){
        $i++;
        $mout .= ''.$tag->name.'('.$tag->count.')';
        }
        if($i > $one_n){
        $out .= ''.$mout.'';
        $i = $i - $one_n;
        $mout = '';
        }
        }
        echo ''.$out.'';

      • Если разобрать табуляцию, выглядит все очень просто, как мне кажется..

        • Спасибо, ваш вариант, тоже, пригодится.

  2. Чтобы увидеть результат проделанной работы, создайте новую страницу на своем блоге, а в качестве шаблона для нее, выберите созданный файл.

    Вот это мне совсем непонятно. Как выбрать файл для страницы в качестве шаблона?

  3. Еще один повод стать подписчиком :) У меня блог разношерстной тематики, может такая функция поможет моим пользователям? Никогда не пользовалась метками, теперь думаю, что наверное зря...

  4. А можно ли так рубрики вывести?

    • Можно, но не так, немного по-другому :).
      Возможно об этом напишу в следующий раз.

  5. Здравствуйте Людмила!
    Ваш блог у меня в закладках. Чтобы решить какую-то проблему по WP , захожу прежде всего сюда.
    Но в этот раз не нашла ничего по ЧПУ.
    В обычном смысле - там ничего сложного, но у меня магазин на WP с плагином WooCommerce. Так вот там проблема. Только создашь товар-запись, уже страницу не находит, хотя в каталоге-рубриках товаров эти записи есть - картинки и описания выдает.
    Вы, случайно, не работали по этой теме? может, подскажите, где поискать ответ. Спасибо.

    • К сожалению, не работала, ничего не могу подсказать.

    • Здравствуйте Мария! Как можно с Вами связаться? Моя почта anel67@mail.ru. Спасибо!

  6. Мария, здравствуйте. А как вывести метки только с кол-вом записей от 25 (или другим)?

  7. Здравствуйте Людмила, у меня вопрос не по теме данного поста, извиняюсь.. Хотел спросить, у меня сайт работает на вашей теме Сабрина Премиум, недавно решил установить форму комментирования от Disqus, установил, активировал, работает, но вскоре заметил что по какой то причине ежедневно увеличивается база данных на хостинге и главное нагрузка на сервер резко, аж в несколько раз, возрастает. Хотел спросить вас. если знаете конечно, возможно ли вообще подключение Disqus к вашим темам и второе, может ли форма комментирования шаблона Сабрина создавать какие то неблагоприятные моменты из- за чего возрастает нагрузка, может попробовать удалить comments.php чтобы не конфликтовал? Другие плагины все отключал ничего особо не нашел.. Если есть что подсказать. буду благодарен..

    • возможно ли вообще подключение Disqus к вашим темам

      Эта форма подключается к сайту, а не конкретно к теме.
      Какая тема стоит на сайте, значения не имеет.

      может ли форма комментирования шаблона Сабрина создавать какие то неблагоприятные моменты из-за чего возрастает нагрузка, может попробовать удалить comments.php чтобы не конфликтовал?

      Форма комментирования здесь ни при чем.
      Скорее всего, именно скрипт Disqus создает назрузку на сервер.

      Запросите у техподдержки хостинга список файлов, к которым идет больше всего запросов - тогда будете точно знать.

  8. Здравствуйте! При создании статичной страницы с выводом меток возникает такая проблема, что в мобильной версии сайта (при использовании плагинов мобильной версии) эта страница пуста. Кто может подсказать решение вопроса вывода меток в мобильной версии?

    • В мобильной версии метки работают так же, как и в обычной.
      Смотрите в сторону плагина.

  9. Здравствуйте, подскажите, а как сделать тоже самое, только с рубриками а не с тегами?

  10. Ксана, добрый день. Подскажите пожалуйста. У меня метки отражаются после каждой статьи и еще расположены в футере. А если просто убрать блок меток из футера, что бы не было дублирования на каждой странице и не создавать отдельную страницу?

    • Можно и так.
      Хотя, отдельная страница создается для удобства пользователей.

  11. Здравствуйте! Спасибо все получилось. Но можно ли создать как-то 2 алфавита и их разграничить. Например, мне на сайте нужен "список лекарственных трав по алфавиту" и "заболевания по алфавиту", а так получается все вперемешку.

    • Функция get_tags, которая выводит облако меток в данном случае, не имеет параметра, позволяющего разграничить метки.
      Вам лучше использовать обычный цикл с выводом по метке.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 196
Отзывов 4381