Как создать пользовательские страницы администрирования в панели управления WordPress

Статья написана:
  • Избранные статьи
  • Обновлено: Jun 30, 2013

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

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

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

Шаг 1: создание и редактирование тематических функций.

Если вы разработали свою собственную тему, есть вероятность, что вы создали файл functions.php для сопряжения с существующими файлами шаблонов. Это относительно продвинутые варианты, и большинство дизайнеров просто пропускают его. В этом случае важно открыть выбранный вами FTP-клиент и указать ему следующий URL-адрес сервера, на котором находятся файлы темы:

/ Public_html / WP-содержание / темы / YOUR-THEME-FOLDER /

Попав в эту папку, дважды проверьте, что файл «functions.php» отсутствует, а затем используйте программу редактирования текста, чтобы создать новый файл с именем «functions.php». Затем этот файл можно сохранить и загрузить на сервер через FTP. Его можно редактировать прямо на сервере, что устраняет необходимость в программе для редактирования текста.

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

$ longname = «Тема разработки панели администрирования»;
$ shortcode = "apdt";

Эти переменные служат разным целям. Переменная $ longname будет использоваться для печати названия темы в фактической панели параметров администрирования. По этой причине рекомендуется, чтобы разработчики присваивали точное имя темы этой переменной, чтобы избежать путаницы среди пользователей этой темы. Переменная $ shortcode должна состоять из строчных букв без каких-либо знаков препинания, поскольку она будет использоваться для идентификации элементов формы в самом коде. В этом примере была использована простая аббревиатура на основе полного названия темы; это можно настроить по вкусу пользователя.

Шаг 2: определение настраиваемых настроек с помощью массивов PHP

Во-первых, важно сообщить теме название панели администрирования. Это будет напечатано выше всех потенциальных настроек и поможет повысить ясность цели для начинающих пользователей. Это делается путем добавления следующего массива к тегу $ settings в файле «functions.php»:

$ settings = array (
array ("name" => $ longname. "Параметры внешнего вида",
"Type" => "title"),

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

array ("type" => "open"),

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

массив (
"Name" => "Пользовательский текст нижнего колонтитула темы",
"Desc" => "Это текст, отображаемый в самом конце каждой страницы, содержащейся в этой теме.",
"Id" => $ shortcode. "_ Custom_footer",
"Type" => "text",
"Std" => "Экспериментальная тема v1.0. Разработано Джоном Доу. Больше тем здесь. "),

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

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

Описание изделия: Это краткое описание, которое сопровождает пользовательские настройки, и это отображается пользователям.

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

Тип:: Это определяет, является ли элемент формы текстовой строкой, текстовым полем, выпадающим меню, переключателем или флажком.

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

Шаг 3: сообщение WordPress для включения доступа к новой странице параметров

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

function experimental_theme_save_values ​​() {
глобальное $ longname, $ shortcode, $ settings;
if ($ _GET ['page'] == basename (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ settings as $ value) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); }
foreach ($ settings as $ value) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } else {delete_option ($ value ['id']); }}
заголовок («Местоположение: themes.php? page = functions.php & сохранено = true»);
умереть;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ settings as $ value) {
delete_option ($ value ['id']); }
заголовок («Местоположение: themes.php? page = functions.php & reset = true»);
умереть;
}
}
add_menu_page ($ longname. «Настройки внешнего вида», «». $ longname. »Настройки внешнего вида», «edit_themes», базовое имя (__ FILE__), «экспериментальный_теод_савья_значений»);

Этот кусок кода делает две вещи. Во-первых, он позволяет сохранить настройки темы через панель параметров администрирования. Во-вторых, он помещает независимую кнопку в боковую панель WordPress Dashboard, которая позволяет пользователю щелкнуть по ней и перейти непосредственно к панели параметров темы. Он помечен «Настройки внешнего вида», как и сама страница. Последовательность - это ключ к устранению путаницы и перенаправлению пользователей на страницу без специального указания им перейти на панель параметров для настройки внешнего вида темы.

Шаг 4: добавление сообщений об ошибках и закрытие файла PHP

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

function experimental_theme_save_values ​​() {
глобальное $ longname, $ shortcode, $ settings;
if ($ _REQUEST ['сохранено']) эхо '
'. $ THEMENAME. настройки внешнего вида были успешно сохранены.
';
if ($ _REQUEST ['reset']) echo '
'. $ THEMENAME. настройки внешнего вида были успешно сброшены.
';

Под этими двумя строками кода секция PHP файла functions.php может быть закрыта с помощью тега?> End. Ниже этого кода XHTML будет размещен, чтобы стилизовать элементы, используя стандартную таблицу стилей WordPress Dashboard.

Шаг 5: предоставление страницы параметров.

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

<div class = "wrap">
<h2> <? php echo $ longname; ? > Настройки </ h2>

<form method = "post" action = "options.php">

<? php break; case 'text':? >

<tr>
<td width = ”20%” rowspan = ”2 ″ valign =” middle ”> <strong> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width = ”80%”> <input style = ”width: 100%;” name = ”<? php echo $ value ['id']; ? > ”Id =” <? Php echo $ value ['id']; ? > ”Type =” <? Php echo $ value ['type']; ? > ”Value =” <? Php if (get_settings ($ value ['id'])! = “”) {Echo get_settings ($ value ['id']); } else {echo $ value ['std']; }? > »/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<? php break;}? >

<input type = ”submit” value = ”<? php _e (« Сохранить настройки темы »)? > »/>

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

Шаг 9: включение настраиваемой опции для текущей темы

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

<? php echo $ apdt_custom_footer; ? >

Этот текст вызывает пользовательский массив для текста нижнего колонтитула, который был определен ранее, и, согласно выражению «Echo», печатает этот текст в нижнем колонтитуле. Этот тег может содержаться в любых тегах XHTML, которые пользователь сочтет нужным, но он не будет отображаться без добавления кода в заголовок сайта.

В заголовке тема должна быть указана для поиска пользовательских параметров, установленных в панели инструментов WordPress, и она должна знать переменные, которые определены в пользовательском файле «functions.php», чтобы он мог распечатать свой контент на веб-сайт. Это делается путем размещения следующей переменной PHP в заголовке веб-сайта (обычно это файл «header.php»):

<? php global $ settings;
foreach ($ settings as $ value) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

Это все, что нужно сделать. Теперь каждая опция, определенная в файле custom functions.php, может быть отражена во внешнем виде страницы, просто добавив пользовательскую переменную PHP, в которой предполагаемые настройки и контент должны вступить в силу.

Шаг 10: проверьте новые параметры и страницу параметров

Никакие усилия по разработке WordPress не будут полностью завершены, пока они не будут тщательно протестированы на наличие ошибок, ошибок и случайных ошибок в коде PHP, помещенном в файл «functions.php». Тем не менее, пришло время для тестирования! Войдите в панель управления WordPress и, если тема, над которой вы работали, в данный момент не выбрана, обязательно перейдите в категорию «Внешний вид» на боковой панели и активируйте соответствующую тему.

Оттуда проверьте несколько вещей:

  1. Убедитесь, что ссылка на настройки темы отображается как отдельная сущность на боковой панели под заголовком категории «Настройки» на боковой панели.
  2. Убедитесь, что параметр персонализированной настройки текста нижнего колонтитула доступен на панели управления настраиваемых опций; измените содержание нижнего колонтитула по умолчанию и сохраните предпочтение. Убедитесь, что он сохраняет без ошибок.
  3. Перейдите на ваш реальный общедоступный веб-сайт и убедитесь, что отображаются изменения, сделанные в панели мониторинга относительно содержимого нижнего колонтитула.
  4. Если все работает правильно, вздохните с облегчением и наслаждайтесь первой страницей панели параметров темы WordPress.

О Джерри Лоу

Основатель WebHostingSecretRevealed.net (WHSR) - обзора хостинга, которому доверяют и используют пользователи 100,000. Более чем 15-летний опыт в веб-хостинге, партнерском маркетинге и SEO. Вкладчик в ProBlogger.net, Business.com, SocialMediaToday.com и многое другое.

Подключение: