wp_tag_cloud() │ WP 2.3.0

Выведем облако меток с заголовком "Популярные метки":

if ( function_exists('wp_tag_cloud') ){
	echo '<h2>Популярные метки</h2>';
	wp_tag_cloud('smallest=8&largest=22');
}

Запишем список в параметр $tag, чтобы потом использовать его в php для своих целей:

$tag = wp_tag_cloud( 'format=array' );

print_r( $tag );

wp_tag_cloud( 'smallest=8&largest=22' );

Выведет на экран:

<a href="https://example.com/tag/ajax"
   class="tag-cloud-link tag-link-134 tag-link-position-1"
   style="font-size: 13.283018867925pt;" aria-label="AJAX (4 elements)">AJAX</a>

<a href="https://example.com/tag/chrome"
   class="tag-cloud-link tag-link-1603 tag-link-position-2"
   style="font-size: 8pt;" aria-label="Chrome (1 element)">Chrome</a>

<a href="https://example.com/tag/css" class="tag-cloud-link tag-link-531 tag-link-position-3"
   style="font-size: 13.283018867925pt;" aria-label="CSS (4 elements)">CSS</a>
	...

Список:

wp_tag_cloud( [
	'format' => 'list',
] );

Выведет:

<ul class='wp-tag-cloud' role='list'>
	<li><a href="https://site.com/met/ajax" class="tag-cloud-link tag-link-134 tag-link-position-1" style="font-size: 13.283018867925pt;" aria-label="AJAX (4 elements)">AJAX</a></li>
	<li><a href="https://site.com/met/chrome" class="tag-cloud-link tag-link-1603 tag-link-position-2" style="font-size: 8pt;" aria-label="Chrome (1 elements)">Chrome</a></li>
	...
</ul>

Изменим размеры меток (smallest=15&largest=40), ограничим количество выводимых меток (number=50) и отсортируем их по количеству записей, а не по имени (orderby=count):

<?php wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count'); ?>

Выведем облако категорий, вместо облака меток. Для этого изменим название таксономии:

<?php wp_tag_cloud( array( 'taxonomy' => 'category' ) ); ?>

Можно слепить категории и метки в одно облако:

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

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

<?php
wp_tag_cloud( array( 'topic_count_text_callback' => 'my_tag_text_callback' ) );

function my_tag_text_callback( $count ) {
	return sprintf( _n('%s картинка', '%s картинок', $count), number_format_i18n( $count ) );
}
?>

Как один из вариантов использования меток, предлагаю создать архивные страницы меток. При клике на определенную метку, мы попадаем на страницу с постами связанными с этой меткой. Как выглядет такая страница, определяется файлом шаблона tag.php, если такого файла нет (обычно его ент), то формирование вывода отдается файлу archives.php.

Давайте сделаем страницу метки, на которой в самом начале будет показано облако меток, а после него записи относящиеся к выбранной метке. Для этого создадим (если нет) или изменим (если существует) файл tag.php. Создавать файл нужно в каталоге темы.

Содержимое файла tags.php:

<?php
/*
Template Name: Tag Archive
*/
?>

<?php get_header(); ?>

<div>

	<h2>Tag Archive</h2>

	<?php wp_tag_cloud( '' ); ?>
	<div class="navigation">
		<div class="alignleft"><?php next_posts_link( '« Older Entries' ) ?></div>
		<div class="alignright"><?php previous_posts_link( 'Newer Entries »' ) ?></div>
	</div>
	<?php
	if( have_posts() ) {
		while( have_posts() ) {
			the_post();
			?>
			<h2>
				<a href="<?php the_permalink() ?>" rel="bookmark"
				   title="Permanent Link to <?php esc_attr( get_the_title() ) ?>"><?php the_title() ?></a>
			</h2>
			<div class="entry">
				<?php the_content( 'Read the rest of this entry »' ); ?>
			</div>
			<?php
		}
	}
	?>
</div>

<?php get_footer(); ?>

В данном примере не учитываются CSS стили, поэтому возможна несовместимость с шаблоном.

Допустим, нам нужно уменьшить максимальный размер шрифта для виджета с облаком меток. Нужно поставить значение 16, а не 22 для параметра 'largest'. Для этого используем хук widget_tag_cloud_args

add_filter( 'widget_tag_cloud_args', function( $args ){
	$args['largest'] = 16;

	return $args;
} );

На этот пример меня подтолкнул этот комменатрий

Нужно чтобы, используя аргумент 'format', ссылки выводились не в UL, а OL списке. И также нужно добавить CSS класс к LI элементам.

$cloud = wp_tag_cloud( [
	'format' => 'list',
	'echo' => false,
] );

$cloud = str_replace( [ '<ul ','</ul>' ], [ '<ol ','</ol>' ], $cloud );

$cloud = str_replace( '<li>', '<li class="cloud-li-class">', $cloud );

echo $cloud;

Результат:

<ol class='wp-tag-cloud' role='list'>
	<li class="cloud-li-class"><a href="/met/ajax" class="tag-cloud-link tag-link-134 tag-link-position-1" style="font-size: 13.283018867925pt;" aria-label="AJAX (4 элемента)">AJAX</a></li>
	<li class="cloud-li-class"><a href="/met/chrome" class="tag-cloud-link tag-link-1603 tag-link-position-2" style="font-size: 8pt;" aria-label="Chrome (1 элемент)">Chrome</a></li>
	...
</ol>