Статьи

Создание плагина предстоящих событий в WordPress: Введение

Март 19, 2019

WordPress больше не просто платформа для ведения блогов, а может использоваться для разработки сложных веб-приложений для многих целей. WordPress предоставляет множество API, что позволяет нам развиваться дальше на его основе.

Мы можем расширить WordPress для удовлетворения наших потребностей с помощью API плагинов. С помощью этого мощного API мы можем разрабатывать решения, отвечающие нашим потребностям для практически бесконечных сценариев; поэтому, чтобы стать мастером WordPress, нужно освоить его API.

В этой серии мы рассмотрим API плагинов WordPress, а также API Widget и то, как мы можем использовать их для разработки решений, отвечающих нашим потребностям.

Что мы делаем

В ходе этой серии из трех частей мы создадим плагин для WordPress с нуля. Этот плагин будет отображать список предстоящих событий в интерфейсе, чтобы пользователи знали, что будет дальше. Администратор сможет публиковать информацию о новых событиях, а также сможет редактировать или удалять их.

Есть поговорка:

Отказ от планирования означает провал.

Мы планируем каждую деталь и аспект нашего плагина, прежде чем мы начнем писать код. Таким образом, мы собираемся уточнить, что мы собираемся делать и как мы собираемся это сделать. Мы также позаботимся о том, чтобы у нас были все необходимые ресурсы, которые мы будем использовать позже, прежде чем мы начнем писать наш код.

Мы начнем с регистрации пользовательского типа записи для наших событий. Это облегчит нам эффективное управление. Этот пользовательский тип записи будет включать:

  • поле заголовка
  • поле описания
  • поле для избранного изображения

В дополнение к этим стандартным полям мы также включим три пользовательских метаполя для:

  • дата начала мероприятия
  • дата окончания события
  • место проведения мероприятия

Для даты начала и окончания события мы добавим в нашу панель сообщений пост выбора даты в jQuery UI.

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

Когда речь идет о пользовательских типах записей, WordPress показывает только столбцы для заголовка, автора и даты публикации сообщения на экране редактирования, но мы не ограничены этим. Мы добавим пользовательские столбцы для даты начала, даты окончания и места проведения мероприятия для лучшей доступности для пользователя.

Наконец, что касается внешнего интерфейса, целесообразно создать виджет, который отображает список всех событий, запланированных на ближайшее время. С помощью мощного Widget API мы закодируем наш пользовательский виджет, который сможем добавить в нашу боковую панель или область нижнего колонтитула.

Укладка фундамента

Давайте начнем с создания базовой структуры каталогов / файлов. Перейдите к каталог wp-content/plugins и создайте новый каталог с именем upcoming-events . Внутри этого создайте больше каталогов для:

  • css
  • js
  • img

Также создайте следующие файлы PHP:

  • index.php
  • upcoming-events.php

Как вы, возможно, заметили, мы создали дополнительный файл upcoming-events.php помимо стандартного файла index.php . Мы напишем весь наш код в файле upcoming-events.php . Хорошей практикой является добавление файла index.php в ваши каталоги ресурсов, так как он блокирует любого, кто пытается выяснить содержимое каталога в браузере.

Мы создадим style.css и script.js папках css и js соответственно.

Внутри файла index.php добавьте следующий код:

1
<?php // Silence is gold

Здесь мы просто размещаем текст-заполнитель внутри index.php .

Внутри файла upcoming-events.php добавьте следующее объявление плагина:

01
02
03
04
05
06
07
08
09
10
<?php
/**
 * Plugin Name: Upcoming Events
 * Plugin URI: http://imbilal.com
 * Description: A plugin to show a list of upcoming events on the front-end.
 * Version: 1.0
 * Author: Bilal Shahid
 * Author URI: http://imbilal.com
 * License: GPL2
 */

Закончив с базовой файловой структурой, мы перейдем к сбору необходимых ресурсов, которые нам нужны в нашем плагине. Одним из таких ресурсов является таблица стилей для средства выбора даты jQuery UI. По умолчанию WordPress использует ядро ​​jQuery и jQuery UI на всех своих страницах панели инструментов. Нам нужно только включить стили для его виджета DatePicker.

Для этого перейдите в браузер по адресу http://jqueryui.com и:

  1. Нажмите на кнопку Custom Download справа
  2. На следующей странице снимите флажок « Переключить все» под заголовком « Компоненты» . Это снимет все флажки
  3. Прокрутите вниз до раздела Виджеты и установите флажок Datepicker
  4. Внизу страницы выберите цветовую тему на ваш выбор в разделе « Темы ». Мы будем использовать стандартную тему Lightness UI для нашего урока
  5. Нажмите кнопку загрузки, чтобы загрузить пользовательский пакет

Распакуйте загруженный пакет и скопируйте содержимое css/ui-lightness в каталог upcoming-events/css .

Что дальше?

Это все о планировании. В следующей части серии мы начнем писать наш код.

Мы будем:

  • зарегистрировать пользовательский тип сообщения для события
  • добавить мета-блоки на экран редактирования событий
  • добавьте необходимые стили и скрипты нашему администратору
  • включить JQuery UI выбора даты для ввода даты события
  • добавить пользовательские столбцы администратора на экран «Все события»

Оставайтесь с нами для следующей статьи в серии.

35
Share: