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

by Николаенко Максим · Published 25 Липня, 2013 · Updated 5 Червня, 2022

Якщо у вас є базові знання про програмування, то вам не важко навчитися створювати свої віджети 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

Уроки WordPress

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

Створюємо найпростіший плагін

Код функції додавання віджетів

Приклад виведення віджету

Видалення зайвих віджетів із консолі

Додаткові матеріали щодо API Widget

You may also like...

Залишити відповідь Скасувати відповідь

WordPress

Программирование

Responsive

Бесплатные видеоуроки

Найкращий фріланс України

Послуги: WordPress

Послуги: SEO

Учням та Клієнтам

Розробка сайтів від нашої дизайн студії

Найстабільніший і зручний хостинг для США та Європи

Где бы заработать

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

Створюємо найпростіший плагін

Код функції додавання віджетів

Приклад виведення віджету

Видалення зайвих віджетів із консолі

Додаткові матеріали щодо API Widget

You may also like...

Theme Customizer – налаштування у WordPress

Створюємо нову колонку для записів із коротким посиланням wp_get_shortlink

Випадаючий список усіх шорткодів

Залишити відповідь Скасувати відповідь

WordPress

Программирование

Responsive

Бесплатные видеоуроки

Найкращий фріланс України

Послуги: WordPress

Послуги: SEO

Учням та Клієнтам

Розробка сайтів від нашої дизайн студії

Найстабільніший і зручний хостинг для США та Європи

Где бы заработать