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

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


Идея, Демо & Скачать

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

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

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

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

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

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

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

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

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

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

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

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

meta_01

Что значит:

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

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

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

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

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

Волшебство сделано с этим кодом:

CPT

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

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

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

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

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

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

Теперь, наконец, пришло время увидеть некоторые действия, и для этого мы будем использовать элемент Accordion пользовательского интерфейса jQuery..

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

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

Вопрос сейчас в следующем: как мы это называем?

Есть 2 подхода к этому:

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

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

Используя функцию enqueue:

enqueue_02

Шорткод

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

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

  1. [самозакрывающийся] – как теги или
    этот вид короткого кода просто вызывает функцию в какой-то момент – это наш парень
  2. [wrapped] Содержимое [/ wrapped] – Это как теги

    или и на самом деле может преобразовать его содержимое, или использовать содержимое в качестве аргументов.

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

[FAQ-whsr]

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

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

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

shortcode_02

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

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

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

api_02

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

Сокращенный-basic_02

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

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

шорткод-final_02

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

  • cat – идентификатор категории (несколько добавлены в виде массива) [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)
  • Поиск (круто, если вы хотите дать пользователям возможность поиска по ним)
  • Настраиваемое поле (поскольку они есть в элементах FAQ, их можно использовать для загрузки элементов с определенными настраиваемыми полями и значениями)

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me