Чи була у вас думка, що консоль WordPress не дуже ефективна? Сьогодні ми спробуємо змінити це. Природно, існують різні плагіни, які додають свої модулі до консолі, але при цьому залишаються різні метрики і ярлики, які ви можете додати самостійно. У цій статті я покажу вам, як можна додати свої власні - повністю налаштовані - віджети консолі.
Базовий віджет консолі
Анатомія віджети консолі дуже проста. Спочатку вам потрібно використовувати функцію wp_add_dashboard_widget () для реєстрації віджета в WordPress. Потім ви створюєте функцію, яка обробляє висновок контенту. Ось код шаблону, який ви можете використовувати для швидкого створення віджета:
Зверніть увагу, що цей код повинен бути поміщений в плагін. Якщо ви хочете швидко його протестувати, ви можете також додати код в файл functions.php вашої теми.
Перший крок - це подцепленний функції до wp_dashboard_setup. Контент цієї функції - простий виклик wp_add_dashboard_widget () з трьома параметрами:
- складаючи віджета
- Тема віджета
- функція виведення
Другий крок - створення функції виведення my_dashboard_widget_display () і заповнення її контентом.
Висновок віджетів в верхню частину консолі
У деяких ситуаціях вам може знадобитися вивести важливу інформацію або функціональність в самому верху консолі. WordPress не має хорошого API для обробки цієї дії, проте, доклавши певних зусиль, це можна реалізувати. Нам потрібно додати додатковий код до нашої функції реєстрації. Ось весь код нашого тестового віджета:
Сім додаткових рядків для простої реконструкції консолі - надзвичайно багато, проте інших методів немає. На першому кроці нам потрібно зробити глобальної змінну $ wp_meta_boxes, яка містить в собі інформацію щодо всіх зареєстрованих віджетів. Щоб спростити розуміння коду, я додав віджети, які виводяться в консолі, в змінну $ dashboard.
На наступному кроці ми отримуємо наш зареєстрований віджет з масиву віджетів. Він зберігається в змінній $ my_widget, оскільки нам потрібно буде прибрати його з масиву, після чого зібрати масив заново.
На наступному кроці ми об'єднуємо контент $ my_widget і $ dashboard. Функція array_merge () додає другий масив до першого, таким чином, наш віджет тепер є першим в новому масиві $ sorted_dashboard. На останньому кроці ми міняємо оригінальний масив консолі на новий відсортований масив.
Додавання функціональності
HTML структура
Ми створили приклад вище за допомогою одного лише CSS, без JS. Для цього ми використовували наступну HTML структуру:
Стилізований віджет буде за допомогою CSS-файлу, а також деяких вбудованих стилів, які подбають про висоті і ширині.
стилізація стовпців
Висота всього контейнера (.comment-stat-bars) є фіксованою - 120 пікселів. Стовпці у висоту також складають 120 пікселів. Різна висота стовпців досягається шляхом додавання рамок (border) з різною висотою. Таким чином, ми зможемо гарантувати те, що стовпчики будуть починатися з самого низу, і за допомогою overflow: hidden для контейнера ми зможемо приховати все зайве.
Стильова таблиця додається в звичайній манері, за допомогою почергового підключення:
Зверніть увагу, що ми перевіряємо значення змінної $ hook, щоб переконатися в тому, що стилі використовуються тільки на сторінці консолі, адже вони більше ніде не потрібні. Якщо ви додасте код до файлу functions.php теми, вам потрібно буде використовувати get_template_directory_uri () замість plugins_uri ().
Контент стильової таблиці призведе нижче. Інші стилі будуть вбудовані:
обчислення висоти
У стильовій таблиці ми додали поле (margin) в 1% з кожного боку стовпчика. Це означає, що для кожного стовпця, який у нас є, у нас на 2% менше простору, доступного для розподілу між стовпцями. Таким чином, якщо ми використовуємо 100% як загальну ширину, ми можемо налаштувати процентну ширину кожного стовпця:
Тепер переходимо до висоти. Стовпець з найбільшим значенням висоти буде завжди заповнювати всю висоту контейнера. У нашому прикладі, третій стовпець (зі значенням 40) є найбільшим за значенням, таким чином, він буде мати максимальну висоту в 120 пікселів. До кожного наступного колонки, який буде менше за значенням, ми будемо додавати верхній край (top margin).
Яким саме буде верхній край, залежить від відносини між розміром шпальти і найбільшим стовпцем в наборі. У нашому прикладі перший стовпець - це рівно половина розміру третього стовпчика. Тому нам потрібно буде додати поле зверху в 60 пікселів, рівно половину від 120 пікселів. Ось як буде виглядати код:
Відображення статичного графіка
Якщо ми об'єднаємо весь код разом, то ми отримаємо зручну Столбикова діаграм, незважаючи на те, що числа в ній жорстко прописані. Давайте подивимося:
висновок
Віджети консолі дозволяють нам спрощувати життя собі і штатним фахівцям сайту. Крім статичного контенту, ми можемо «приправляти» речі за допомогою CSS і додавати додаткову функціональність за допомогою JS.
Поряд з отриманням даних з WordPress ви можемо також розглянути сторонні API для даних. Ви можете отримувати статистику з Mailchimp, Google Analytics, Twitter і т.д.