wp_tag_cloud() │ WP 2.3.0

Виведемо хмару міток із заголовком “Популярні мітки”:

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

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 елементи)">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 елементи)">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 елементи)">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'); ?>

Запишемо список у параметр $tag, щоб потім використовувати його у php для своїх цілей:

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

print_r ($ tag);

Виведемо хмару категорій замість хмари міток. Для цього змінимо назву таксономії:

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