Главная » Wordpress » Вывод тегов WordPress в несколько колонок в алфавитном порядке

Вывод тегов WordPress в несколько колонок в алфавитном порядке

08.12.2011 / Wordpress Юрий Похилько

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

Для начала нужно создать шаблон страницы, назовем его template-tags.php

Далее вставьте в него следующий код:

<?php
/*
Template Name: Теги
*/

get_header(); ?>

    <div id="content">

        <?php if ( have_posts() ) {
            while ( have_posts() ) : the_post(); ?>

                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                    <div class="hentry-meta">
                        <h1><?php the_title(); ?></h1>
                    </div>

                    <div class="hentry-content clear">
                        <div class="tags">
                            <?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 );
                                $firstletter = mb_strtoupper($firstletter);
                                if ( $firstletter != $capital ) {
                                    $letter_i ++;
                                    if ( $letter_i != 1 ) {
                                        $output .= '</ul>';
                                    }
                                    if ( $i > $cutter ) {
                                        $output .= '</div><div class="column">';
                                        $cutter = $cutter + $cut;
                                    }
                                    $capital = $firstletter;
                                    $output .= '<h4>' . $capital . '</h4><ul>';
                                }
                                $term = get_term_by( 'id', (int) $tag->term_id, 'post_tag' );
                                $output .= '<li><a href="' . get_term_link( (int) $tag->term_id, 'post_tag' ) . '">' . $tag->name . '</a> (' . $term->count . ')</li>';
                            }
                            echo $output . '</ul></div>';
                            ?>
                        </div>
                    </div>

                </div> <!-- .page -->

            <?php endwhile;
        } // end of the loop. ?>

    </div><!-- #content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php

Template Name: Теги

get_header(); ?>

<?php if ( have_posts() ) {

while ( have_posts() ) : the_post(); ?>

</div>

<?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 );

$firstletter = mb_strtoupper($firstletter);

if ( $firstletter != $capital ) {

$letter_i ++;

if ( $letter_i != 1 ) {

$output .= '</ul>';

}

if ( $i > $cutter ) {

$output .= '</div><div class="column">';

$cutter = $cutter + $cut;

}

$capital = $firstletter;

$output .= '<h4>' . $capital . '</h4><ul>';

}

$term = get_term_by( 'id', (int) $tag->term_id, 'post_tag' );

$output .= '<li><a href="' . get_term_link( (int) $tag->term_id, 'post_tag' ) . '">' . $tag->name . '</a> (' . $term->count . ')</li>';

}

echo $output . '</ul></div>';

</div>

</div>

<?php endwhile;

} // end of the loop. ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Структура страницы вашей темы отличается от моего примера, поэтому вам нужно будет скорректировать его, например, посмотрите код вашего page.php. Вся логика вывода тегов находится в блоке с классом tags.

Добавим стили, вставьте их в ваш styles.css:

/***** Tags *****/

.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html .clear {zoom: 1; clear: both;}
*+html .clear {zoom: 1; clear: both;}

.page-template-template-tags-php h4 {font-weight: bold; text-transform: uppercase;}
.page-template-template-tags-php .hentry-content {width: 620px; overflow: hidden;}
.page-template-template-tags-php .hentry-content .tags {width: 640px;}
.page-template-template-tags-php .hentry-content ul {list-style: none; margin: 0 0 15px 0;}
.page-template-template-tags-php .hentry-content ul li {color: #898989;}
.page-template-template-tags-php .hentry-content .column {width: 140px; float: left; margin-right: 20px;}

/***** Tags *****/

.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

* html .clear {zoom: 1; clear: both;}

*+html .clear {zoom: 1; clear: both;}

.page-template-template-tags-php h4 {font-weight: bold; text-transform: uppercase;}

.page-template-template-tags-php .hentry-content {width: 620px; overflow: hidden;}

.page-template-template-tags-php .hentry-content .tags {width: 640px;}

.page-template-template-tags-php .hentry-content ul {list-style: none; margin: 0 0 15px 0;}

.page-template-template-tags-php .hentry-content ul li {color: #898989;}

.page-template-template-tags-php .hentry-content .column {width: 140px; float: left; margin-right: 20px;}

Опять же, поправьте стили, учитывая ваш шаблон.

Теперь осталось только создать статическую страницу и назначить ей шаблон Теги. Должно получится примерно вот так, как на скриншоте:

art

красиво получилось
Shershov

Спасибо! Забираю в закладки.
AggreSSor

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

Спасибо. Все получилось
Марио

Интересная и удобная вещь. Спасибо!
oktano

Я хотел бы узнать, а есть ли плагин подобного действия, только для вывода не тегов, а всех категорий на отдельной странице, с такой же разбивкой по колонкам? За пример с тегами большое спасибо.
- Neolot
  
  Насчет плагина не знаю, проще этот код модифицировать для категорий
oktano

Спасибо за ответы, только они мало помогают, так как односложные )). Резонный вопрос, как переделать, чтобы из тегов стали выводится категории? Если не сложно и есть свободное время, то напишите, пожалуйста, код. Сам бы мог — не спрашивал бы ))

Второй вопрос. У меня есть категория, в ней есть подкатегории. Нужно сделать так, чтобы в главной категории выводился список всех подкатегорий с разбивкой на произвольное кол-во колонок (как например вот тут http://m0006.gamecopyworld.com/games/gcw_index_2.shtml). Шаблон категории основной будет сменен на уникальный, в него вставлен код вывода все подкатегорий главной категории. Подскажите, как это сделать, или лучше код напишите. Если сложно и требует больших физ. и умственных затрат — огласите цену, можно на мыло. Спасибо.
Акулов

oktano, я как раз этим сейчас занимаюсь, нужна помощь — пиши.
Ramazan

Здравствуйте, почему некоторые буквы повторяются по 2-3 раза?

скрин: http://savepic.org/2389859.png
- Neolot
  
  Это происходит потому, что у вас первая буква тега может быть как большой, так и маленькой. Приведите их к единому виду и повторов не будет. И да, код не идеальный.
антон

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

http://s019.radikal.ru/i609/1210/ce/8687648e1885.jpg
Евгений

Спасибо, а как убрать буквы по алфавиту и вывести только, сами теги по алфавиту, не подскажите? Спасибо!)
- Neolot
  
  Чтобы просто вывести тэги по алфавиту есть встроенная функция http://codex.wordpress.org/Function_Reference/get_tags
Defite

Метки не выводятся вообще. Сделал все как в посте описано. Если выводить таким способом категории, то выдает Object of class WP_Error could not be converted to string на $output .= ‘term_id, ‘post_tag’ ) . ‘»>’ . $tag->name . ‘ (‘ . $term->count . ‘)’;
- Neolot
  
  Где в статье сказано про категории? Если не можете понять как работает этот код читайте учебники.
  - Defite
    
    Не очень понятна ваша агрессия. Я имел в виду, что если модифицировать ваш код, то при выводе категорий появляется ошибка. Если выводить теги, то не выводится вообще ничего.
    
    Слава богу, и без вас разобрался. Поменьше бы таких агрессивных «программистов».
Роман

как для такого кода сделать эти буквы на которые начинаются посты?

<?php
$posts_new = get_posts('category=21&numberposts=-1&orderby=name&order=ASC');
foreach ($posts_new as $post_new) :
echo 'ID);
echo ‘»>’;

echo $post_new->post_title;
echo ‘‘;
endforeach;
?>
Роман

тоесть такого

<?php
$posts_new = get_posts('category=21&numberposts=-1&orderby=name&order=ASC&manual="A,B,C"');
foreach ($posts_new as $post_new) :
echo 'ID);
echo ‘»>’;
echo $post_new->post_title;
echo ‘‘;
endforeach;
?>
Роман

вот

[php]
<?php
$posts_new = get_posts(‘category=21&numberposts=-1&orderby=name&order=ASC&manual="A,B,C"’); //*category=21 указываем айди категории, &numberposts=-1 номер поста (-1 это все посты выведутся), &orderby=name&order=ASC сортировка по алфавиту
foreach ($posts_new as $post_new) :
echo ‘<p><a href="’;
echo get_permalink($post_new->ID);
echo ‘">’;

echo $post_new->post_title;
echo ‘</a></p>’;
endforeach;
?>
[/php]
Роман

мда, походу ни у кого нет вариантов
Наталья

Огромная благодарность!! Столько перепробовала плагинов, столько времени времени потратила, хоть я и новичок, а благодаря вашей статье сделала все за 10 минут!
Станислав

А как вывести теги записи в несколько колонок?

Тоесть у записи есть 30 тегов — хочу расположить их под записью
KingStakh

Вещь классная, спасибо автору. Но есть косяк, разделяет теги на одну букву, если тег с заглавной и с прописной, выделяет в отдельные колонки. Как исправить?
- Neolot
  
  Не совсем понял о чем вы. Можете показать?
  - KingStakh
    
    Я все свои теги сделал с заглавной буквы, чтобы этого бага не было видно. Я имел ввиду что, если слово начинается с маленькой кириллической буквы «а», то выводится в колонку отдельно от слов начинающихся с большой буквы «А». Тоесть список получается такого вида: А | Арбуз, Апельсин — А | абрикос, ананас.
    - Neolot
      
      Внес исправление в код, теперь работает корректно.
      Спасибо за багрепорт!
      - KingStakh
        
        Здорово, но пока изменений в коде, опубликованным здесь, не увидел.
      - Neolot
        
        Строка 33
      - Guest
        
        Ваша $firstletter = mb_substr( $tag->name, 0, 1 );
        
        Предыдущая $firstletter = mb_substr( $tag->name, 0, 1 );
      - Neolot
        
        Обновите кеш браузера
      - KingStakh
        
        33 сейчас if ( $firstletter != $capital ) {
        
        33 до if ( $firstletter != $capital ) {
      - fr3aky0ne
        
        Дело было в кодировке, на utf-8 strtoupper вообще не работал.. Решение такое:
        $firstletter = strtoupper($firstletter);
        Заменить на:
        $firstletter = mb_strtoupper($firstletter, ‘UTF-8’);
      - Neolot
        
        Ок, спасибо, внес исправление. Но зачем указывать кодировку, у вас сайт в cp1251?
      - fr3aky0ne
        
        Нет, сайт на utf-8, а указал, чтобы было точное понимание в какой кодировке идёт работа =)
Oleg Tkachev

Спасибо за код. Есть конструктивное предложение. Сейчас метки сортируются по блокам в колонках по вертикали. Соответственно в колонке идут сверху вниз сначала цифры, потом буквы латинского алфавита, потом кириллица. У меня первая колонка началась с цифер, а соседняя колонка с кириллической буквы Б. На мой взгляд не очень понятно и красиво. Если есть возможность, давайте цифры, латиницу и кириллицу сортировать на отдельные блоки, внутри которых все как сейчас идет.
http://prntscr.com/5yplma
- Neolot
  
  У меня описано общее решение, которое подойдет для большинства сайтов. Ваш случай более индивидуальный и вы можете свободно адаптировать мой пример к вашим потребностям.
Сергей

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