Визуализируем количество записей в рубриках на сайте WordPress

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

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

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

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

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

<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> <!--выводим диаграмму, указав ширину и высоту ее окна -->

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


Не забываем, для того, чтобы код подключить в записи или на странице (или в виджетах) WordPress, вы должны реализовать возможность исполнения в них php кода - это можно сделать, например с помощью плагина PHP Code for posts. Ну а если нужно использовать другую форму диаграммы, то примеры реализации можно взять на страницах документации Google Charts.

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 голоса, рейтинг: 4,00 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *