Доброго времени суток. Вы часто, наверное, видели сайты на WordPress, где вебмастера рядом с категориями выводили количество записей в них. Обычно это делается при помощи виджетов, так как там имеется подобный пункт. Эта функция очень полезна на крупных порталах, так как пользователь визуально может оценить количество материалов в той или иной рубрике.

Более продвинутые пользователи курсе, что получить список категорий своего сайта можно при помощи функций get_categories() или же wp_list_categories(), который позволяют вывести массив объектов, которые содержат информацию о категориях. Но многие пользователи хотят, чтобы данная информация была визуализирована, то есть, количество материалов в каждой рубрике выводилось в виде диаграммы и в процентном соотношении.

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

Что касается самой графической информации, то есть диаграммы, то ее можно реализовать при помощи Google Charts, который позволяет строить диаграммы любых размеров и форм, достаточно подключить нужный код и передать туда данные для построения диаграммы.

Ниже показан код, при помощи которого мы получаем список категорий и количество материалов в них, а затем выстраиваем диаграмму при помощи API Google.

Исходный код

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Рубрика', 'Количество'],
<?php //получаем список рубрик и количество материалов в них
$args=array(
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($args);
foreach($categories as $category) {
echo '[\''.$category->name.'\', '. $category->count . '], '; }
?>
]);
var options = {
title: 'Визуализация материалов на сайте' <!--название диаграммы-->
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 600px; height: 400px;"></div> <!--выводим диаграмму, указав ширину и высоту ее окна -->

А ниже показан сам пример визуализации (можете подводить курсором мыши к диаграмме и посмотреть эффект).

Если захотите какой-то другой вид диаграммы, то Вам следует почитать на странице Google Charts реализацию нужного из них, так что удачи дорогие пользователи, делайте свой сайт ярче и красивее.