Bootstrap WordPress плагин слайдер своими руками

WordPress

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

Часть 1. Создание слайдера в админке.

Файл «oi-slider.php»(корень  плагина).

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

После подключения скриптов и стилей, нам необходимо добавить в администраторскую панель раздел «Слайдер» для создания слайдов. Реализуем мы данный пункт с использованием «Произвольного типа записи» по стандартной методологии WordPress.

Создаем тип поста «Слайдер»

 

Результатом данного кода будет появившийся новый раздел, в котором мы можем создавать записи с типом «Слайдер». Обратите внимание, что в ключе «supports» — не указано отображение поля для контента, так как все слайды мы будем хранить именно в контенте — строкой JSON и нам не нужно, чтобы пользователь видел, что там лежит. Почему именно в post_content? Это позволит избежать лишнего запроса в базу данных в случае, если мы будет подгружать мета поля. На данном этапе возникает вопрос: каким образом слайдер заполнять, собственно, слайдами? Для этого мы опять же обратимся к стандартной технике WordPress — мета боксы, которые будут служить для добавления и отображения слайдов в администраторской панели в рамках выбранного слайдера. Это будет выглядеть следующим образом:

Добавляем метабоксы

Как Вы можете заметить, в метабоксах мы будем хранить путь к картинке, заголовок и подпись. Все это при отправлении будет попадать в единый массив slider с соответствующим для каждого из этих параметров ключом: ‘slide’, ‘title’, ‘caption’. Далее следует JavaScript, который будет обрабатывать действия пользователей на фронтенде: кнопка «Добавить слайд», которая будет «подтягивать» все необходимые для заполнения поля, кнопка «Удалить слайд», которая, соответственно, будет удалять слайд в случае необходимости.
После занесения этих данных в метабоксы пользователем нам, конечно же, нужно их сохранить.

Реализуем это следующим образом:

Сохраняем в post_content

В приведенном коде хочу обратить Ваше внимание на пару основных моментов:
1. Так как мы будем «налету» перезаписывать post_content, нам потребуется удалить хук сохранения, чтобы избежать бесконечного цикла -> remove_action(‘save_post‘, ‘save_slides‘);
2. Хотелось бы осветить парсинг HTML-кода встроенными средствами PHP. Когда мы загружаем слайд из WP-аплодера, то в поле «Изображение» он попадает примерно в таком виде: <img src="http://some_path" />

Нам в таком варианте хранить его неинтересно, ведь нас интересует только src. Для этого мы создаем новый DOMDocument-объект и пользуемся встроенными в него методами loadHTML(подгружаем html код), getElementsByTagName(получаем нужный тег), getAttribute(забираем нужный атрибут)

Часть 2. Шорткод и вывод слайдера.

Файл «inc/shortcodes.php».

Итак, функционал слайдера мы реализовали полностью осталось только создать удобный шорткод для вывода слайдера в произвольной части сайта. Для вывода мы возьмем стандартный вариант отображения слайдера из документации bootstrap:

Реализация шорткода

Обращаю Ваше внимание, что тут мы не выводим контент сразу, а возвращаем его в переменную с помощью функций ob_start(), ob_get_contents(), в ином случае слайдер будет выводиться в первую очередь, независимо от того, где он был размещен.

Так же не забудьте скачать с официального сайта Bootstrap необходимые для работы слайдера файлы: bootstrap.min.css,  bootstrap.min.js

Таким образом, можно реализовать простой плагин слайдер на основе bootstrap и быстро его использовать в своих проектах с помощью шорткода.

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

Один коменнтарий на “Bootstrap WordPress плагин слайдер своими руками

  1. При нажатии кнопки «Загрузить фотографию» — ничего не происходит. Последняя версия WordPress.

Вступайте в нашу группу в VK

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

ИП Исаенко А.В.

ОГРНИП 317774600344403

ИНН 773770600180