Настраиваем облако тегов в WordPress с помощью wp_tag_cloud()

Все мы знаем, что теги — важная часть таксономий WordPress, и они служат инструментом для их организации. Теги создаются «на лету» в процессе создания записи и помогают нам находить похожие записи, связанные определенными тегами. Обычно в блоге на WordPress различные теги сгруппированы внутри облака тегов, и размер каждого тега определяется частотой его использования в записях. В этой статье мы расскажем вам о том, как правильно использовать функцию wp_tag_cloud(), которая ответственна за все эти облака тегов.

Вступление

Это основная встроенная в ядро функция для вывода тегов, назначенных вашим записям, которая отображает облако тегов.

<?php
$args = array(
    'smallest'                  => 8,
    'largest'                   => 22,
    'unit'                      => 'pt',
    'number'                    => 45,
    'format'                    => 'flat',
    'separator'                 => "n",
    'orderby'                   => 'name',
    'order'                     => 'ASC',
    'exclude'                   => null,
    'include'                   => null,
    'topic_count_text_callback' => default_topic_count_text,
    'link'                      => 'view',
    'taxonomy'                  => 'post_tag',
    'echo'                      => true
);
?>

В WordPress Codex страница wp_tag_cloud() отчетливо поясняет все эти параметры функции, но всё же давайте быстро посмотрим на самые основные из них.

‘smallest’ – Этот параметр определяет минимальный размер текста в облаке тегов.
‘largest’ – Этот параметр определяет максимальный размер текста в облаке тегов.
‘number’ – Этот параметр определяет общее количество тегов, отображаемых в облаке тегов. Вы можете указать ‘0’, если хотите, чтобы вводились все
‘format’ – Этот параметр определяет формат отображения облака. Он может принимать значения ‘flat‘, ‘list‘, или ‘array‘
‘separator’ – Этот параметр определяет разделитель тегов в облаке
‘topic_count_text_callback’ – Этот параметр отображает количество записей, назначенных каждому тегу в виде всплывающей подсказки
‘taxonomy’ – Этот параметр определяет тип таксономии WordPress, которая может быть использована в облаке тегов. Значение по-умолчанию — это ‘post_tags‘, но вы можете использовать и произвольные таксономии

Эти параметры играют ключевую роль в кастомизации облака тегов.

Использование

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

Параметры разделяются с помощью ‘&’ в одной простой строке.

<?php
wp_tag_cloud('smallest=10&largest=50&unit=px&number=45&separator=:: &orderby=count&order=RAND');
?>

Указание параметров в формате массива.

<?php
wp_tag_cloud( array( 'smallest' => '10' ,'largest' => '50', 'unit' => 'px', 'number' => '45', 'separator' => ':: ', 'orderby' => 'count', 'order' => 'RAND') );
?>

Указываем только выбранные параметры, остальные — оставляем как есть по-умолчанию.

<?php
wp_tag_cloud('smallest=12&largest=30');
?>

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

<?php
$tag = wp_tag_cloud('format=array' );
?>

Практические примеры

Пример 1: Выводим облако тегов в сайдбаре или футере вашей темы

Создайте функцию в вашем файле functions.php и верните функцию wp_tag_cloud(). После того, как она будет определена, вы можете вызывать эту функцию в любом месте блога.

function my_cloud($echo = false) {
    if (function_exists('wp_tag_cloud'))
        return wp_tag_cloud();
}

Теперь давайте откроем ваш файл sidebar.php и вызовем функцию для вывода облака тегов.

<div class="mycloud">
<?php
echo  '<h3>Популярные теги</h3>';
my_cloud();
?>

2[1]

Давайте добавим немного стилей CSS в наш файл style.css для того, чтобы облако тегов выглядело приличнее.

.mycloud a {
    background: #FFC414;
    color: #0000FF;
    display: inline-block;
    margin: 0 4px 8px 0;
    padding: 2px 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 10px;
}

.mycloud h3 {
    font-style: italic;
    font-weight: bold;
    font-size: 30px;
    color: #FF00FF;
    font-family: Comic Sans;
}

Вот как оно выглядит теперь:

3[1]

Также поступаем и в footer.php вашей темы.

4[1]

Вы можете сделать его еще красивее, если добавите и своих стилей CSS.

Путем добавления различных параметров в функцию wp_tag_cloud() в файл functions.php мы можем настраивать наше облако тегов. Например, если вы хотите включить и теги и рубрики в облако тегов, или же облако таксономий, тогда функцию стоит написать следующим образом:

wp_tag_cloud(array('taxonomy' => array('post_tag','category')));

Пример 2: Создаем страницу облака тегов для вашего блога

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

Для начала создадим собственный шаблон страницы в папке вашей темы с функцией wp_tag_cloud(). Назовем мы этот файл tagcloud.php.

<?php
/*
Template Name: Tag Cloud
*/
?>
<?php get_header(); ?>

    <div id="content" class="narrowcolumn">

        <div class="mycloud">
            <?php wp_tag_cloud( ); ?>




<?php get_sidebar(); ?>

<?php get_footer(); ?>

Теперь нужно зайти в админку WordPress и перейти в Страницы -> Добавить новую. Задайте нужный заголовок странице, а затем в разделе Атрибуты страницы выберите шаблон для нее — Tag Cloud, после чего нажмите Обновить. Вот и все. Ваша страница с облаком тегов готова. Можно «раскрасить» ее с помощью CSS.

5[1]

Пример 3: Создаем прокручиваемый блок облака тегов для сайдбара

Можно предложить пользователям выбирать теги в сайдбаре из прокручиваемого блока. Для этого нужно создать функцию в файле functions.php.

function cloudbox () {
    if (function_exists('wp_tag_cloud')) {
        $tags = wp_tag_cloud( array('smallest'=>10, 'largest'=>10, 'orderby'=>'name', 'order'=>'ASC', 'format' => 'array') );
        foreach($tags as $tag) {
            echo $tag.'<br>';
        }
    }
}

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

Теперь открываем свой sidebar.php и вызываем эту функцию.

<h3 id='text'>Пожалуйста, выберите тег</h3>

<div id="cloud">
    <?php cloudbox(); ?>

Давайте оформим его с помощью CSS.

#cloud {
    background: #FFFFCC;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    overflow: scroll;
    border: 4px solid #000000;
    padding: 2px;
    text-align: justify;
}

#cloud a {
    background: #400000;
    color: #FFFF00;
    display: inline-block;
    margin: 0 4px 8px 0;
    padding: 2px 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 15px;
}

#text {
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    color: #FF9900;
    font-family: Comic Sans;
}

В итоге блок будет выглядеть следующим образом:

6[1]