Как добавить свои собственные виджеты к странице консоли WordPress
Была ли у вас мысль, что консоль WordPress не слишком эффективна? Сегодня мы попробуем изменить это. Естественно, существуют разные плагины, которые добавляют свои модули к консоли, но при этом остаются разные метрики и ярлыки, которые вы можете добавить самостоятельно. В этой статье я покажу вам, как можно добавить свои собственные – полностью настроенные – виджеты консоли.
Базовый виджет консоли
Анатомия виджеты консоли очень проста. Сначала вам нужно использовать функцию wp_add_dashboard_widget() для регистрации виджета в WordPress. Затем вы создаете функцию, которая обрабатывает вывод контента. Вот код шаблона, который вы можете использовать для быстрого создания виджета:
add_action( 'wp_dashboard_setup', 'register_my_dashboard_widget' );
function register_my_dashboard_widget() {
wp_add_dashboard_widget(
'my_dashboard_widget',
'My Dashboard Widget',
'my_dashboard_widget_display'
);
}
function my_dashboard_widget_display() {
echo 'Hello, I am Mr. Widget';
}
Обратите внимание, что этот код должен быть помещен в плагин. Если вы хотите быстро его протестировать, вы можете также добавить код в файл functions.php вашей темы.
Первый шаг – это подцепление функции к wp_dashboard_setup. Контент этой функции – простой вызов wp_add_dashboard_widget() с тремя параметрами:
- Слаг виджета
- Заголовок виджета
- Функция вывода
Второй шаг – создание функции вывода my_dashboard_widget_display() и заполнение ее контентом.
Вывод виджетов в верхнюю часть консоли
В некоторых ситуациях вам может понадобиться вывести важную информацию или функциональность в самом верху консоли. WordPress не имеет хорошего API для обработки этого действия, однако, приложив определенные усилия, это можно реализовать. Нам нужно добавить дополнительный код к нашей функции регистрации. Вот весь код нашего тестового виджета:
function register_my_dashboard_widget() {
global $wp_meta_boxes;
wp_add_dashboard_widget(
'my_dashboard_widget',
'Publication Schedule',
'my_dashboard_widget_display'
);
$dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
$my_widget = array( 'my_dashboard_widget' => $dashboard['my_dashboard_widget'] );
unset( $dashboard['my_dashboard_widget'] );
$sorted_dashboard = array_merge( $my_widget, $dashboard );
$wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
}
add_action( 'wp_dashboard_setup', 'register_my_dashboard_widget' );
function my_dashboard_widget_display() {
?>
<p>
Don't forget that there are three slots for publication each day. <strong>8am, 1pm and 6pm</strong> EDT. Posts must be finalized 12 hours before their publication time. This includes final checks and proofreading.
</p>
<p>
For particularly time-sensitive posts please contact the editor in chief to make sure the required time does not conflict with any ongoing projects.
</p>
<?php
}
Семь дополнительных строк для простой реконструкции консоли – чрезвычайно много, однако других методов нет. На первом шаге нам нужно сделать глобальной переменную $wp_meta_boxes, которая содержит в себе информацию относительно всех зарегистрированных виджетов. Чтобы упростить понимание кода, я добавил виджеты, которые выводятся в консоли, в переменную $dashboard.
На следующем шаге мы получаем наш зарегистрированный виджет из массива виджетов. Он хранится в переменной $my_widget, поскольку нам нужно будет убрать его из массива, после чего собрать массив заново.
На следующем шаге мы объединяем контент $my_widget и $dashboard. Функция array_merge() добавляет второй массив к первому, таким образом, наш виджет теперь является первым в новом массиве $sorted_dashboard. На последнем шаге мы меняем оригинальный массив консоли на новый отсортированный массив.
Добавление функциональности
Основной способ улучшения виджетов консоли состоит в создании нескольких приятных стилей или применении некоторой JS-функциональности. Давайте создадим виджет, который будет показывать число комментариев на нашем сайте, полученных за каждую неделю в течение последних пяти недель. Это будет упрощенный пример, proof of concept, так сказать.
HTML структура
Мы создали пример выше с помощью одного лишь CSS, без JS. Для этого мы использовали следующую HTML структуру:
<div class="comment-stat-bars">
<div class="comment-stat-bar"></div>
<div class="comment-stat-bar"></div>
<!-- etc... -->
</div>
<div class="comment-stat-labels">
<div class="comment-stat-label">comment count here</div>
</div>
<div class='comment-stat-caption'>Comments in the past 5 weeks</div>
Стилизован виджет будет с помощью CSS-файла, а также некоторых встроенных стилей, которые позаботятся о высоте и ширине.
Стилизация столбцов
Высота всего контейнера (.comment-stat-bars) является фиксированной – 120 пикселей. Столбцы в высоту также составляют 120 пикселей. Разная высота столбцов достигается путем добавления рамок (border) с разной высотой. Таким образом, мы сможет гарантировать то, что столбцы будут начинаться с самого низа, и при помощи overflow:hidden для контейнера мы сможем скрыть все лишнее.
Стилевая таблица добавляется в обычной манере, при помощи поочередного подключения:
add_action( 'admin_enqueue_scripts', 'dashboard_widget_display_enqueues' );
function dashboard_widget_display_enqueues( $hook ) {
if( 'index.php' != $hook ) {
return;
}
wp_enqueue_style( 'dashboard-widget-styles', plugins_url( '', __FILE__ ) . '/widgets.css' );
}
Обратите внимание, что мы проверяем значение переменной $hook, чтобы убедиться в том, что стили используются только на странице консоли, ведь они больше нигде не требуются. Если вы добавите код к файлу functions.php темы, вам нужно будет использовать get_template_directory_uri() вместо plugins_uri().
Контент стилевой таблицы приведет ниже. Остальные стили будут встроены:
.comment-stat-bars {
overflow:hidden
}
.comment-stat-bar {
margin:0 1%;
background-color: #2ea2cc;
border-top-color: #fff;
border-top-style: solid;
float:left;
}
.comment-stat-labels {
overflow:hidden;
}
.comment-stat-label {
float:left;
margin:0 1%;
padding:5px 0;
text-align:center;
}
.comment-stat-caption {
text-align:center;
margin:11px 0;
font-style:italic
}
Вычисление высоты
Вместо получения количества комментариев мы поработаем с числовым массивом:
$comment_counts = array( 20, 29, 40, 33, 17 );
Этот массив отражает число комментариев, которые мы получали каждую неделю в течение пяти последних недель. На основании этих чисел мы определим высоту размеры столбцов. Давайте начнем с ширины, она вычисляется проще.
В стилевой таблицы мы добавили поле (margin) в 1% с каждой стороны столбца. Это означает, что для каждого столбца, который у нас имеется, у нас на 2% меньше пространства, доступного для распределения между столбцами. Таким образом, если мы используем 100% как общую ширину, мы можем настроить процентную ширину каждого столбца:
// ( 100 / number of bars ) - 2 $data_points = count( $comment_counts ); $bar_width = 100 / $data_points - 2
Теперь переходим к высоте. Столбец с самым большим значением высоты будет всегда заполнять всю высоту контейнера. В нашем примере, третий столбец (со значением 40) является самым большим по значению, таким образом, он будет иметь максимальную высоту в 120 пикселей. К каждому следующему столбцу, который будет меньше по значению, мы будем добавлять верхний край (top margin).
Каким именно будет верхний край, зависит от отношения между размером столбца и самым большим столбцом в наборе. В нашем примере первый столбец – это ровно половина размера третьего столбца. Поэтому нам нужно будет добавить поле сверху в 60 пикселей, ровно половину от 120 пикселей. Вот как будет выглядеть код:
$highest_value = max( $comment_counts ); foreach( $comment_counts as $count ) : $count_percentage = $count/$highest_value; $bar_height = $total_height * $count_percentage; $border_width = $total_height - $bar_height; }
Отображение статичного графика
Если мы объединим весь код вместе, то мы получим удобную столбиковую диаграмму, несмотря на то, что числа в ней жестко прописаны. Давайте посмотрим:
function dashboard_widget_display_enqueues( $hook ) {
if( 'index.php' != $hook ) {
return;
}
wp_enqueue_style( 'dashboard-widget-styles', plugins_url( '', __FILE__ ) . '/widgets.css' );
}
add_action( 'admin_enqueue_scripts', 'dashboard_widget_display_enqueues' );
function register_comment_stats_dashboard_widget() {
wp_add_dashboard_widget(
'comment_stats_widget',
'Comment Stats',
'comment_stats_dashboard_widget_display'
);
}
add_action( 'wp_dashboard_setup', 'register_comment_stats_dashboard_widget' );
function comment_stats_dashboard_widget_display() {
$comment_counts = array( 20, 29, 39, 33, 17 );
$highest_value = max( $comment_counts );
$data_points = count( $comment_counts );
$bar_width = 100 / $data_points - 2;
$total_height = 120;
?>;
<div class="comment-stat-bars" style="height:<?php echo $total_height ?>px;">
<?php
foreach( $comment_counts as $count ) :
$count_percentage = $count/$highest_value;
$bar_height = $total_height * $count_percentage;
$border_width = $total_height - $bar_height;
?>
<div class="comment-stat-bar" style="height:<?php echo $total_height ?>px; border-top-width:<?php echo $border_width ?>px; width: <?php echo $bar_width ?>%;"></div>
<?php endforeach ?>
</div>
<div class='comment-stat-labels'>
<?php foreach( $comment_counts as $count ) : ?>
<div class='comment-stat-label' style='width: <?php echo $bar_width ?>%;'><?php echo $count ?></div>
<?php endforeach ?>
</div>
<div class='comment-stat-caption'>Comments in the past 5 weeks</div>
<?php
}
Получение числа комментариев
Последний шаг – это динамическое получение числа комментариев. К сожалению, WordPress не имеет функции для этого, поэтому нам нужно будет написать наш собственный небольшой запрос. Версия, представленная ниже, достаточно грязная, но она работает. Просто замените ваш массив на следующее:
global $wpdb;
for( $i=1; $i <= 5; $i++ ) {
$this_week = 7 * $i;
$last_week = 7 * ( $i - 1);
$comment_counts[] =
$wpdb->get_var( "SELECT COUNT(comment_ID) FROM $wpdb->comments WHERE comment_date > '" . date('Y-m-d H:i:s', strtotime('-' . $this_week . ' days')) . "' AND comment_date < '" . date('Y-m-d H:i:s', strtotime('-' . $last_week . ' days')) . "'" ) ;
Здесь мы получаем число комментариев из базы данных 5 раз. В каждой итерации цикла возвращается одна неделя. В первой итерации мы получаем все комментарии, которые были оставлены в промежутке, начиная с сегодняшнего дня и заканчивая семью днями назад. Во второй итерации – все комментарии между 7 и 14 днями назад, и так далее.
Заключение
Виджеты консоли позволяют нам упрощать жизнь себе и штатным специалистам сайта. Помимо статичного контента, мы можем «приправлять» вещи с помощью CSS и добавлять дополнительную функциональность с помощью JS.
Наряду с получением данных из WordPress вы можем также рассмотреть сторонние API для данных. Вы можете получать статистику из Mailchimp, Google Analytics, Twitter и т.д.
Источник: wpmu.org
