Главная
Wordpress
Вывод тегов (меток) WordPress по алфавиту на одной странице
  • 17 Янв 2015г
  • 1569
  • 5
  • Рубрика: Wordpress

Вывод тегов (меток) WordPress по алфавиту на одной странице

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

1. Создать новый шаблон страницы

Для этого находим внутри Вашей темы файл page.php и открываем его для редактирования.

2. Определить название нового шаблона

В само начале есть строка или несколько строк вот с таким примерно кодом:

<?php  get_header(); ?>

Его нужно заменить на

<?php  /* Template Name: Страница меток */
get_header(); 
?>

Таким образом мы задали имя новому шаблону - Страница меток.

3. Заменить цикл WordPress на наш новый код

Далее нужно найти цикл WordPress. Выглядит он примерно как в коде ниже, но он может быть на много больше, главное
что он начинается с have_post и в конце заканчивается endwhile; endif;

Обратите внимание, что у Вас могут быть разные div блоки которые задают структуру Вашего сайта, так что будьте внимательны!

Пример:

<?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 = 4; // Количество колонок
       $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>';
?>

В 5 строке $cols_number = 4; - Это количество колонок
Можете менять в зависимости от ваших нужд.

4. Задать стили

Далее нужно задать стили для корректного вывода меток на странице.
Для этого нужно открыть файл стилей style.css и вставить в него следующий код:

#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;
  text-transform:uppercase;
}
.column {
  float: left; 
  width: 24%; 
}

width: 24%; - это ширина для 4 колонок, если вы поставите например 2, то - width: 48%; и так далее.
Стили можете подгонять под себя как обычно.

Готовый результат, если вы сделали все правильно будет выглядеть примерно так.
stran_met

На этом все, спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(6 голосов, в среднем: 5 из 5)

Опубликовано 5 комментариев

  • Михаил
    Комментариев: 1

    Вопрос? Метки на странице выводить шорткодом? Или по другому?
    Все сделал чистая страница.....:((

    • Сергей
      Комментариев: 2

      Метки сами выводятся. Для этого - создаете новую Страницу, справа выбираете Шаблон для страницы "Страницы меток" - сохраняете - открываете созданную страницу!

  • Сергей
    Комментариев: 2

    Возникает другой вопрос - данная страница не отображается в мобильной версии сайта. Кто знает, как решить проблему, прошу помочь!

    • Виталий
      Комментариев: 269

      Здравствуйте, возможно что-то со стилями. Потому как на мобильную версию, влияют только они.

  • Вера
    Комментариев: 1

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

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий