Розробка віджетів консолі. API віджетів WordPress
Якщо у вас є базові знання про програмування, то вам не важко навчитися створювати свої віджети WordPress. Ця стаття буде вам корисна, якщо ви готуєтеся створювати свої плагіни WordPress. Не тягтиму, просто почне робити свої віджети.
Створюємо найпростіший плагін
Для початку створимо найпростіший плагін, для цього нам необхідно створити в папці плагінів /wp-content/plugins/ файл test-plugin.php. У створеному файлі створимо код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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.
- $ім'я_віджета (рядок) – обов'язковий параметр, ім'я віджета, яке буде відображатися в заголовку віджету.
- $callback (рядок) – обов'язковий параметр, ім'я функції, яка відображатиме вміст віджету Консолі.
- $control_callback (рядок) – необов'язковий параметр, зворотний виклик, ім'я функції, яка оброблятиме форму нового віджету Консолі. Поки що з цією функцією ми працювати не будемо.
Приклад та порядок введення параметрів для функції wp_add_dashboard_widget
1 |
<?php wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback ); ?> |
Код функції додавання віджетів
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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 проміжні опції та параметри зберігаються за допомогою спеціального механізму опцій. Потренуватись працювати з опціями можна за однією з моїх статей під назвою “Зберігання даних у вордпрес“.
Якщо механізм опцій вам знайомий або ви прочитали мої статті і всі зрозуміли, то спробуйте замінити старий код нашого плагіна на цей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?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'); ?> |
Видалення зайвих віджетів з консолі
Є два підходи. Перший підхід чистити глобальний масив, в якому знаходиться список віджетів ось так:
1 2 3 4 5 |
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_plugins']
Видаляє “Свіжі чернетки”
$wp_meta_boxes['панель приладів'][«сторона»][«ядро»]['dashboard_recent_drafts']
Видаляє “Нові коментарі”
$wp_meta_boxes['панель приладів'][«нормальний»][«ядро»][‘dashboard_recent_comments’]
Видаляє віджет “Вхідні посилання”
$wp_meta_boxes['панель приладів'][«нормальний»][«ядро»][‘dashboard_incoming_links’]
Видаляє віджет “Прямо зараз”
$wp_meta_boxes['панель приладів'][«нормальний»][«ядро»][‘dashboard_right_now’]
Для видалення всіх блоків стандартних віджетів з Консолі WordPress використовуємо наступний код:
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
1 2 3 4 5 6 7 8 |
// Создаем функцию для использования в специальном экшене 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' ); |
Якщо вам не потрібно видаляти блоки віджетів, але ваш віджет після встановлення плагіна потрапив у кінець, його можна за умовчанням започаткувати за допомогою перестановки глобального масиву з усіма віджетами (глобальні $wp_meta_boxes;). Про сортування масиву та перестановку тут не пишу, це вже питання щодо php.
Для більш просунутої роботи з віджетами ви завжди можете подивитися, як вони програмувалися в самому ядрі WordPress, у файлі:
/wp-admin/includes/dashboard.php
Додаткові матеріали щодо API Widget
Код для виведення всіх опцій стандартних віджетів.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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; } |
Для виведення однієї опції віджета можна використовувати функцію:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 пропонує наступну функцію:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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.