ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Лучше скажи мало, но хорошо (К. Прутков).

Показать пост в модальном окне в WordPress

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Статья опубликована: 10 мая 2017

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

1. Основа плагина

Перед тем, как приступить к созданию функциональных возможностей, нам нужно подготовить наш плагин. Мы создадим новую папку внутри wp-content/plugin. Вы можете назвать ее как вы хотите.

После этого создайте файл в этой папке с тем же именем, но с расширением .php. Поместите этот код в этом файле:

 

Сохраните файл и перейдите вадминку WordPress и в меню Плагиныи активируйте новый добавленный плагин. Теперь плагин активен, и мы можем начать вводить код smile

2. Добавим Bootstrap 3

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

Для простоты мы будем использовать по умолчанию Bootstrap 3 из CDN. Лучше решение для этого было бы использовать только те части, которые необходимы для модальных окон. Если ваша тема WordPress использует Bootstrap 3 CSS и JS файлы, эта часть нашей статьи может быть пропущена.

Добавьте следующий код в файл:

 

С помощью функции enqueue_style и enqueue_script мы вызвали файлы Bootstrap 3 CSS и JavaScript из CDN, который был сделан возможным MaxCDN.

3. Bootstrap 3 Modal

Если мы хотим использовать Bootstrap 3 Modal нам нужно добавить модальность в нашей странице. В HTML будут добавлены в нижней части страницы, на которой функционирует wp_footer на момент вызова метода. Мы будем использовать WordPress фильтр wp_footerв WordPress. Так что давайте добавим этот код в нашем файле плагина:

 

Мы определили регулярную функцию, которая содержит HTML код для Bootstrap 3 modal, а затем мы добавили его в фильтрwp_footer .

4. Shortcode для отображения кнопки

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

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

  • Передадим атрибуты в функцию
  • Мы определяем атрибуты по умолчанию, которые будут перезаписаны переданными атрибутами
  • После этого мы определяем ajax_nonce, которые будут проверены в интерфейсе вызова AJAX для проверки источника запроса.
  • Затем определяется функция JavaScript (мы определим ее следующим)
  • Последнее, что является гиперссылкой со всеми атрибутами

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

5. Функция Javascript

В приведенном выше примере кода мы определили функцию JavaScript без кода. Теперь вы можете заменить этим кодом:

 

В этой функции мы передаем идентификатор параметра, который является ID нашей статьи. Затем мы создаем вызов AJAX с JQuery. В этом вызове AJAX мы проверяем следующие параметры:

  • URL – URL-адрес, на котором мы создаем запрос AJAX. При работе с WordPress, URL будет что-то вроде your-page.ru/wp-admin/wp-ajax.php. Так как мы не знаем, на какие сайты будет использоваться этот плагин, мы определяем URL динамически с функцией admin_url.
  • data – все данные, которые мы посылаем. Теперь на стороне сервера мы можем получить доступ ко всем этим данным с глобальным переменным $ _GET.

Если вызов AJAX был успешным, и если мы получили запрашиваемую информацию, мы будем вставлять содержание модальный заголовок и тело. Если AJAX был успешен, но мы не получили никакой информации в статье (может быть, потому, что мы предоставили идентификатор, который не является статьей) мы будем оповещать пользователя с таким же Modal, но с другим постом. Мы читаем ответ JSON и проверка его можно показать сообщение об ошибке или содержание статьи.

6. Получение содержимого сообщения

Теперь, когда мы имеем шорткод, который вызывает функцию JavaScript с вызовом AJAX, нам нужно определить функцию, которая будет посылать ответ в формате JSON. Итак, давайте добавим этот код:

 

В начале мы добавляем нашу функцию действия. Она работают так:
 

Так как мы передаём имя действия andreyex_show_post, то нам нужно добавить нашу функцию сервера в наши действия. Одно действие также имеет слово nopriv, и это означает, что наша функция также будет выполнена, даже если пользователь не вошел в систему.

В конце концов, мы также вызвалиwp_die (), так что запрос AJAX и réponse закончится после того, как наша функция завершит обработку.

7. Сокращенный виджет

По умолчанию шорткоды не могут быть обработаны в виджетах. Но, добавив этот код мы включим обработку:

 

8. Использование Shortcode

Вот некоторые примеры, как можно использовать наш вновь добавленный шорткод:

Только с идентификатором

[andreyex_post id=12412]

ID статьи с некоторыми другими классами Bootstrap 3

[andreyex_post id=12412 class="btn btn-warning"]

ID статьи и дополнительные стили

[andreyex_post id=12412 style="margin:0 auto;width:100%"]

Кнопка с другим текстом

[andreyex_post id=12412 text="Нажмите кнопку, чтобы показать статью"]

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

Вывод

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

Вы когда-нибудь создавали нечто подобное, или нужно что-то подобное? Дайте нам знать о вашем опыте использования Bootstrap Modal в комментариях ниже!?

 


Читайте также

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close