Создаем страницу настроек для шаблона WordPress

wordpress options page

Большинство премиум-шаблонов WordPress имеет свою страницу настроек темы, но что же делать, когда таковых опций нету?!

Страница настроек шаблона – это весьма удобный инструмент, который позволяет изменить определенные параметры, такие как логотип, цветовую гамму сайта, размеры и расположения блоков, код Google Analytics и другие данные и переменные, при этом не нужно копаться в коде php Вашего шаблона, а всего лишь изменить удобным способом эти данные через Админ-панель сайта.

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

Код нашей странички Настройки Темы мы будем писать в отдельном файле options_page.php в директории шаблона WP.

Для начала создадим обычную форму HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form action="options.php" method="post">
<table border="0" width="600">
<tbody>
<tr>
<td>Телефон:</td>
<td><input name="phone" type="text" /></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 name="show_baner" type="checkbox" value="1" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Применить" /></td>
</tr>
</tbody>
</table>
</form>

Теперь делаем инициализацию страницы настроек, а так же выводим ссылку на нее в главном меню панели администратора с названием “Настройки Темы”:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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;
?>

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

1
2
3
4
5
6
7
8
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

Весь код будет выглядеть следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?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>
 
<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 } ?-->

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

1
<?php include_once('options_page.php');?>

Теперь, для вывода переменных, нужно сделать доступ к ним. Делается при помощи функции get_option(). Для примера, в шапке сайта (header.php) нужно вывести телефон, который мы указали в “Настройках темы”, для этого в header.php делаем доступ к данным настроек:

1
<?php $options = get_option( 'wpuniq_theme_options' ); ?>

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

1
<?php echo $options[phone]; ?>

wordpress options page



Опубликовано 01.03.2015 в Wordpress

(8) Комментариев

  1. Open
    Sunday March 8th, 2015 at 01:58 PM · Reply

    Apipceiatron for this information is over 9000-thank you!

  2. Андрей
    Monday June 1st, 2015 at 12:48 PM · Reply

    Функция
    add_theme_page( __( ‘Настройки Темы’, ‘WP-Unique’ ), __( ‘Настройки Темы’, ‘WP-Unique’ ), ‘edit_theme_options’, ‘theme_options’, ‘theme_options_do_page’ );
    не работает в последнем WP

    ее нужно заменить на

    add_menu_page( __( ‘Настройки Темы’, ‘WP-Unique’ ), __( ‘Настройки Темы’, ‘WP-Unique’ ), ‘edit_theme_options’, ‘theme_options’, ‘theme_options_do_page’ );

    • administrator
      Tuesday June 2nd, 2015 at 12:37 PM · Reply

      Проверено на 4.2.2 – Функция add_theme_page() работает.

  3. WilliamCof
    Thursday June 18th, 2015 at 08:32 PM · Reply

    For my reading purposes, I all the time used to get the video lectures from YouTube, because it is easy to fan-out from there.
    Legendario.

  4. Chupacabras
    Saturday April 9th, 2016 at 01:44 AM · Reply

    Для того чтобы создать страницу войдите в WordPress с достаточными привилегиями для создания статей. Выберите Administration Pages Add New для того чтобы начать работу с новой страницей.

    • administrator
      Tuesday May 3rd, 2016 at 05:20 PM · Reply

      да, но речь идет о создании страницы настройками для шаблона WordPress

  5. Анна
    Saturday May 13th, 2017 at 07:02 PM · Reply

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

    • administrator
      Tuesday May 16th, 2017 at 12:21 AM · Reply

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

Оставить комментарий

Your email address will not be published. Required fields are marked *

Back to Top