Создание страницы настроек для вашей WordPress темы. Где скачивать темы
Создание собственной темы для WordPress является отличным способом придать вашему блогу или иному сайту, основанному на WordPress, индивидуальный вид. Однако даже самая привлекательная и красивая тема не будет идеально подходящей, если вам приходится лезть «под капот» и редактировать ее PHP и HTML-код всякий раз, когда требуется несколько видоизменить ее аспекты. Особенно, если это приходится делать не вам, а вашему клиенту. К счастью, создание страницы настроек для вашей темы в WordPress является не таким уж сложным действием, и после прочтения данного руководства вы сможете создать собственную страницу настроек без какого-либо труда.
Шаг 1. Выясняем, какие настройки нам необходимы.Все начинается с потребностей: чтобы создать четкую и полезную страницу настроек, вы должны определить то, что требуется изменить, оставив все остальное неизменным. Каждый новый параметр, который вы добавляете к администраторскому меню, увеличивает сложность пользовательского интерфейса – вы рискуете сделать тему трудной в использовании. Вот почему лучше быть осторожным и тщательно подбирать такие опции, которые будут часто изменяться, отбросив настройки, изменяемые однократно, что может быть легко сделано путем корректировки соответствующих файлов темы.
Еще один вопрос, который нужно иметь в виду: «Кто будет изменять данные настройки?» Если пользователь знаком с WordPress и PHP, то разумно было бы ожидать, что он сможет самостоятельно внедрить код Google Analytics в тему, но вы не должны требовать этого от графического дизайнера, не говоря уже об авторах, которым не нужно знать ни HTML, ни CSS.
Общие идеи для компонентов, которые нужно вынести в настройки темы, включают в себя:
- Код отслеживания Google Analytics
- Число сайдбаров и их расположение (слева, справа, может даже вверху и внизу)
- Ширина страниц
- Контент в футере
- Опции для возможностей, которые являются специфичными для темы, такие как, к примеру, форматы тизеров.
Как только вы собрали список возможностей темы, которыми вы хотели бы управлять посредством страницы настроек, вы практически готовы начать их реализацию. Прежде чем пойти дальше и создать свою страницу настроек, вы можете сохранить свое время, убедившись в том, что в WordPress уже нет такой функции, доступной для изменения. Виджеты, произвольные меню, произвольные бэкграунды и изображения для хэдера – все это полезные инструменты для того, чтобы сделать вашу тему настраиваемой, при этом гораздо меньшими усилиями, которые обычно требуются ля создания ваших собственных настроек. Правда, все эти компоненты – тема для другого руководства.
Настройки, создаваемые в данном руководствеДля данного учебного руководства я взял главную страницу, состоящую из сетки с различным количеством популярных записей, которые могут быть выбраны, отредактированы и переупорядочены администратором с помощью произвольной страницы настроек.
В редакторе элементы главной страницы будут представляться в виде списка, к которому можно добавлять новые пункты с помощью Javascript и Jquery.
Мне нравится иметь предварительный просмотр страницы администратора в консоли WordPress, когда я пишу HTML, поэтому я обычно начинаю с того, что привязываю страницу настроек к WordPress, и затем только перехожу к разработке контента страницы. Именно поэтому нашим следующим шагом будет создание пустой страницы настроек и подцепление ее к WordPress.
Шаг 2. Подцепление страницы настроек к WordPress.Создание страницы настроек начинается с написания функции, которая устанавливает меню и подцепляет его к действию admin_menu. Это говорит WordPress о том, что нужно вызвать функцию при создании меню, чтобы все было завершено в соответствующее время. Добавьте следующий код к файлу functions.php вашей темы:
Function setup_theme_admin_menus() { // Мы напишем контент функции очень скоро. } // Она говорит WP, что нужно вызвать функцию "setup_theme_admin_menus" // когда нужно будет создать страницы меню. add_action("admin_menu", "setup_theme_admin_menus");
Теперь мы поместим код для создания страницы настроек в функцию, которую мы только что написали:
При создании страницы настроек у вас есть выбор – либо добавлять страницу в виде подменю к одной из существующих групп настроек, либо создавать свое собственное меню верхнего уровня.
Добавление подменю производится с помощью функции add_submenu_page:
- $parent_slug – уникальный идентификатор для меню верхнего уровня, к которому будет добавлено подменю.
- $page_title заголовок добавляемой страницы.
- $menu_title заголовок, отображаемый в меню (зачастую короткая версия $page_title)
- $capability – минимальные права доступа, требуемые пользователю, чтобы получить доступ к данному меню.
- $menu_slug – уникальный идентификатор для создаваемого меню.
- $function – название функции, которая вызывается для обработки (и представления) данной страницы меню.
Если вы хотите добавить страницу меню в качестве подменю к уже существующей группе WordPress, вы можете использовать следующие значения в качестве параметра $parent_slug:
- Dashboard: index.php
- Posts: edit.php
- Media: upload.php
- Links: link-manager.php
- Pages: edit.php?post_type=page
- Comments: edit-comments.php
- Appearance: themes.php
- Plugins: plugins.php
- Users: users.php
- Tools: tools.php
- Settings: options-general.php
Группа Appearance является хорошим кандидатом для размещения нашей страницы настроек. Давайте остановимся на ней, и попробуем создать нашу первую страницу настроек. Вот обновленная версия нашей функции установки меню:
Function setup_theme_admin_menus() { add_submenu_page("themes.php", "Front Page Elements", "Front Page", "manage_options", "front-page-elements", "theme_front_page_settings"); }
Нам по-прежнему надо создать функцию theme_front_page_settings для работы с настройками. Вот самая простая ее форма:
Function theme_front_page_settings() { echo "Hello, world!"; }
Вот как это будет выглядеть в действии:
Нам также нужно проверить, имеет ли пользователь права, требуемые для редактирования страницы настроек. Чтобы сделать это, добавим следующий код в самом начале функции страницы настроек:
// проверяем, что пользователь может обновлять настройки if (!current_user_can("manage_options")) { wp_die("You do not have sufficient permissions to access this page."); }
Теперь, если пользователь, которому нельзя управлять страницей настроек, зайдет на страницу настроек, он увидит обычное сообщение: «У вас нет достаточных прав, чтобы получить доступ к данной странице».
Если для вашей темы требуются многочисленные страницы настроек, это может запутать пользователя, поскольку ему придется разыскивать их в меню. В таком случае создание вашей собственной группы настроек значительно упростит поиск страниц в меню.
Чтобы добавить свою собственную группу настроек, вы должны создать страницу меню верхнего уровня, и соединить с ней страницы подменю. Вот новая версия нашей функции для создания меню. Функция add_menu_page создает меню верхнего уровня по аналогии с add_submenu_page, за исключением лишь того, что ей не нужен параметр $parent_slug.
Function setup_theme_admin_menus() { add_menu_page("Theme settings", "Example theme", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page("tut_theme_settings", "Front Page Elements", "Front Page", "manage_options", "front-page-elements", "theme_front_page_settings"); } // нам нужно добавить функцию обработки меню верхнего уровня function theme_settings_page() { echo "Settings page"; }
Если вы протестируете код и обновите консоль WordPress, то вы увидите новую группу меню, представленную в самом низу списка меню.
Однако пока это выглядит не совсем верно. Щелчок по верхнему элементу меню приводит вас не к странице меню Front Page, а к странице Example theme. Это не совпадает с тем, как работают остальные меню WordPress, потому давайте сделаем еще одну вещь: изменив атрибут $menu_slug в вызове add_submenu_page на то же самое значение, что и в меню верхнего уровня, мы можем связать два меню так, чтобы выбор верхнего пункта приводил к появлению меню Front Page.
Function setup_theme_admin_menus() { add_menu_page("Theme settings", "Example theme", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page("tut_theme_settings", "Front Page Elements", "Front Page", "manage_options", "tut_theme_settings", "theme_front_page_settings"); } function theme_settings_page() { }
Выглядит уже лучше. Если вы все еще хотите улучшить представление своей группы меню, вы можете воспользоваться двумя дополнительными полями в функции add_menu_page. Просто добавьте значения после названия функции в вызове метода:
- $icon_url – определяет URL иконки для меню верхнего уровня.
- $position – определяет позицию вашей группы меню в списке меню. Чем больше значение, тем ниже позиция в меню.
Теперь, когда мы создали страницу настроек, и она отобразилась в боковом меню, пора начать добавлять к ней некоторый контент. Давайте вернемся к списку настроек и спроектируем страницу для редактирования их.
В данном руководстве нам нужно поле для определения, сколько элементов должно быть выведено в одной строке, и список для определения существующих элементов. Начнем с более простого: давайте создадим текстовое поле для количества элементов в одной строке. Отредактируем функцию для страницы настроек:
Function theme_front_page_settings() { ?> Front page elements
В итоге получаем: