Создаем страницу настроек (Options Page) для темы WordPress

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

Давайте сделаем, для примера, простейшую страницу настроек для сайта-визитки некой фирмы, в виде формы, состоящей из полей различных типов (текстовых полей и областей, поля выбора, «чекбокса»)…

Например, для ввода номера телефона мы используем обычное текстовое поле. Для текста обращения к посетителям сайта на главной странице — текстовую область (textarea). Для выбора положения сайдбара (боковой колонки) — поле выбора (select). Для указания: показывать, или не показывать банер на главной странице — «галочку» (checkbox)

Код нашей Options Page мы будем писать в отдельном файле ( назовем его options_page.php ) в директории нашей WP-темы.

Для начала, представим схематично порядок работы нашего сценария:

[ Инициализация страницы настроек ] -> [ Обработка POST — данных и вывод результата ] -> [ Вывод формы с уже заполненными актуальными данными полями]

Читайте также:  Настраиваемые навигационные меню в шаблоне Wordpress

Итак, создадим обычную HTML-форму:

[sourcecode language=»html»]
<form method="post" action="options.php">
<table width="600" border="0">
<tr>
<td>Телефон фирмы:</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>Приветствие посетителям сайта:</td>
<td><textarea name="hello_text"></textarea></td>
</tr>
<tr>
<td>Расположение сайдбара:</td>
<td><select name="sidebar_pos">
<option value="left">Слева</option>
<option value="right">Справа</option>
</select> </td>
</tr>
<tr>
<td>Показывать банер:</td>
<td><input type="checkbox" name="show_baner" value="1" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Применить" /></td>
</tr>
</table>
</form>
[/sourcecode]

Как видно из кода формы, мы будем работать с POST переменными: phone, hello_text, sidebar_pos, show_baner

Теперь добавим перед нашей формой функции ее обработки…

Для начала необходимо инициализировать страницу настроек (дать знать о ней движку WP), а так же вывести ссылку на нее в главном меню панели администратора:

[sourcecode language=»php»]
<?php
add_action( ‘admin_init’, ‘theme_options_init’ );
add_action( ‘admin_menu’, ‘theme_options_add_page’ );

function theme_options_init(){
register_setting( ‘wpuniq_options’, ‘wpuniq_theme_options’);
}

function theme_options_add_page() {
add_theme_page( __( ‘Настройки Темы’, ‘WP-Unique’ ), __( ‘Настройки Темы’, ‘WP-Unique’ ), ‘edit_theme_options’, ‘theme_options’, ‘theme_options_do_page’ );
}
function theme_options_do_page() { global $select_options; if ( ! isset( $_REQUEST[‘settings-updated’] ) ) $_REQUEST[‘settings-updated’] = false;
?>
[/sourcecode]

Как мы видим, используя функции WordPress мы создали и зарегистрировали страницу настроек темы «WP-Unique» (это название темы)…

Теперь выведем результат обработки формы:

[sourcecode language=»php»]
<div class="wrap">
<?php screen_icon(); echo "<h2>". __( ‘Настройки Темы’, ‘WP-Unique’ ) . "</h2>"; ?>
<?php if ( false !== $_REQUEST[‘settings-updated’] ) : ?>
<div id="message" class="updated">
<p><strong><?php _e( ‘Настройки сохранены’, ‘WP-Unique’ ); ?></strong></p>
</div>
<?php endif; ?>
</div>
[/sourcecode]

Читайте также:  Концепция современного дизайна

Затем выведем саму форму, обработав должным образом значение ее полей. Обратите внимание на имена полей и значения, присвоенные им при выводе…

[sourcecode language=»php»]
<form method="post" action="options.php">
<?php settings_fields( ‘wpuniq_options’ ); ?>
<?php $options = get_option( ‘wpuniq_theme_options’ ); ?>
<table width="600" border="0">
<tr>
<td>Телефон фирмы:</td>
<td><input type="text" name="wpuniq_theme_options[phone]" id="wpuniq_theme_options[phone]" value="<?php echo $options[phone];?>" /></td>
</tr>
<tr>
<td>Приветствие посетителям сайта:</td>
<td><textarea name="wpuniq_theme_options[hello_text]" id="wpuniq_theme_options[hello_text]"><?php echo $options[hello_text];?></textarea></td>
</tr>
<tr>
<td>Расположение сайдбара:</td>
<td><select name="wpuniq_theme_options[sidebar_pos]" id="wpuniq_theme_options[sidebar_pos]">
<option value="left"<?php if($options[sidebar_pos]==’left’) echo ‘ selected="selected"’;?>>Слева</option>
<option value="right"<?php if($options[sidebar_pos]==’right’) echo ‘ selected="selected"’;?>>Справа</option>
</select> </td>
</tr>
<tr>
<td>Показывать банер:</td>
<td><input type="checkbox" name="wpuniq_theme_options[show_baner]" id="wpuniq_theme_options[show_baner]" value="1"<?php if($options[show_baner]==’1′) echo ‘ checked="checked"’;?> /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Применить" /></td>
</tr>
</table>
</form>
[/sourcecode]

Соберем весь код:

[sourcecode language=»php»]
<?php
add_action( ‘admin_init’, ‘theme_options_init’ );
add_action( ‘admin_menu’, ‘theme_options_add_page’ );

function theme_options_init(){
register_setting( ‘wpuniq_options’, ‘wpuniq_theme_options’);
}

function theme_options_add_page() {
add_theme_page( __( ‘Настройки Темы’, ‘WP-Unique’ ), __( ‘Настройки Темы’, ‘WP-Unique’ ), ‘edit_theme_options’, ‘theme_options’, ‘theme_options_do_page’ );
}
function theme_options_do_page() { global $select_options; if ( ! isset( $_REQUEST[‘settings-updated’] ) ) $_REQUEST[‘settings-updated’] = false;
?>

<div class="wrap">
<?php screen_icon(); echo "<h2>". __( ‘Настройки Темы’, ‘WP-Unique’ ) . "</h2>"; ?>
<?php if ( false !== $_REQUEST[‘settings-updated’] ) : ?>
<div id="message" class="updated">
<p><strong><?php _e( ‘Настройки сохранены’, ‘WP-Unique’ ); ?></strong></p>
</div>
<?php endif; ?>
</div>

Читайте также:  Структура темы в WordPress – будь в теме

<form method="post" action="options.php">
<?php settings_fields( ‘wpuniq_options’ ); ?>
<?php $options = get_option( ‘wpuniq_theme_options’ ); ?>
<table width="600" border="0">
<tr>
<td>Телефон фирмы:</td>
<td><input type="text" name="wpuniq_theme_options[phone]" id="wpuniq_theme_options[phone]" value="<?php echo $options[phone];?>" /></td>
</tr>
<tr>
<td>Приветствие посетителям сайта:</td>
<td><textarea name="wpuniq_theme_options[hello_text]" id="wpuniq_theme_options[hello_text]"><?php echo $options[hello_text];?></textarea></td>
</tr>
<tr>
<td>Расположение сайдбара:</td>
<td><select name="wpuniq_theme_options[sidebar_pos]" id="wpuniq_theme_options[sidebar_pos]">
<option value="left"<?php if($options[sidebar_pos]==’left’) echo ‘ selected="selected"’;?>>Слева</option>
<option value="right"<?php if($options[sidebar_pos]==’right’) echo ‘ selected="selected"’;?>>Справа</option>
</select> </td>
</tr>
<tr>
<td>Показывать банер:</td>
<td><input type="checkbox" name="wpuniq_theme_options[show_baner]" id="wpuniq_theme_options[show_baner]" value="1"<?php if($options[show_baner]==’1′) echo ‘ checked="checked"’;?> /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Применить" /></td>
</tr>
</table>
</form>

<?php

>
[/sourcecode]

Теперь, чтобы страница настроек «заработала», необходимо подключить ее в коде файла functions.php

[sourcecode language=»php»]
<?php include_once(‘options_page.php’);?>
[/sourcecode]

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

[sourcecode language=»php»]<?php $options = get_option( ‘wpuniq_theme_options’ ); ?>
[/sourcecode]

Теперь значения этих переменных доступны нам в маасиве $options, например, для вывода телефона фирмы, используем:

[sourcecode language=»php»]<?php echo $options[phone]; ?>
[/sourcecode]

Вам может быть интересно:

  • Guest

    не работает! Warning: Cannot modify header information — headers already sent by (output started at …wwwwp-contentthemesCustomThemeoptions_theme.php:1) in …wwwwp-includespluggable.php on line 1178

    • Артур

      Проверьте, как Вы сохраняете файлы. Возможно, у Вас UTF-8 с BOM. Нужно обязательно сохранять без BOM.

  • 111

    не пашет

  • homeandriy

    как добавить форму загрузки изображения?

  • Благодарю за рабочее решение!
    Долго думал, куда же поставить $options = get_option( ‘wpuniq_theme_options’ ); — решил вставить в functions.php и не ошибся:)
    Спасибо!

  • Алексе Яцун

    Спасибо статья очень помогла!!! Нашел Ошибку!! У Вас «» а должно быть «»!

  • Alexander Shapoval

    Строка if($options[show_baner]==’1′) echo ‘ checked=»checked»‘;

    Может вернуть ошибку: Warning: Illegal string offset, в том случае если в $options строка а не массив. Кто подскажет как исправить условие проверки checked без костылей?

    • Alexander Shapoval

      Без костылей:
      надо дописать (array)
      $options = (array) get_option(‘

      либо использовать функцию вордпрес: checked(‘1’, $options[‘retina’]);

      Там перед ?php и после ? добавьте скобочки

  • Mimic

    Подскажите все-таки как добавить форму загрузки изображения (если это возможно)?

  • Aleksandr Osadchyy

    Всё отлично работает, спасибо!