Разработка виджетов консоли. Widget API WordPress

- Николаенко Максим · Опубликовано 25 июля, 2013 · Обновлено 27 августа, 2020

Если у вас есть базовые знания о программировании, то вам не составит труда научиться создавать свои виджеты WordPress. Данная статья будет вам полезна если вы готовитесь создавать свои плагины WordPress. Не буду тянуть, просто начнет делать свои виджеты.

Создаем простейший плагин

Для начала создадим простейший плагин, для этого нам необходимо создать в папке плагинов /wp-content/plugins/ файл test-plugin.php. В созданном файле создадим код:

<?php
/**
 * @package Create_widget
 * @version 1.6
 */
/*
Plugin Name: Create widget
Plugin URI: https://wp-admin.com.ua/widget-api-wordpress/
Description: Плагин который добавляет виджет.
Author: Максим
Version: 1.6
Author URI: https://wp-admin.com.ua/
*/

?>

<?php

/**

* @package Create_widget

* @version 1.6

Plugin Name: Create widget

Plugin URI: https://wp-admin.com.ua/widget-api-wordpress/

Description: Плагин который добавляет виджет.

Author: Максим

Version: 1.6

Author URI: https://wp-admin.com.ua/

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

Вот так плагин будет выглядеть в панели администратора WordPress в разделе плагинов.

После активации плагина можем продолжать его дописывать. Основной инструмент для добавления виджета это функция wp_add_dashboard_widget () которая добавляет виджет в консоль WordPress. Рассмотрим входные данные функции:

$widget_id (целое число) — обязательный параметр, идентификатор, будет использоваться в качестве класса CSS и ключа в массиве виджетов Консоли WordPress.
$widget_name (строка) — обязательный параметр, имя виджета, которое будет отображаться в заголовке виджета.
$callback (строка) — обязательный параметр, имя функции, которая будет отображать содержимое виджета Консоли.
$control_callback (строка) — необязательный параметр, обратный вызов, имя функции, которая будет обрабатывать форму нового виджета Консоли. Пока с этой функцией мы работать не будем.

Пример и порядок ввода параметров для функции wp_add_dashboard_widget

<?php wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback ); ?>

1	<?php wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback ); ?>

Код функции добавления виджетов

<?php
// Функция отображения содержимого нового виджета Консоли:
function dashboard_widget_function() {
  echo "Hello World, this id my first Dashboard Widget!";
}
 
// Функция, используемая в действии крючка:
function add_dashboard_widgets() {
  wp_add_dashboard_widget('dashboard_widget', 'Example Dashboard Widget', 'dashboard_widget_function');
}
 
// Регистрация нового виджета Консоли с помощью действия 'wp_dashboard_setup':
add_action('wp_dashboard_setup', 'add_dashboard_widgets' );
?>

<?php

// Функция отображения содержимого нового виджета Консоли:

function dashboard_widget_function() {

echo "Hello World, this id my first Dashboard Widget!";

}

// Функция, используемая в действии крючка:

function add_dashboard_widgets() {

wp_add_dashboard_widget('dashboard_widget', 'Example Dashboard Widget', 'dashboard_widget_function');

}

// Регистрация нового виджета Консоли с помощью действия 'wp_dashboard_setup':

add_action('wp_dashboard_setup', 'add_dashboard_widgets' );

Запуск виджетов в Консоли реализует экшен wp_dashboard_setup которая вызывает функцию add_dashboard_widgets. В нашем примере функция add_dashboard_widgets отвечает за вывод информации в блок виджета.

В результате использования данного кода в нашем плагине, виджет будет показан в консоли CMS.

Пример вывода виджета

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

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

Рассмотрим подробнее методы реализации этого функционала. Во первых для тех кто не знает в WordPress промежуточные опции и параметры сохраняются при помощи специального механизма опций. Потренироваться работать с опциями можно по одной из моих статей под названием «Хранение данных в вордпресс«.

Если механизм опций вам знаком или вы прочитали мои статьи и все поняли, то попробуйте заменить старый код нашего плагина на вот этот:

<?php
/**
 * @package Create_widget
 * @version 1.6
 */
/*
Plugin Name: Create widget
Plugin URI: https://wp-admin.com.ua/widget-api-wordpress/
Description: Плагин который добавляет виджет.
Author: Максим
Version: 1.6
Author URI: https://wp-admin.com.ua/
*/

//Показать widget
function custom_dashboard_widget_coach() {
    //get saved data
    if ( !$widget_options = get_option( 'my_dashboard_widget_options' ) )
        $widget_options = array();
    $saved_team = isset($widget_options['team'])? $widget_options['team'] : '';
        echo "
        <p><strong>Выберите один из вариантов</strong></p>
        <div class='team_class_wrap'>
            <label>Выбран вариант: {$saved_team}</label>
        </div>
        ";
}

//Настройка и обновление widget
function custom_dashboard_widget_coach_handle(){
    // получить сохраненные данные
    if ( !$widget_options = get_option( 'my_dashboard_widget_options' ) )
        $widget_options = array();

    // обновление данных
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] && isset($_POST['my_dashboard_widget_options']) ) {
        
				// базовая валидация
				// Чистим строку, оставляя в ней только указанные HTML теги, их атрибуты и значения атрибутов.
            $widget_options['team'] = wp_kses($_POST['my_dashboard_widget_options']['team'],array() );
        //Сохраняем изменения в опциях
                update_option( 'my_dashboard_widget_options', $widget_options );
        }

    // задаем значение по умолчанию
    if(!isset($widget_options['team']))
        $widget_options['team'] = ''; // тут вы можите задать значение по умолчанию
        echo "
        <p><strong>Выберите один из вариантов</strong></p>
        <div class='team_class_wrap'>
            <label>Выберите параметр:</label>
            <select name='my_dashboard_widget_options[team]' id='team'>
                <option value='1' ".selected( $widget_options['team'], '1', false ).">1</option>
                <option value='2' ".selected( $widget_options['team'], '2', false ).">2</option>
                <option value='3' ".selected( $widget_options['team'], '3', false ).">3</option>
                <option value='4' ".selected( $widget_options['team'], '4', false ).">4</option>
            </select>
        </div>
        ";
}

// регистрация виджета
function add_custom_dashboard_widget_coach() {
        wp_add_dashboard_widget('custom_dashboard_widget_coach', 'Пример виджета с опциями', 'custom_dashboard_widget_coach', 'custom_dashboard_widget_coach_handle');
}
add_action('wp_dashboard_setup', 'add_custom_dashboard_widget_coach');
?>

<?php

/**

* @package Create_widget

* @version 1.6

Plugin Name: Create widget

Plugin URI: https://wp-admin.com.ua/widget-api-wordpress/

Description: Плагин который добавляет виджет.

Author: Максим

Version: 1.6

Author URI: https://wp-admin.com.ua/

//Показать widget

function custom_dashboard_widget_coach() {

//get saved data

if ( !$widget_options = get_option( 'my_dashboard_widget_options' ) )

$widget_options = array();

$saved_team = isset($widget_options['team'])? $widget_options['team'] : '';

echo "

<p><strong>Выберите один из вариантов</strong></p>

<label>Выбран вариант: {$saved_team}</label>

</div>

}

//Настройка и обновление widget

function custom_dashboard_widget_coach_handle(){

// получить сохраненные данные

if ( !$widget_options = get_option( 'my_dashboard_widget_options' ) )

$widget_options = array();

// обновление данных

if ( 'POST' == $_SERVER['REQUEST_METHOD'] && isset($_POST['my_dashboard_widget_options']) ) {

// базовая валидация

// Чистим строку, оставляя в ней только указанные HTML теги, их атрибуты и значения атрибутов.

$widget_options['team'] = wp_kses($_POST['my_dashboard_widget_options']['team'],array() );

//Сохраняем изменения в опциях

update_option( 'my_dashboard_widget_options', $widget_options );

}

// задаем значение по умолчанию

if(!isset($widget_options['team']))

$widget_options['team'] = ''; // тут вы можите задать значение по умолчанию

echo "

<p><strong>Выберите один из вариантов</strong></p>

<label>Выберите параметр:</label>

</select>

</div>

}

// регистрация виджета

function add_custom_dashboard_widget_coach() {

wp_add_dashboard_widget('custom_dashboard_widget_coach', 'Пример виджета с опциями', 'custom_dashboard_widget_coach', 'custom_dashboard_widget_coach_handle');

}

add_action('wp_dashboard_setup', 'add_custom_dashboard_widget_coach');

Приведенный пример кода я прокомментировал, чтобы было понятнее что в коде происходит. Думаю, если материал изложенный выше вы просмотрели внимательно, то вопросов по этому коду быть не должно. Если вопросы все таки есть, то задавать вопросы можно в комментариях в конце статьи.

Удаление лишних виджетов с консоли

Есть два подхода. Первый подход чистить глобальный массив в котором находится список виджетов вот так:

function remove_dashboard_widgets() {
global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );

function remove_dashboard_widgets() {

global $wp_meta_boxes;

unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);

}

add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );

Этот пример убирает виджет Быстрой публикации.

Другие виджеты при необходимости можно удалять, немного изменив последний по вложенности ключ в массиве:

Удаляет виджет «Плагины»

$wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_plugins’]

Удаляет «Свежие черновики»

$wp_meta_boxes[‘dashboard’][‘side’][‘core’][‘dashboard_recent_drafts’]

Удаляет «Свежие комментарии»

$wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_recent_comments’]

Удаляет виджет «Входящие ссылки»

$wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_incoming_links’]

Удаляет виджет «Прямо сейчас»

$wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_right_now’]

Для удаления всех блоков стандартных виджетов из Консоли WordPress используем следующий код:

function remove_dashboard_widgets() {
global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['side']['core']['recent_drafts']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );

function remove_dashboard_widgets() {

global $wp_meta_boxes;

unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);

unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);

unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);

unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);

unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);

unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);

unset($wp_meta_boxes['dashboard']['side']['core']['recent_drafts']);

unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);

}

add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );

Также второй подход к удалению, это использование специальных функций ядра CMS. Вот какой пример нам предлагает кодекс WordPress.

// Создаем функцию для использования в специальном экшене
function example_remove_dashboard_widgets() {
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
} 

// Экшен для запуска функции 'wp_dashboard_setup' 
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

// Создаем функцию для использования в специальном экшене

function example_remove_dashboard_widgets() {

remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );

remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );

}

// Экшен для запуска функции 'wp_dashboard_setup'

add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

Если вам не нужно удалять блоки виджетов, но ваш виджет после установки плагина попал в конец, его можно по умолчанию положить в начало при помощи перестановки глобального массива со всеми виджетами (global $wp_meta_boxes;). О сортировке массива и перестановке тут не пишу, это уже вопросы по php.

Для более продвинутой работы с виджетами вы всегда можите посмотреть как они программировались в самом ядре WordPress, в файле:

/wp-admin/includes/dashboard.php

Дополнительные материалы по API Widget

Код для вывода всех опций стандартных виджетов.

function get_dashboard_widget_options( $widget_id='' )
{
    //Берем все опции виджетов из базы данных
    $opts = get_option( 'dashboard_widget_options' );

    //Если не указан идентификатор виджета, то берем все опции
    if ( empty( $widget_id ) )
        return $opts;

    //Если указан идентификатор виджета, то возвращаем только опции этого виджета, если таковые есть
    if ( isset( $opts[$widget_id] ) )
        return $opts[$widget_id];

    //если ни одно условие не подошло возвращаем false...
    return false;
}

function get_dashboard_widget_options( $widget_id='' )

{

//Берем все опции виджетов из базы данных

$opts = get_option( 'dashboard_widget_options' );

//Если не указан идентификатор виджета, то берем все опции

if ( empty( $widget_id ) )

return $opts;

//Если указан идентификатор виджета, то возвращаем только опции этого виджета, если таковые есть

if ( isset( $opts[$widget_id] ) )

return $opts[$widget_id];

//если ни одно условие не подошло возвращаем false...

return false;

}

Для вывода одной опции виджета можно использовать функцию:

public static function get_dashboard_widget_option( $widget_id, $option, $default=NULL ) {

    $opts = get_dashboard_widget_options($widget_id);

    //если опции не найдены false
    if ( ! $opts )
        return false;

    //В противном случаи, если есть опция и она не пустая, выводим содержимое опции
    if ( isset( $opts[$option] ) && ! empty($opts[$option]) )
        return $opts[$option];
    else
        return ( isset($default) ) ? $default : false;
}

public static function get_dashboard_widget_option( $widget_id, $option, $default=NULL ) {

$opts = get_dashboard_widget_options($widget_id);

//если опции не найдены false

if ( ! $opts )

return false;

//В противном случаи, если есть опция и она не пустая, выводим содержимое опции

if ( isset( $opts[$option] ) && ! empty($opts[$option]) )

return $opts[$option];

else

return ( isset($default) ) ? $default : false;

}

Для обновления опций виджета кодекс WordPress предлагает следующую функцию:

public static function update_dashboard_widget_options( $widget_id , $args=array(), $add_only=false )
{
    //достаем все опции виджета из базы данных...
    $opts = get_option( 'dashboard_widget_options' );

    //берем опции только нашего виджета или объявляем пустой массив
    $w_opts = ( isset( $opts[$widget_id] ) ) ? $opts[$widget_id] : array();

    if ( $add_only ) {
        //Flesh out any missing options (existing ones overwrite new ones)
        $opts[$widget_id] = array_merge($args,$w_opts);
    }
    else {
        // Добавляем к существующим опциям новые
        $opts[$widget_id] = array_merge($w_opts,$args);
    }

    //Сохраняем весь массив опций виджета обратно в базу данных
    return update_option('dashboard_widget_options', $opts);
}

public static function update_dashboard_widget_options( $widget_id , $args=array(), $add_only=false )

{

//достаем все опции виджета из базы данных...

$opts = get_option( 'dashboard_widget_options' );

//берем опции только нашего виджета или объявляем пустой массив

$w_opts = ( isset( $opts[$widget_id] ) ) ? $opts[$widget_id] : array();

if ( $add_only ) {

//Flesh out any missing options (existing ones overwrite new ones)

$opts[$widget_id] = array_merge($args,$w_opts);

}

else {

// Добавляем к существующим опциям новые

$opts[$widget_id] = array_merge($w_opts,$args);

}

//Сохраняем весь массив опций виджета обратно в базу данных

return update_option('dashboard_widget_options', $opts);

}

Для более полного изучения материала вам могут понадобиться статьи:

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

Услуги репетитора онлайн. Список курсов которые я веду

Базовый курс по веб-дизайну;
Верстка сайтов;
Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
Разработка сайтов на PHP.

Подробнее читайте на странице репетитор по WordPress

Розробка віджетів консолі. Widget API WordPress

- Николаенко Максим · Опубликовано 25 июля, 2013 · Обновлено 5 июня, 2022

Якщо у вас є базові знання про програмування, то вам не важко навчитися створювати свої віджети WordPress. Ця стаття буде вам корисна, якщо ви готуєтеся створювати свої плагіни WordPress. Не тягтиму, просто почне робити свої віджети.
(далее…)

Метки: widget для консоли wordpress wordpress dashboard widgets wp_add_dashboard_widget wp_dashboard_setup