Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Добавлено в закладки: 2

Содержание:

  1. Введение
  2. Минимальная структура файлов для дополнения
  3. Другие файлы для дополнений
  4. Наша структура файлов
  5. Подключаем .js .css правильно. Поддержка минимизации WP-Recall
  6. Ajax в WP-Recall
  7. Подчищаем за собой – файл: delete.php

 


Введение:

Прежде чем приступить к дальнейшему чтению - вам потребуется знать и уметь:

1. "Создаем свое дополнение для Wp-Recall, выводим свою вкладку в личном кабинете"
2. "Ajax в WordPress"

+ начальные знания по js/php (знание синтаксиса). Если эти знания у вас отсутствуют - не отнимайте в комментариях время, задавая элементарные вопросы - обратитесь к гуглу. Цель данного руководства помочь новичкам разобраться с разработкой под плагин WP-Recall и упростить некоторые задачи.

Что будет делать наше дополнение:  Слева, по клику на кнопке передадим данные на сервер, увеличим на 1, запишем в БД, и вернем итоговый результат.

Исходники этого урока вы можете посмотреть скачав дополнение "Give a Smile" - именно его в этом уроке мы и будем создавать.
Оно же, по MIT лицензии, доступно в моём git-репозитории

 


Минимальная структура файлов для дополнения:

Чтобы плагин WP-Recall увидел наше дополнение на странице дополнений плагина в админке, и при включении дополнения мы получили его работу, необходимо следующее:

1. Без пробелов создать папку give-a-smile по следующему пути:
ваш-сайт/wp-content/wp-recall/add-on/

Получится так:
ваш-сайт/wp-content/wp-recall/add-on/give-a-smile/

В дальнейшем, папка give-a-smile – будет являться идентификатором (ID) дополнения.
Например id применяются для такой проверки

2. В корне создать 2 файла в кодировке UTF-8 (без BOM) - info.txt и index.php

info.txt – файл с информацией о дополнении. Информация оттуда используется в админке: на странице "Дополнения", "Репозиторий", при проверке обновлений, на сайте CodeSeller.ru, и по работе с его API (например я это API использовал в дополнении Seller on Codeseller). Как мы видим это очень важный файл.

Его содержимое:

- здесь все просто:

Name – Имя дополнения.
Version - текущая версия, необходимо чтобы пользователи узнавали о обновлениях.
Support Core – с какой версией WP-Recall точно работает. Не младше.
Description – Описание дополнения
Author – Автор дополнения
Author URI – сайт автора
Add-on URI – адрес дополнения

 

И файл:

index.php – исполняемый php файл.

Это были два обязательных файла.

 


Другие файлы для дополнений:

Кроме них, иногда полезны следующие файлы, которые может использовать плагин WP-Recall:

activate.php - срабатывает единожды, в момент активации дополнения. Например предустановка начальных настроек, создание таблиц в БД
deactivate.php - срабатывает единожды, в момент деактивации дополнения.
delete.php - срабатывает единожды, в момент удаления дополнения. Подчищаем за собой (правило хорошего тона в программировании)
readme.txt - Разметка readme-файла для товара - при публикации товара на сайте CodeSeller.ru

 


Структура файлов нашего дополнения:

Для работы нашего дополнения я создал такую структуру файлов:

scripts.js в папке inc – там будет работать наш ajax.

В корне дополнения у меня находится readme.md - файл для гитхаба (его я описывать не буду), и стилевой style.css файл. Остальные файлы описаны выше.

Как заполнить info.txt - я указал выше.


Подключаем .js .css правильно. Поддержка минимизации WP-Recall:

Плагин WP-Recall использует собственную систему регистрации и объединения файлов с 15-й версии (это улучшенная реализация функций регистрации стилей и скриптов из ядра вордпресс). Это значит что js и css файлы объединяются в один (если в основных, расширенных, настройках  WP-Recall включена эта опция), переносы строк и пробелы там убираются – небольшую минимизацию он проводит. Это удобней чем использовать стандартные вордпресс функции регистрации стилей и скриптов.

Итак функции:

rcl_enqueue_style - подключает css файл

rcl_enqueue_script - подключает js файл

и их вешаем на хук rcl_enqueue_scripts

Подключаем:

- в момент срабатывания хука rcl_enqueue_scripts мы подключаем наши стили и файл скриптов, проверяя выше что мы не в админке.


Ajax в WP-Recall

Чтобы понять разницу между работой в вордпресс и wp-recall с ajax, вам нужно знать (и уметь) как вордпресс работает с ajax и как правильно работать в фронтенде с ним. Вначале я уже давал ссылку на подробные доки

Вкратце, как это делается в вордпресс:

1. Нам нужен путь до обработчика AJAX запросов wordpress
2. Нам нужно создать ключ безопасности nonce
3. Сам ajax запрос
4. и его php обработчик, в котором проверяем ключ nonce и функция висит на нужном хуке (залогиненный пользователь или гость)

Плагин WP-Recall позволяет избавиться от первых 2х пунктов. Прочь рутину!

Он уже определяет путь в объекте Rcl - Rcl.ajaxurl и содержит проверочный nonce в Rcl.nonce

Помимо этого в объекте Rcl есть:

Rcl.wpurl - главная страница вашего сайта
Rcl.rcl_url – путь до плагина wp-recall
Rcl.user_ID – текущий юзер – его id (если гость то 0)

И другое - подробней смотрите распечатав console.log(Rcl);

Выведем кнопку, по клику на которой сработает ajax.

В файле index.php:

- простейшая функция, висит на хуке wp_footer - выведет кнопку в подвале. А потом мы css стилями ее, с фиксированной позицией, прижмем к левому верхнему краю. В стилях также укажем небольшую анимацию для плавного поведения.
В переменной $title у нас небольшой отрывок стихотворения, который появится при наведении на кнопку.

В блоке с id gas_smile - у нас на событие onclick - идет вызов js-функции gasPush - по клику запускаем ее.

Магия style.css:

Кнопка создана. Стили для нее есть, теперь займемся ajax.

 

Файл scripts.js - в нем я подробно прокомментировал каждую строчку:

- тут одна функция, по клику она проверяет на 2 строке - что запущена один раз. На 4-й появляется recall loader - rcl_preloader_show - в нем указываем объект где выводить спиннер и размер.

В переменной gasData мы указываем уникальный экшен и nonce ключ безопасности (9 строка. Его формирует плагин WP-Recall)
Далее мы запускаем ajax-post запрос: 14 строка - указываем путь до вордпресс ajax обработчика. Этот путь плагин WP-Recall уже задает в объекте Rcl в Rcl.ajaxurl, тип данный и массив наших данных.
При получении успешного ответа от php функции - проверяем ключ data.gas_ok (18 строка) и если он пришел, то скрываем лоадер и выводим информацию со счетчиком.
По завершению ajax запроса мы на 8 секунд показываем блок и скрываем его. До следующей загрузки страницы.

Теперь рассмотрим php обработчик:

- функция срабатывает на динамических ВП хуках wp_ajax_nopriv_gas_callback и wp_ajax_gas_callback (в scripts.js мы action : "gas_callback" задавали) - два хука нужны чтобы кнопка отрабатывала для гостей и залогиненных пользователей.

3 строка - функция rcl_verify_ajax_nonce - проверяем nonce ключ безопасности и ниже обычная php логика и wordpress api.
Пишем в таблицу wp_options в метаполе give_a_smile (7 строка).
Обратите внимание на 10-ю строчку: gas_ok - в js функции мы проверяем этот ключ ответа.
Закодировали в json на 13-й строке и отправили результат в скрипт. Скрипт вывел результат.

На этом ajax запрос завершен.


Подчищаем за собой – файл: delete.php:

Так как мы в базу данных - в таблицу wp_options, в метаполе give_a_smile пишем значения, то при удалении нашего дополнения нужно подчистить за собой. Это правило хорошего тона у разработчиков. Пользователю больше не нужно наше дополнение, а значит и данные от него хранить не нужно.

Плагин WP-Recall на странице "Дополнения" выводит ссылку "удалить" дополнение. При удалении через эту кнопку он ищет в корне дополнения файл delete.php и подключает его.

В нашем случае в этом файле разместим это:

- wordpress функция для удаления ключа из таблицы wp_options


Наше дополнение готово. По FTP копируем папку give-a-smile на свой компьютер, архивируем в zip и теперь, поделившись им с другими людьми, они этот архив могут загружать через менеджер дополнений, в админке своего сайта, со страницы "Дополнения"

2

Автор публикации

не в сети 5 часов

Otshelnik-Fm

427

Вся лента по разработке здесь: http://across-ocean.otshelnik-fm.ru/?note-link=2406

http://across-ocean.otshelnik-fm.ru/ - список моих работ к плагину WP-Recall

Комментарии: 1086Публикации: 123Регистрация: 27-01-2013Продаж/Покупок: 5859/123