Як створити плагін WordPress для веб-програми

Сьогодні ми побачимо, як створити дуже простий плагін WordPress для будь-якої веб-програми, яка повинна вставити фрагмент коду на свій сайт.

Щоб дотримуватися цього підручника, вам потрібні деякі знання цих основ:

  • PHP та OOP
  • JavaScript (ми будемо використовувати jQuery та Ajax)
  • Розробка WordPress (оскільки більшість функцій походить від ядра WordPress).

Ви можете знайти робочий результат цього підручника у цьому сховищі Github.

Ці веб-програми можуть бути будь-якими, такими як CrazyEgg, Freshbook, Google Analytics, Facebook Pixel або Feedier. Чому? Їм усім потрібно вводити на ваш сайт якийсь код HTML / JavaScript для різних цілей.

Цей "код" завжди параметризується змінними, і це, як правило, біль для власника сайту. Це тому, що вам потрібно редагувати шаблони теми. Отже, як би ми створили плагін, який зробить це для нас? Гаразд, давайте це зробимо!

Крок 1: Знайдіть свій веб-додаток

Метою цього підручника є створення плагіна WordPress, який додає сторінку адміністратора WordPress. Крім того, ми також додамо деякі налаштування для налаштування віджету програми на сайті та автоматичного введення коду HTML / JS на нашу веб-сторінку. Нічого вигадливого, просто щось, що чудово працює.

Зверніть увагу: нам потрібна веб-програма для цього підручника. Для цього прикладу ми використаємо Feedier. Однак, якщо у вас є інша веб-програма, яку ви хотіли б використовувати у цьому посібнику, будь ласка, зробіть це. Просто перейменуйте будь-що з назвою "feedier" на ім'я вашого додатка та адаптуйте налаштування до того, що потрібно цій програмі. Більшість із них дадуть вам фрагмент, який потрібно додати на свій сайт, щоб він працював.

Ось короткий інструктаж Feedier, якщо ви ніколи про нього не чули:

  • Це інструмент збору відгуків, який використовує опитування, щоб зрозуміти своїх користувачів
  • Це дуже гнучко
  • Це безкоштовно!
  • Має хороший API (тут дуже важливо)
  • Має віджет на сайті (тут дуже важливо)
  • Дозволяє винагороджувати своїх клієнтів
  • Дозволяє створювати умовні запитання
  • Має повну інформаційну панель аналітичного звіту
  • Дозволяє керувати відгуками індивідуально

Ось віджет, який ми хочемо додати автоматично:

Якщо ви зареєструвались у Feedier, ви можете просто знайти код на вкладці "Поділитися" свого опитування:

Крок 2: Налаштуйте наш плагін та його архітектуру

Плагін WordPress за задумом дуже простий. Нашому плагіну знадобляться лише два файли.

  • feedier.php : PHP-файл основного плагіна.
  • assets / js / admin.js : сценарій JavaScript для збереження параметрів за допомогою Ajax.

Ви можете створити новий каталог “feedier” (або назву веб-програми) у своїй папці wp-content / plugins / .

Найважливішим файлом буде клас feedier.php плагіна . Ось його структура:

Ми робимо тут кілька речей:

  • Оголошення нашого плагіна за допомогою заголовків коментарів
  • Визначимо кілька зручних констант, щоб можна було легко знайти URL-адресу та PATH плагіна
  • Оголошення нашого класу плагінів, який міститиме все необхідне для цього плагіна. Наразі нам просто потрібен метод конструктора.

Ви вже повинні бачити плагін на своїй сторінці Плагіни, хоча він ще нічого не робить:

Крок 3: Створіть нашу сторінку адміністратора

З цієї частини ми додамо нову сторінку адміністратора Feedier на наш сайт WordPress і динамічно отримуємо наші опитування з API Feedier.

У конструкторі нашого класу зареєструємо три нові дії, необхідні для додавання сторінки адміністратора на WordPress:

  • addAdminMenu додасть нову сторінку в лівому меню WordPress. Також буде здійснено зворотний виклик до іншого методу, що містить вміст сторінки.
  • storeAdminData буде викликано кожного разу, коли користувач натискає кнопку «Зберегти налаштування».
  • addAdminScripts зареєструє новий файл JavaScript нашому адміністратору WordPress для збереження даних форми. Але він також обмінюється деякими змінними між стороною PHP та стороною JavaScript.

Перший крок дуже простий. Ми просто реєструємо сторінку так:

Як бачите, ми використовуємо функції локалізації WordPress для всіх рядків. Зверніть увагу, що

array($this, ‘adminLayout’)

саме там ми називаємо інший метод, що містить вміст сторінки. Форму потрібно адаптувати до вашого веб-додатку.

Тут спочатку нам потрібно отримати загальнодоступні та приватні ключі API Feedier. Після збереження ми збираємось використовувати приватний ключ для динамічного отримання наших опитувань. Щоразу, коли ми отримуємо опитування, а не помилку API, ми відображаємо кілька нових параметрів для налаштування віджета.

На початку цього методу ви бачите, що спочатку ми отримуємо збережені дані за допомогою:

$data = $this->getData();

І отримання опитувань від Feedier API:

$surveys = $this->getSurveys($data[‘private_key’]);

Тож давайте оголосимо перший:

Ця функція просто читає опцію нашого плагіна і повертає нам масив назад, щоб ми могли зберегти кілька значень в одному параметрі.

Щоб другий метод запрацював, нам потрібен приватний ключ Feedier. Це залежить від того, хто перший отримає доступ до цього ключа, збереженого в опції:

API Feedier тут задокументований, тож ви можете побачити, що отримаєте у відповіді.

На даний момент у нас є повністю нова сторінка адміністратора. Але нічого не відбувається, коли ми натискаємо на кнопку збереження, оскільки механізму збереження поки що немає .

Досить добре, збережемо наші дані!

Як вже згадувалося раніше, ми збережемо наші дані за допомогою AJAX. Тому нам потрібно зареєструвати новий файл JavaScript і обмінятися даними за допомогою функції wp_localize_script ():

Нам також потрібно додати новий файл /assets/js/admin.js . Це просто зробить виклик Ajax, і WordPress автоматично направить запит правильно до правильного методу (це вже зроблено в конструкторі). Детальніше про те, як WordPress розумно обробляє запити AJAX, ви можете прочитати тут.

У цей самий момент ми можемо натиснути кнопку збереження, і вищезазначений сценарій зробить запит HTTP POST до WordPress. Ми також додаємо параметр дії, що містить: store_admin_data (який ми оголосили на початку в цій частині конструктора):

add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );

Метод storeAdminData отримає запит POST і збереже потрібні нам значення в нашій опції WordPress.

Кілька приміток щодо вищезазначеного методу:

  • Ми використовуємо “WordPress nonce” для управління безпекою та переконуємось, що це надходить із веб-сайту, а не хакер, який підробляє запит.
  • Ми визначаємо поля, які нам потрібно зберегти, за допомогою префіксу “feedier_”. Отримавши, ми переглядаємо всі дані $ _POST і зберігаємо лише ці поля. Ми також видаляємо префікс перед збереженням кожного поля.

Це все для процесу збереження. Коли ми натискаємо зберегти, ми бачимо запит POST і наші дані зберігаються в базі даних у таблиці wp_options .

Чудово, ми закінчили роботу з адміністраторською сторінкою.

Крок 4: Вставте динамічний код автоматично на наші сторінки

Тепер, коли ми зберегли наші опції, ми можемо створити динамічний віджет, який буде залежати від параметрів, встановлених користувачем на нашій сторінці адміністратора. Ми вже знаємо, чого очікує від нас веб-програма.

Щось на зразок:

Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. So, using the architecture we already set up in the last part:

Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:

That’s it!

Any questions, feedback, or ideas? Let me know in the comments!

You can find a working version of this tutorial on this Github repository.

2Fwebd/feedier-wordpress-plugin

Contribute to feedier-wordpress-plugin development by creating an account on GitHub.pxlme.me

Note that this is first version of the plugin, and many things can be improved. I’m open to suggestions and improvements. ?

We are building Feedier. It becomes a no-brainer to collect feedback and build relationships with your customers!

Feedier - Next generation feedback

Meet Feedier, the next generation customer feedback software that lets you collect valuable feedback. Reward, engage…feedier.com

Convinced? Sign up for free at feedier.com ?

Original text


Don’t forget to clap our article and subscribe to get more amazing articles if you liked it?. You can also find us on Twitter.

This article was initially published on our blog here.