Вывод тегов 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;}

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

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