В силу того, что большинство разрабатываемых мною сайтов создается с использованием CMS Wordpress и приходится постоянно сталкиваться с нетривиальными задачами, решил делиться с вами опытом использования различных плагинов. Как бесплатных так и платных, причем попробую придерживаться такого формата: одна статья - один плагин. Постараюсь рассматривать только действительно заслуживающие внимания разработки, и вот в первом своем рассказе поведаю вам об OptionTree - прекрасное, на мой взгляд, решение для создания страницы с пользовательскими настройками сайта.
Что такое пользовательские настройки? Шаблоны (темы) Wordpress, которые мы можем использовать на своем сайте, очень часто позволяют настраивать какие-то дополнительные параметры, например, цвет заголовков. Все платные темы, которые мне приходилось использовать, существенно расширяют функционал административной панели за счет отдельного интерфейса. Ниже я привожу пример такого расширения, посмотрите, пожалуйста.
Когда создается уникальный сайт (под уникальностью я имею ввиду сайт, который использует разработанный специально для клиента шаблон с уникальным дизайном и функционалом), то зачастую требуется создать возможность для администраторов менять те или иные параметры. Почти всегда необходимо дать возможность изменять файл логотипа, какие-то элементы на главной странице, иконки социальных сетей, цвет фона в «подвале» сайта и т.д. Именно такую возможность для разработчиков предоставляет плагин OptionTree, который можно бесплатно скачать с официального сайта Wordpress.
После установки... Установив и активировав плагин, мы, условно, получаем две части: одна для разработчиков сайта, другая - для пользователей. Первая часть доступна из пункта меню «OptionTree»-«Settings», который появляется после активации плагина слева в административной части Wordpress. Смело жмем туда и получаем уникальный интерфейс для формирования набора пользовательских полей, который будет доступен для пользователей во второй части плагина - «Внешний вид» - «Theme Options».
Слева мы видим разделы, которые можно переключать, справа - набор настроек внутри раздела. Разделы создаются с помощью Theme Options UI Builder по кнопке «Add section», и для раздела необходимо ввести его заголовок и уникальный идентификатор. Давайте создадим раздел «Дополнительно» и добавим туда несколько настроек.
Все изменения, конечно, фиксируются по нажатию на кнопку «Save Сhanges». Теперь добавим настройку для пользователя, ну, например, цвет заголовков. Нажимаем «Add setting» и, посмотрите, какой набор полей доступен для выбора. Можно сказать, огромный! Выберем «Colorpicker» и введем заголовок и уникальный идентификатор. Будьте внимательны с идентификаторами, именно по уникальному идентификатору затем в коде шаблона мы сможем получить доступ к значению этого поля.
Давайте посмотрим, что же теперь доступно пользователю для редактирования: появился новый раздел и новая настройка, поле «Цвет заголовков», которое пользователь удобным способом может теперь редактировать. Смотрите, я не буду останавливаться на полном списке доступных для создания полей, он есть, конечно же, в документации к плагину и на официальном сайте разработчиков. Если все же какие-то поля вызовут у вас интерес - напишите, я сделаю обновление этой публикации с описанием того или иного типа предлагаемых полей. В принципе, по названию поля понятен его смысл, но, повторюсь, если что-то вызовет у вас трудности - смело обращайтесь, обязательно поясню.
h1,h2,h3,h4,h5,h6 { color: ; }
Т.е. за вывод значения поля отвечает функция ot_get_option($option_id, $default), параметрами которой являются идентификатор поля, который мы с вами, как разработчики, задаем сами, в нашем случае мы выводим значение поля h_color. Второй параметр функции - формат вывода, давайте на этом я остановлюсь чуть подробнее. Например, нам надо сделать опцию, которая позволит пользователю создавать свой набор иконок для социальных сетей. Для этого мы будем использовать поле List Item (на иллюстрации ниже).
Это поле позволяет создавать уже набор повторяющихся полей, когда пользователь сможет добавлять одинаковые параметры внутри одной настройки. Немного непонятно, постараюсь объяснить и затем в коде показать, как это работает. В нашем случае присвоим полю List Item идентификатор social_icons и внутри этого поля (обратите внимание, есть еще одна кнопка «Add setting») добавим два поля: файл иконки и ссылка. Тип первого поля будет Upload, тип второго - Text. Идентификатор первого поля будет icon_image, идентификатор второго - icon_link.
Что получит пользователь? Теперь он сможет добавлять несколько иконок социальных сетей, нажимая на кнопку «Add new» на странице настроек. Причем, обратите внимание, количество таких настроек теперь неограниченно и зависит только от пользователя.
Чтобы вывести теперь в шаблоне такое сложное поле, необходимо использовать немного другой формат вывода, ниже - кусочек кода на PHP для такого случая. Комментариями постараюсь пояснить, что происходит.