Темы WordPress состоят из файлов и стилей, которые вместе определяют внешний вид сайта. Они могут сильно отличаться между собой, позволяя пользователям быстро изменить дизайн веб-сайта. Но зачем вам может понадобиться своя тема?
- Чтобы создать ваш собственный уникальный дизайн сайта.
- Чтобы воспользоваться , и для вывода различного содержимого и стиля страниц.
- Чтобы создать альтернативные шаблоны для специальных разделов сайта, например для страниц рубрик и результатов поискового запроса.
- Чтобы быстро переключаться между двумя разметками сайта, или с помощью позволить пользователям изменять вид вашего сайта.
- Чтобы предоставить тему в общественный доступ и позволить другим насладиться вашим дизайном.
Тема WordPress также предоставляет некоторые преимущества.
- Она разделяет стили представления и от системных файлов, позволяя производить обновления без сильных изменений внешнего вида сайта.
- Она позволяет настраивать специфические для данной темы параметры вывода.
- С помощью неё можно быстро сменить внешний вид сайта на основе WordPress.
- Благодаря ей, отпадает необходимость пользователю изучать CSS, HTML и PHP для того, чтобы сделать свой сайт привлекательным.
Но зачем вам создавать свою собственную тему? Вот в чём главный вопрос.
- Это возможность узнать больше о CSS, HTML/XHTML и PHP.
- Это возможность показать свои умения в CSS, HTML/XHTML и PHP.
- Это возможность творить.
- Это весело (по большей части).
- Если вы предоставили свою тему в общественный доступ , то вы получите удовлетворение от того, что поделились и дали что-то взамен Сообществу WordPress (можете похвастаться!)
При написании кода тем WordPress, придерживайтесь следующих стандартов:
- Используйте корректно структурированный, не содержащий ошибок PHP-код и валидный HTML-код (см. ).
- Используйте правильно составленный, валидный CSS-код (см. ).
- Придерживайтесь рекомендаций по .
Темы WordPress находятся в поддиректориях wp-content/themes/ . Директория темы содержит таблицы стилей, файл дополнительного функционала (functions.php) и картинки. К примеру, тема под названием "test" вероятно будет расположена в директории wp-content/themes/test/ .
По умолчанию WordPress содержит три темы, созданные командой разработчиков Wordpress: "Twenty Fifteen", "Twenty Sixteen" и "Twenty Seventeen". Эти темы отличаются между собой и используют различные функции и теги для создания внешнего вида и страниц сайта. Внимательно изучите составляющие их файлы, чтобы лучше понять, как создать свою собственную тему.
Тема WordPress состоит из трёх основных типов файлов, в дополнение к изображениям. Первый - это таблица стилей под именем style.css , которая контролирует внешний вид страниц сайта. Второй предоставляет собой файл дополнительного функционала (functions.php). Остальные файлы - это файлы шаблонов , которые определяют, каким образом выводится информация из базы данных на веб-страницу. Давайте рассмотрим каждый тип по отдельности.
Таблица стилей темыПомимо собственно таблицы стилей вашей темы, файл style.css обязательно должен содержать информацию о вашей теме в виде комментариев. Каждая тема должна иметь свою собственную уникальную информацию в комментариях заголовка, в обратном случае возникнут проблемы в . Создавая новую тему на основе уже существующей, в первую очередь измените комментарии заголовка.
Ниже приведен шаблон заголовка таблицы стилей (style sheet header) вашей темы Rose . Он должен находится в начале файла стилей style.css , в первых строках:
/* Theme Name: Rose Theme URI: домашняя-страница-темы Description: краткое-описание-темы Author: ваше-имя Author URI: ваш-URI Template: напишите-здесь-наименование-родительской-темы--необязательное-поле Version: номер-версии--необязательное-поле. Развёрнутое описание темы/Лицензия-если-нужно. . */
Простейшая тема включает в себя только файл style.css плюс изображения, если они необходимы. Для создания такой темы необходимо в строке заголовка Template: указать имя родительской темы. Например, если ваша тема "Rose" происходит (наследует) от темы "test", напишите в заголовке style.css следующую строку:
Template: test
После добавления такой строки в заголовок style.css все шаблоны темы "test" будут наследоваться вашей темой "Rose", в которой ничего нет, кроме файла с таблицей стилей style.css , и возможно, рисунков. Эти файлы необходимо поместить в каталог wp-content/themes/Rose .
Начиная с WordPress 2.7 тема-потомок может содержать файлы-шаблоны, имена которых совпадают с именами шаблонов в родительской теме, в админ-панели можно выбрать эти шаблоны для использования, и они будут использоваться вместо родительских.
Комментарии в заголовке style.css нужны WordPress для идентификации темы и отображения её в подменю > в качестве установленной темы, вместе с другими установленными темами.
Примечание : Когда вы определяете родительскую тему, в строке комментариев Template: , вы должны использовать имя каталога темы. Например, для использования темы "Default Wordpress Theme", не пишите
Template: WordPress Default
а пишите
Template: default
поскольку "default" - это имя каталога родительской темы.
Файл дополнительного функционалаТема может дополнительно использовать файл с необходимыми функциями для работы темы, он должен располагаться в каталоге темы и называться functions.php . Этот файл в основном работает подобно плагину, и если он присутствует в каталоге темы, которую вы используете, то он автоматически загружается во время инициализации WordPress. Это верно как для страниц админки, так и для остальных (внешних к админке) страниц. Предлагается следующее использование для этого файла:
- Определение функций, используемых в файлах шаблонов вашей темы;
- Настройки в админке вашей темы, которые предоставляют пользователям варианты настроек цветов, стилей или других аспектов вашей темы.
Темы, поставляемые с WordPress и установленные из коробки, имеют файл functions.php , который определяет ряд функций и настроек в админке темы, поэтому вы можете использовать его в качестве модели. Файл functions.php в основном работает как плагин, раздел Кодекса - лучшее место, где можно получить более подробную информацию о том, как вы можете использовать этот файл.
Файлы шаблонов темы Выбор шаблонов, основанный на запросахWordPress позволяет программисту использовать различные варианты для подключения шаблонов из набора : во-первых, с использованием иерархии шаблонов , во-вторых - с использованием условных тегов внутри цикла обработки файлов шаблона.
В первом случае, при использовании иерархии шаблонов , необходимо создать специальные файлы шаблонов, которые будут автоматически использоваться в необходимый момент для создания страницы вместо базового шаблона index.php . Например, если ваша тема содержит шаблон под названием category.php и пришёл запрос на страницу с категорией, шаблон category.php будет загружен вместо шаблона index.php . Если файл category.php в теме отсутствует, будет загружен шаблон index.php , как обычно.
Вы можете определить шаблон для конкретной категории, например, добавив в тему файл шаблона category-6.php . Файл будет использован вместо index.php в том случае, когда ID категории будет равен 6. Чтобы узнать ID категории, зайдите в > , если у вас есть доступ администратора в WordPress version 2.3 или ниже.
Начиная с WordPress 2.5 столбец ID был удалён из панели администратора. Вы можете определить ID категории, кликнув "Edit Category" и посмотрев в URL-е значение cat_ID. Например, конец URL:
"...categories.php?action=edit&cat_ID=3"
где "3" - и есть ID текущей категории. Более детально этот процесс рассмотрен в
Если ваша тема должна уметь еще более подробно управлять шаблоном отображения, чем тот уровень контроля, который обеспечивает иерархия шаблонов , вы можете использовать условные теги . Условные теги в основном проверяют, если какое-либо особое состояние верно во время исполнения , в таком случае вы можете загрузить определенный шаблон или отобразить некоторые варианты текста на странице в соответствии с этим состоянием.
Например, для создания различных стилей, в зависимости от номера категории, код может выглядеть следующим образом:
Или, используя объект запроса, тот же алгоритм можно реализовать по-другому:
В любом случае, оба примера кода будут вызывать различные шаблоны, в зависимости от ID категории. Условные теги не ограничиваются категориями, см. статью , в ней рассмотрены все возможные варианты.
Иконки типов файловWordpress использует иконки типов файлов () в вашем блоге и в интерфейсе Админ-панели, если эти иконки существуют в указанном месте.
Wordpress ищет эти файлы в каталоге images текущей темы. (А в Wordpress 2.2, тема по умолчанию имеет только одну иконку, audio.jpg .)
Например, для отрисовки иконки типа MIME type audio/mpeg , Wordpress будет искать файл иконки в указанном каталоге images текущей темы, он выбирает первый подходящий файл (см. описание функции ):
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Конечно, ваша тема может содержать и другие файлы стилей, изображений или программ. Просто имейте в виду, что приведеные ниже имена файлов имеют особое значение для WordPress - см. шаблон иерархии для получения дополнительной информации.
Style.css Главный файл таблицы стилей. Файл должен быть в теме обязательно и обязательно должен содержать описанные выше комментарии в заголовке файла. index.php Главный файл шаблонов. Если вы в своей теме используете свои шаблоны, этот файл index.php обязателен. comments.php Шаблон комментариев. Если его нет, используется файл comments.php из темы по умолчанию. comments-popup.php Добавляет всплывающее меню для комментариев на JS. При отсутствии вызывается comments-popup.php из темы по умолчанию. home.php Шаблон главной страницы блога. single.php Шаблон страницы одиночного поста. Используется, когда запрошен конкретный пост. Для этого и других шаблонов по запросу используется index.php , если в вашей теме нет соответствующего файла шаблона. page.php Шаблон отдельной страницы, используется для отображения запрошенной страницы . category.php Шаблон категории . Используется при запросе категории. author.php Шаблон автора блога . Используется при запросе автора блога. date.php Шаблон вывода даты-времени. Используется при запросе даты и времени. Год, месяц, день месяца, час, минута, секунда. archive.php Шаблон архива. Используется, когда запрошены категория, автор или дата. Учтите, что этот шаблон может быть переопределен шаблонами category.php , author.php и date.php для соответствующих типов запросов. search.php Шаблон результатов поиска. Используется после выполнения поиска. 404.php Шаблон для сообщения об ошибке . Используется, когда WordPress не может найти сообщение или страницу, которая соответствует запросу.
Эти файлы имеют специальное значение в WordPress, поскольку они используются для замены index.php , когда они есть в каталоге темы, в соответствии с иерархией шаблонов , и когда поступил соответствующий запрос; или же в соответствии с истинностью условных тегов , когда функция типа is_*(); возвращает "true".
Например, если требуется отобразить единственный пост, функция возвращает "true", и в каталоге активной темы есть файл шаблона single.php , этот шаблон используется для создания страницы.
Ссылки на файлы из шаблонаТема WordPress по умолчанию представляет собой хороший пример техники (впервые описанной Майклом Хелманном (Michael Heilemann) в Kubrick в макете для WordPress 1.2), как запросы отображаются в шаблонах.
Следующий код вставляет URL шаблона в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы из вашей темы.
Следующий код добавляет URL каталога, который содержит файлы стилей.css вашей темы, в вывод шаблона. Вы можете добавить любую дополнительную информацию для ссылок на файлы вашей темы, особенно те, которые необходимы для таблиц стилей (чтобы этого избежать, используйте это вместо ).
Константа TEMPLATEPATH содержит абсолютный путь к каталогу шаблонов текушей темы (без символа "/" в конце).
Обратите внимание, что URI, которые используются в таблице стилей, привязаны к каталогу, где находится файл таблицы стилей, а не к каталогу, где находится шаблон, использующий эти стили. Это устраняет необходимость добавления кода PHP в файл таблицы стилей для задания текущего каталога. Например, если вы в таблице стилей используете изображения из каталога images/ своей темы, вы должны указать в CSS только относительный путь, например:
H1 { background-image: URL(images/my_background.jpg); }
Это хороший вариант использовать способ, описанный выше, для ссылки на файлы. В этом случае вам не понадобятся абсолютные пути в ваших шаблонах.
Определение пользовательских типов шаблоновДля добавления своих собственных типов шаблонов, которые используются в определённых вами случаях, можно использовать систему плагинов WordPress. Это необходимо, если вы хотите сделать, например, различную вёрстку для различных случаев или свой шаблон комментариев и т.д. Это расширение возможностей WordPress можно достичь при помощи перехвата события template_redirect , см. . Более подробную информацию о создании плагинов можно найти по ссылке .
Необходимые вызовы событий для совместимостиПри разработке темы желательно иметь в виду, что ваша тема должна быть настроена таким образом, что она может хорошо работать с любым плагином для WordPress, который вы или другой пользователь вашей темы захочет установить. Плагины расширяют функциональные возможности WordPress с помощью перехвата событий ("Action Hooks", см. для получения дополнительной информации). Большинство событий происходит в ядре WordPress, так что вашей теме нет необходимости вызова перехваченных специальных событий для своей работы. Но некоторые перехваченные события всё же придётся вызывать, для того, чтобы устанавливаемые плагины корректно отображали информацию, непосредственно в заголовке (верхнем колонтитуле) и подвале (нижнем колонтитуле), в боковой панели, или в основном теле страницы. Вот список специальных тегов событий, которые необходимо вызывать в вашей теме для корректной работы любых плагинов:
Wp_head Происходит при отображении кода элемента в шаблоне header.php . Пример использования в плагине: добавление кода javascript. Использование: -или- wp_footer Происходит при отображении заголовка (верхнего колонтитула) "footer" темы в шаблоне footer.php . Пример использования в плагине: вставка кода PHP, который должен выполняться после всего, самым последним на странице. Использование: -или- wp_meta Событие обычно происходит при обработке тега
Для реального примера, вы можете найти эти вызовы событий для плагинов в соответствующих шаблонах темы по умолчанию.
Общие замечания для разработчиков темПожалуйста, четко представьте себе и опишите в вашей документации на тему (файл README, включенный в вашу тему, поможет многим пользователям обойти любые потенциальные камни преткновения):
Полный список ресурсов, касающихся тем и шаблонов доступен в статье .
Из этой статьи вы узнаете, как добавить свои настройки для темы, используя встроенные возможности WordPress, а именно Theme Customizer. Мощный инструмент, встроенный в ядро WP, для настройки тем.
ПредисловиеНедавно закончил делать верстку для заказчика и появилась необходимость установить ее на WP. Провел предварительные работы, сделал базовый скелет для темы и решил протестить на локальном сервере. И тут я заметил интересный пункт в меню админки «Настроить». да, я замечал этот пункт и раньше и даже видел как в других темах он применяется, но сам относился к нему скептически. Но тут закралась мысль, что сделать настройки нативными, т.е. встроенными в ядро WordPress не такая плохая идея. И тут я начал разбираться в вопросе.
Собственно все, что я узнал по теме я описал в статье. Кому интересно сразу почитать о плюсах/минусах и моем мнении прошу в конец статьи или .
Экшн!Итак, если у вас нет пункта меню «Внешний вид — Настроить» при активации вашей темы, то нужно его добавить. Делается это так:
Для этого создадим и откроем в корне темы файл functions.php и добавим туда такой код:
Add_action("admin_menu", function(){ add_theme_page("Настроить", "Настроить", "edit_theme_options", "customize.php"); });
Важно! Весь код должен находится между . Этим мы покажем серверу, что работаем с PHP.
Создаем секциюТеперь нам нужно добавить свои настройки. Делается это в 2 захода. Напрягли мозги. Напряжемся раз: добавляем секцию настроек.
В созданный нами ранее файл functions.php добавим такой код:
Add_action("customize_register", function($customizer){ $customizer->add_section("example_section_one", array("title" => "Мои настройки", "description" => "Пример секции", "priority" => 11,)); });
Мы создали хук и привязали к нему функцию. Метод add_section() как раз и добавляет секцию настроек. Он принимает 2 параметра:
$args — массив аргументов
title — как секция будет называться
description — описание секции (необязательно)
Добавляем настройку в секциюДобавление происходит в 2 этапа. Сначала создаем сами настройки, а затем контрол для нее, чтобы отобразить в секции.
Для добавления настроек напишем такой код в functions.php прямо после метода add_section(), но в внутри хука customize_register:
$customizer->add_setting("example_textbox", array("default" => "Сайт сайт"));
Метод add_setting() принимает два параметра:
$id — уникальный идентификатор
$args — массив аргументов
В массиве $args может быть несколько позиций, а именно:
default — значение настройки по-умолчанию
type — тип настройки
capability — права пользователя, необходимые для изменения данного параметра. Т.е. разные параметры могут видеть разные группы пользователей. Круто! (необязательно)
theme_supports — указывает на то, что текущая тема должна поддерживать описанную в параметре функцию (необязательно)
transport — как изменение настройки будет отображаться в окне предпросмотра. Обновление страницы или AJAX. По умолчанию страница обновляется при каждом обновлении настройки, но если вам интересно могу рассказать, как реализовать это на AJAX, без перезагрузки страницы. Пишите в комментах свои пожелания.
sanitize_callback — имя функции для фильтрации входных данных, в БД
sanitize_js_callback — имя функции для фильтрации выходных данных, из БД
Теперь добавим контрол к настройкам . Ниже добавим такой код:
$customizer->add_control("example_textbox", array("label" => "Настройка текста", "section" => "example_section_one", "type" => "text",));
Вот теперь мы можем увидеть нашу настройку.
// картинку
Метод add_control() принимает два параметра:
$id — уникальный идентификатор
$args — массив аргументов
В массиве $args может быть несколько позиций, а именно:
label — название настройки
description — описание
section — секцию, в которую будет помещен контрол и настройка
type — тип контрола (по-умолчанию: text)
choices — для типа с переключателями флажками, определяет список значений на выбор
priority — какой по счету будет располагаться секция или ее приоритет (по-умолчанию 10)
Но мы не вывели настройку в теме. Давайте займемся этим.
Выводим настройки в темеДля того, чтобы отобразить настройки в теме надо добавить его идентификатор в нужном месте. Сделать это легко, достаточно добавить конструкцию:
Функция get_theme_mod() принимает два аргумента^
$name — имя настройки, которую нужно получить
$default — значение по-умолчанию. Выведется, если настройки не существует
Другие типы контроловCheackBox (Флажок)
Позволяет включить или отключить, что либо.
$customizer->add_control("hide_text", array("type" => "checkbox", "label" => "Скрыть текст", "section" => "example_section_one",));
В теме выводится так:
Теперь, если вы не выбрали флажок, то этот текст не выведется. Полезно, если нужно скрыть. что нибудь.
Radio (Группа переключателей)Позволяет выбрать, какой либо 1 параметр из списка.
$customizer->add_setting("radio ", array("default" => "item_1")); $customizer->add_control("radio ", array("type" => "radio", "label" => "Пример переключателей", "section" => "example_section_one", "choices" => array("item_1" => "item_1", "item_2" => "item_2", "item_3" => "item_3",),));
Select (Список)Выпадающий список.
$customizer->add_setting("select", array("default" => "Вордпресса")); $customizer->add_control("select", array("type" => "select", "label" => "Кто мы?", "section" => "example_section_one", "choices" => array("Человеки" => "Человеки", "Стахановцы" => "Стахановцы", "Крутые ребята" => "Крутые ребята", "НЛО" => "НЛО",),));
Выпадающий список страницСоздает выпадающий список всех страниц сайта. Страницы генерируются самим WordPress.
$customizer->add_setting("page-setting", array("sanitize_callback" => "example_sanitize_integer")); $customizer->add_control("page-setting", array("type" => "dropdown-pages", "label" => "Выберите страницу:", "section" => "example_section_one",));
ПалитраПозволяет добавить палитру выбора цветов. К примеру, для заднего фона.
$customizer->add_setting("color-setting", array("default" => "#000000", "sanitize_callback" => "sanitize_hex_color",)); $customizer->add_control(new WP_Customize_Color_Control($customizer, "color-setting", array("label" => "Настройка цвета", "section" => "example_section_one", "settings" => "color-setting",)));
Позволяет загружать файлы через стандартный загрузчик WP. Работает через класс WP_Customize_Upload_Control. Будьте внимательны.
$customizer->add_setting("file-upload"); $customizer->add_control(new WP_Customize_Upload_Control($customizer, "file-upload", array("label" => "Загрузка файла", "section" => "example_section_one", "settings" => "file-upload")));
Тоже самое, что загрузка файлов, только ставятся ограничения на разрешения файлов. Принмаются только картинки. Удобно. если надо грузить только изображения. К примеру, для заднего фона. Работает по той же схеме, что пример выше, только используется класс WP_Customize_Image_Control.
$wp_customize->add_setting("img-upload"); $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, "img-upload", array("label" => "Загрузка изображения", "section" => "example_section_one", "settings" => "img-upload")));
Это еще не всеЕсли вы думаете, что на этом возможности встроенных настроек ограничиваются, то вы ошибаетесь. В них много чего интересного: добавление собственных настроек, обновление страницы через AJAX. Можете покопаться сами или пишите в комментариях, если хотите продолжения.
Плюсы и минусыА теперь подведем итоги и рассмотрим подводные камни и преимущества данного метода.
Плюсы:- Настройки встроены в ядро WordPress. Это значит, что при переносе сайта или его обновлении на новую версию у нас сразу будут настройки без скачки обновлений фрейморков и несовместимости
- Очень легко добавить. Достаточно базовых знаний по WP и PHP, чтобы добавить настройки в тему. Гораздо проще, чем подключать сторонние решения
- Добавление своих типов настроек. Можно расширить функционал. Есть такая возможность, что очень радует.
- Изменения появляются сразу в окне предпросмотра.
- Нет поддержки визуального редактора для текста. Это серьезный минус для сложных проектов.
- Недостаточно типов настроек. Очень много чего нет, а хотелось бы. К примеру, тот же слайдер с неограниченным количеством слайдов. Отчасти решается возможностью добавить свой контрол. Но это лишние телодвижения.
- Нет импорта/экспорта. Если вы захотите переустановить тему. то все настройки придется заново вбивать вручную! Что крайне неудобно.
- Вы ограничены в свободе размещения блоков. За простоту надо платить. Вы не можете разместить блок с предупреждением или информацией где вздумается, все в рамках заданного формата. Для кого-то неважно, для других критично. Каждый реашет сам.
Что касается моего мнения, то я считаю, что Theme Customizer пока сыроват. Да. у него большой потенциал и я уверен в будущем мы увидим много расширений и улучшений для него. Но сейчас разрабатывать сложные проекты на нем не получится.
Если вы делаете простенькую тему или тренируетесь, то обратите внимание на эту «фишку» WP. Если же вы уже серьезно работаете с каким либо и думаете, стоит, переходит или нет, то лучше не стоит. Пока, не стоит. Но определенно стоит посмотреть, что это за «зверь». Ведь потенциал у него большой.
Но, как говорится, каждый решает сам по своему опыту и сложности проектов. На этом я с вами прощаюсь до следующей статьи. Всего вам доброго. И да прибудет с вами терпение в нелегком изучении 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
