Advertisement
  1. Code
  2. Theme Development

Создание страницы настроек для вашей WordPress темы

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Создание собственной темы для WordPress - отличный способ придать вашему блогу или другому веб-сайту WordPress оригинальный образ. Но даже самая приятная тема не будет такой приятная, если для мелких изменений вам нужно лезть под капот и редактировать HTML или PHP-код темы. Особенно, когда это платящий клиент, использующий вашу тему. К счастью в WordPress, процесс создания страницы настроек для вашей темы в WordPress совсем не сложный, и после прочтения этого урока вы сможете создать ее в самые кратчайшие сроки!


Шаг 1 Решение о том, какие настройки необходимы

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

Еще один вопрос, который следует иметь в виду: «Кто будет менять эти настройки?» Если пользователь знаком с PHP и WordPress, можно ожидать что у него не будет проблем с вложением Google Analytics в код, но вы не должны требовать этого от графического дизайнера, не говоря уже о писателе, который даже не должен ничего знать о HTML и CSS.

Общие идеи для определения объектов в настройках темы:

  • Код отслеживания Google Analytics на сайте
  • Количество боковых панелей и их позиционирование (слева, справа, может быть, даже вверх и вниз)
  • Ширина страницы
  • Содержимое вашего футера
  • Параметры для функций, характерных для темы, например, пользовательские форматы тизеров.

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

Настройки, созданные в этом учебнике

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

Элементы главной страницы в редакторе будут представлены в виде списка элементов, к которым новые могут быть добавлены с помощью JavaScript и jQuery.

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


Шаг 2 Подключение страницы настроек к WordPress

Создание страницы настроек начинается с создания функции, которая настраивает меню и подключает его к действию admin_menu. Это сообщает WordPress о том, чтобы вызвать вашу функцию, когда нужно будет создать меню, чтобы все было сделано в нужное время. Добавьте этот код в файл functions.php вашей темы:

Теперь мы добавим код для создания страниц настроек внутри только что созданной функции.

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

Добавление подменю выполняется с помощью функции add_submenu_page:

  • $parent_slug - уникальный идентификатор страницы верхнего меню, к которому это подменю добавляется как дочернее.
  • $page_title - название добавляемой страницы
  • $menu_title - это название, отображаемое в меню (часто более короткая версия $page_title
  • $capability - минимальные требования для пользователя для доступа к этому меню.
  • $menu_slug - уникальный идентификатор создаваемого меню
  • $function - это имя функции, которая вызывается для обработки (и визуализации) этой страницы меню

Если вы решите добавить страницу меню в качестве подменю в одну из групп WordPress, вы можете использовать следующие значения в качестве параметра $parent_slug:

  • Панель инструментов: index.php
  • Сообщения: edit.php
  • Медиа: upload.php
  • Ссылки: link-manager.php
  • Страницы: edit.php?post_type=page
  • Комментарии: edit-comments.php
  • Внешний вид: themes.php
  • Плагины: plugins.php
  • Пользователи: users.php
  • Инструменты: tools.php
  • Настройки: options-general.php

Группа Appearance выглядит хорошим кандидатом для размещения нашей страницы настроек. Попробуем ее и создадим нашу первую страницу настроек. Вот обновленная версия нашей функции настройки меню:

Для этого нам еще нужно создать функцию theme_front_page_settings. Вот она в самой простой форме:

И вот как это выглядит в действии:

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

Теперь, если пользователь, которому не разрешено управлять параметрами, попадает на страницу настроек, он не увидит ничего, кроме сообщения «У вас недостаточно прав для доступа к этой странице».

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

Чтобы добавить свою собственную группу настроек, вам нужно создать страницу меню верхнего уровня и связать страницы подменю с ней. Вот новая версия нашей функции настройки меню. Функция add_menu_page, используемая для создания меню верхнего уровня, похожа на add_submenu_page, за исключением того, что она не принимает параметр $parent_slug.

Если вы проверите код и обновите панель администратора WordPress, вы увидите, что ваша новая группа меню появится в нижней части списка меню:

Но пока что-то не совсем корректно. Щелчок по элементу верхнего меню не приведет вас к меню «Главная страница», а к странице меню «Пример темы». Это не согласуется с тем, как функционируют другие меню WordPress, поэтому давайте сделаем еще одну вещь: изменив атрибут $menu_slug в вызове add_submenu_page на то же значение, что и в меню верхнего уровня, мы можем связать два меню, чтобы выбор верхнего меню выбирал меню главной страницы:

Теперь выглядит получше. Если вы хотите улучшить внешний вид своей группы меню, есть две необязательные поля в функции add_menu_page, которые вы найдете полезными. Просто добавьте значения после имени функции в вызове метода:

  • $icon_url указывает URL-адрес значка для меню верхнего уровня.
  • $position определяет позицию вашей группы меню в списке меню. Чем выше значение, тем ниже положение в меню.

Шаг 3 Создание HTML формы для страниц настроек

Теперь, когда мы создали страницу настроек, и она корректно отображается в боковом меню, пришло время начать добавлять контент. Итак, вернемся к списку настроек, которые мы имели в виду, и создадим страницу для их редактирования.

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

Когда вы перезагрузите страницу настроек, вы увидите первое поле настроек:

Чтобы наша страница настроек легко вписалась в WordPress, лучше всего использовать классы и стили CSS, которые WordPress использует на своих собственных страницах настроек. Хороший способ изучить эти трюки - это просто пойти и проанализировать исходный код WordPress.

Самое главное - обернуть страницу настроек с помощью div с классом «wrap». Внутри этого элемента div вы можете использовать многие предопределенные стили, такие как заголовки, кнопки и поля формы. Начнем с оформления названия нашей страницы настроек:

  • Мы создадим заголовок h2 для страницы (вы можете использовать теги заголовков от h2 до h6 для создания заголовков разных размеров.)
  • Перед заголовком мы покажем значок страницы настроек темы. (Вы можете использовать предопределенные значки WordPress с помощью функции screen_icon. Функция может принимать один из следующих параметров: indexedituploadlink-managerpagescommentsthemespluginsuserstools или options-general.)
  • Мы поместим элемент input в форму и таблицу с классом form-table.

Затем пришло время начать добавлять элементы.

Чтобы сделать это, мы будем использовать jQuery, поскольку он упрощает работу, чем если бы мы писали JavaScript с нуля, и поставляется в комплекте с WordPress. Если вы раньше использовали jQuery, нужно иметь в виду только одну вещь: нотация $, которую вы обычно используете с jQuery, не работает в WordPress - вам нужно ввести целое слово jQuery.

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

Теперь это выглядит так:

Теперь, когда у нас есть наш шаблон, пришло время скрыть его и создать JavaScript для его использования, чтобы создавать новые строки для постов на странице настроек. Установите стиль для элемента li  в значение  display:none;

Затем мы создадим список для хранения элементов главной страницы по мере их добавления и ссылку, которую пользователь нажмет, чтобы добавить новые элементы. Я повторяю весь HTML, чтобы вы могли четко видеть, куда идут изменения:

В реальной жизни хорошей практикой будет поместить ваш JavaScript-код в отдельный файл, но для того, чтобы сделать этот учебник немного легче, я добавляю JavaScript в ту же функцию с помощью HTML выше, прямо перед wrap div:

JavaScript-код выше создает функцию, которая вызывается, когда пользователь щелкает ссылку с идентификатором add-featured-post. Эта функция клонирует элемент списка шаблонов, который мы создали ранее, и обновляет его поля, чтобы иметь уникальные идентификаторы и имена. Таким образом, все они будут корректно отправлены с формой, когда пользователь нажмет кнопку отправить. Переменная elementCounter содержит следующий идентификатор для добавления. Она также сохраняется в скрытом поле, поэтому, когда форма отправляется, мы знаем, сколько элементов страницы нужно ожидать.

Если вы нажмете ссылку «Добавить пост» пару раз, вы увидите, что в список добавлены элементы:

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

Нам также нужно вызвать функцию. Добавьте следующий код перед инкрементом elementCounter.

Прежде чем перейти к сохранению формы, нужно еще кое-что сделать. Мы будем использовать плагин jQuery ui.sortable, чтобы сделать элементы страницы сортируемыми, перетаскивая их друг на друга. Чтобы включить функцию сортировки, нам нужно будет подключить соответствующий файл JavaScript (который также поставляется вместе с WordPress). Это можно сделать, добавив следующую строку кода в конец functions.php:

Затем мы добавим следующий JavaScript перед (или после) jQuery("#add-featured-post").click определенным выше.

Этот фрагмент делает список отсортированным и добавляет событие, которое вызывается всякий раз, когда пользователь заканчивает сортировку. Обработчик событий обновляет все идентификаторы элементов, чтобы новый порядок сохранялся также при сохранении формы (это станет яснее после реализации сохранения). При написании этого обработчика я заметил, что код для установки идентификатора для содержимого шаблона дублировался в двух местах, поэтому я реорганизовал его в свою собственную функцию, которую я разместил прямо перед строчкой с jQuery(document).ready():

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


Шаг 4 Сохранение формы

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

Обработка формы выполняется в той же функции, которая отображает форму. Чтобы узнать, была ли форма отправлена или нет, мы добавим скрытое поле, update_settings в форму и затем проверим, было ли это поле отправлено или нет в функции обработки.

Скрытое поле, которое входит в форму, выглядит следующим образом:

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

Прежде чем перейти к сохранению списка, давайте добавим текущее значение num_elements в форму настроек, чтобы пользователь всегда видел, какое значение он ввел, прежде чем принимать решение о следующем значении. Это также поможет нам проверить, действительно ли значение было сохранено.

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

Когда форма сохраняется, важно уведомить пользователя, чтобы она не оставляла сомнений в том, произошло что-то или нет. Итак, давайте сделаем простое сообщение о том, что «Настройки сохранены». сразу после update_option:

Затем сохраним элементы передней страницы. Наибольшее значение id в элементах страницы передается как element-max-id, поэтому мы можем взять это значение и перебрать элементы до этого идентификатора, сохранив их данные в массиве в правильном порядке:

Это сохраняет данные, но нам все равно нужно подставить значения на странице настроек. Итак, давайте сделаем то же самое, что и в поле num_elements и загрузим параметры по умолчанию в начале функции:

И затем, отобразим существующие элементы при построении формы:

Нам также нужно установить начальное значение для переменной elementCounter, используемой в JavaScript, установив начальное значение скрытого поля в PHP и прочитав его при инициализации переменной в JavaScript:

И часть JavaScript:


Шаг 5 Использование настроек внутри темы

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

С этого момента изменения попадают в index.php вместо functions.php. Сначала мы рассмотрим параметры переменных:

Давайте пройдемся по списку $elements, сгруппируем их в строки с блоками $num_elements в каждом.

И затем, используя данные, сохраненные для каждого элемента, мы заполним вышеописанную часть элемента:

С несколькими элементами это выглядит примерно так:

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

Функция, setup_theme_features включает миниатюры сообщений, используя функцию WordPress add_theme_support, так что WordPress добавляет эту функциональность на страницу сохранения постов. На странице поста мы можем добавить одно изображение в виде эскиза, нажав «Использовать изображение» на странице загрузки изображения после загрузки фотографии.

Функция также определяет новый тип размера изображения, tutorial-thumb-size, который используется при получении эскиза поста в коде рендеринга.

После выбора отображаемого изображения сохраните изменения и перезагрузите страницу. Выглядит более интересно:

Наконец, мы добавим несколько стилей в style.css, вот теперь тема имеет настраиваемое отображение постов:


Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.