Как создать простой плагин для WordPress

Статья написана:
  • WordPress
  • Обновлено: февраль 09, 2017

Мы видели раньше много советы и инструменты для ведения блога, Что ж, сегодня мы узнаем, как создать хороший инструмент для вашего блога - плагин страницы FAQ. Но самое главное, это не только сам плагин, но и то, что вы можете сделать с этим принципом. Вы узнаете, как хранить данные любого типа на своем WP-сайте и как интегрировать их с внешними библиотеками (например, jQuery UI), создавая пользовательские компоненты для вашего сайта. Давайте начнем!

Идея, демо и скачать

демонстрация

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

Но кроме этого нашим главным достижением будет понимание WordPress пользовательские типы сообщений, короткие коды, взаимодействия с внешним JS / jQuery-плагином. С этой идеей вы могли бы создать множество вещей, основанных на других сумасшедших плагинах, которые вы можете обнаружить там, это только отправная точка для вас, дорогой Падаван.

So здесь вы можете найти jQuery API demo для компонента, который мы будем использовать - но действительно классным является код, используемый для генерации этого компонента (PHP).

О, и, конечно, вы можете найти файлы плагина для скачивания здесь так что вы можете просто установить его на свой сайт WP.

Разогрев - файл плагина и пользовательский тип сообщения

Прежде всего нам нужно создать собственный тип сообщений для хранения наших данных.

Настраиваемые типы записей являются большой частью волшебства WP, они позволяют вам создавать новый тип данных (вроде сообщений, страниц, вложений и т. Д.), Чтобы его можно было вызывать и манипулировать с помощью функций WP. Это может показаться простым для новичков, но только давние программисты PHP (это все еще вещь?) Знают, как трудно было просто соединять и хранить данные в вашей БД. Не говоря уже о динамическом создании новых типов данных, это тонко, но обеспечивает большую гибкость в нашем коде.

Для этого нам нужен плагин, но, вероятно, вы уже знакомы с этой концепцией. Плагины похожи на блоки Lego для WordPress, они добавляют или преобразуют текущую функциональность с помощью кода, который можно легко подключить (duh!) Или также отключить, если вы хотите.

Чтобы создать плагин таким образом, что WP распознает его, вам нужны вещи 2:

  1. Создайте файл внутри вашего wp-контента / плагинов /
  2. Добавьте метаданные в начале этого файла, чтобы WP мог понять, что это значит

Имейте в виду, что имя файла должно быть уникальным, поэтому, когда кто-то устанавливает ваш плагин (даже вы сами), конфликтов с текущими плагинами не будет. В нашем случае для лучшей организации мы добавим новую папку с именем faq-whsr, а внутри - файл faq-whsr.php.

Теперь для метады просто добавьте что-то вроде этого в начало вашего файла плагинов (сразу после <? Php):

meta_01

Что значит:

  • Имя плагина: приятное имя, которое будет отображаться в вашем интерфейсе wp-admin> plugins
  • URI плагина: если вы хотите добавить ссылку на страницу вашего плагина (документы, примеры, страница продаж)
  • Описание: Это малый абзац, показанный в вашем интерфейсе wp-admin> plugins. Держите его простым, чтобы пользователи помнили, что это за
  • Автор / автор URI: человек / компания, создавшая плагин и ссылку для кредитов
  • Лицензия: чтобы пользователи знали, что они могут / не могут делать с вашим плагином

01-плагин созданный

Хорошо, теперь мы создали наш плагин, добавили несколько соответствующих метаданных. Как только вы сохраните файл плагина, вы сможете увидеть его в интерфейсе wp-admin.

Давайте активируем это и посмотрим, что произойдет.

Подождите, ничего? Хорошо, это хорошо, если что-то не так, вы увидите ошибку. Теперь перейдем к созданию пользовательского типа сообщений.

В нашем случае CPT - это пункт часто задаваемых вопросов, но вы можете создавать книги, видеоролики, отзывы и т. Д. Важно помнить, что имена функций должны быть уникальными. Повторите со мной сейчас: имена функций должны быть уникальными, имена функций должны быть уникальными. Понял? Хорошо, это сэкономит вам массу неприятностей, пока мы не сможем использовать ООП (возможно, в следующем учебнике).

Мастерство выполняется с помощью этого кода:

CPT

И это то, что означают соответствующие части:

  • $ labels - это массив с метками и текстом для разных разделов области wp-admin. Таким образом, WP будет знать правильный способ вызова наших товаров
  • Поддерживает - этот рассказывает, что вы можете увидеть в wp-admin> FAQ> новый экран. В нашем случае у нас будет заголовок, редактор (основной блок контента), автор, ревизии и настраиваемые поля (если вы захотите их).
  • таксономии - здесь вы указываете WP, какие таксономии разрешены (категории, теги или пользовательские таксономии)
  • register_post_type ('faq_whsr', $ args) - это говорит WP «Эй, создайте новый настраиваемый тип сообщения с идентификатором faq_whsr, используя аргументы из $ args".

админ-чаво

Сохраните его и задержите дыхание. Теперь вы должны увидеть новый раздел в главном меню wp-admin

Подождите, все? Да уж. Этот фрагмент создает всю функциональность CPT. Если вы не найдете это здорово, подождите, пока он станет более прохладным в следующем разделе.

Прежде чем покинуть wp-admin, добавьте некоторые фиктивные данные (несколько вопросов с по меньшей мере категориями 2).

Front-End - взаимодействие WP x jQuery

Теперь настало время увидеть какое-то действие, и мы будем использовать jQuery UI Аккордеонный элемент для этого.

Пользовательский интерфейс jQuery имеет почти такие же преимущества, как и сам jQuery:

  • Многие разработчики, работающие над этим
  • Кросс-браузер и готовый к использованию код
  • Хорошо документированы
  • Играет хорошо с WP (сам WP использует их)

Теперь вопрос: как мы это называем?

Для этого существуют подходы 2:

  1. Плохие чистые теги <script> / <style> в вашем wp_head
  2. Хороший wp_enqueue

Мы не будем терять слишком много времени с неправильным подходом сегодня, но хороший в основном говорит WP «Эй, приятель, нам нужно jQuery UI в какой-то момент в нашем коде, пожалуйста, включите его в страницу«, Таким образом, WP может проверить, добавил ли кто-нибудь еще его или включил в него другую версию, и избежать много проблем с дублированными библиотеками. Хорошо, как перевести этот приятный чат в код?

Использование функции enqueue:

enqueue_02

Шорткод

И теперь мы вернемся к wp-admin. У нас есть пункты часто задаваемых вопросов, и у нас есть библиотека, чтобы стилизовать элементы, как мы хотим, что еще не хватает? Ну, нам нужно вызвать предметы!

У нас есть много вариантов для этого, но самым простым для этого случая является создание короткого кода. Shortcode - это то, что вы добавляете в свое поле содержимого (для страниц, сообщений, CPT ...), и WP фактически будет искать функцию для запуска на нем. Существуют коды коротких кодов типа 2:

  1. [self-enclosing] - Как теги <hr /> или <br /> этот вид короткого кода просто вызывает функцию в какой-то момент - это наш парень
  2. [wrapped] Содержимое [/ wrapped] - Это похоже на теги <p> </ p> или <div> </ div> и фактически может преобразовать его содержимое или использовать контент в качестве аргументов.

Посмотрим, как это работает. Создайте новую страницу в своем wp-admin и добавьте сюда этот код:

[FAQ-whsr]

Сохраните эту страницу и посмотрите, что произойдет ...

Просто шучу, ничего не будет делать правильно? Ну, это потому, что мы еще не создали для него функции.

Добавьте это в свой файл плагина:

shortcode_02

Теперь обновите свою страницу, и я обещаю, что что-то действительно круто произойдет.

Круто, да? Теперь вы можете видеть, что он работает, и небо - это предел для вас сейчас. Что делает этот код, просто скажите WP, что есть короткий код, который называется [faq-whsr], и если WP находит его, WP должен запустить функцию в этой точке страницы.

В нашем случае нам нужно будет создать эту структуру для создания панели пользовательского интерфейса jQuery:

api_02

И для этого мы создадим Запрос WP, загрузите наши часто задаваемые вопросы и их содержимое. Замените функцию короткого кода следующим образом:

шорткод-basic_02

Хорошо, теперь ваши вопросы и ответы будут называться. Что мы сделали, так это вызвали wp_query для вызова нашего пользовательского типа записи, а затем передали его возвращаемому шорткоду, чтобы WP отобразил их все в соответствии с желаемой структурой.

Это хорошо, но чего-то не хватает, верно? Как насчет некоторых вариантов там? Что ж, мы можем добавить параметры для шорткода, давайте посмотрим, как создать несколько аргументов WP_Query в нашем шорткоде:

шорткод-final_02

Таким образом вы можете вызывать элементы, используя следующие аргументы (вы можете объединить столько, сколько хотите):

  • cat - category ID (несколько добавленных в виде массива) [faq-whsr cat = 1]
  • category_name - название категории [faq-whsr category_name = "food"]
  • порядок - ASC или DESC (DESC по умолчанию) [faq-whsr order = "ASC"]
  • orderby - изменить критерии для заказа элементов [faq-whsr orderby = "title"]
  • posts_per_page - изменить количество загруженных элементов [faq-whsr posts_per_page = 5]

Но, как я уже сказал, небо - это предел для вас, мой друг. Вот несколько вариантов WP_Query, которые вы можете реализовать и использовать:

  • Автор
  • Категория (добавление исключаемых опций с not_in)
  • Поиск (круто, если вы хотите дать пользователям возможность их просматривать)
  • Пользовательское поле (поскольку элементы часто задаваемых вопросов имеют их, вы можете использовать их для загрузки элементов с определенными настраиваемыми полями и значениями)

Теперь твоя очередь

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

  • Адаптивного дизайна
  • Создание виджета
  • Плагин активирует / деактивирует крючки
  • Интернационализация
  • ООП
  • Заполнение только при необходимости (для определенных страниц)

Не забудьте оставить свои мысли в комментариях! И вот наша задача для вас: можно ли применить опцию «элемент по умолчанию» для шорткода (чтобы при загрузке страницы был открыт другой элемент, а не первый)? Как бы вы это сделали?

О Рочестер Оливейра

Я веб-дизайнер и предприниматель из Итажуба (МГ), Бразилия. Я люблю писать на непонятные темы и делать интересные вещи.

Подключение: