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

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

Как правило, на ней можно изменить определенные параметры, такие как логотип, цвет текста, установить код Google Analytics и так далее. Возможно, это одна из первых вещей, которые вы делаете, приступая к настройке WordPress.

Хотя есть некоторые бесплатные шаблоны WordPress, которые не содержат страницу настроек темы, премиум темы WordPress обычно имеют такую опцию.

Из сегодняшней статьи вы узнаете, как создать простую страницу настроек темы WordPress.

Ресурсы, необходимые нам для работы:

• Установленный WordPress версии 3.5 или выше;
• Bots Custom WordPress Theme (собственная тема Сэма);
• Базовые знания по Кодексу WordPress.

Шаг 1 - Подготовка файлов

Перед тем, как приступить к созданию страницы настроек темы, необходимо подготовить саму тему. Для этой статьи я создал простую тему WordPress с помощью Bootstrap 3. Вы можете скачать ее здесь. Она называется bots WordPress theme. В папке темы вы можете видеть следующие файлы:

• style.css;
• sidebar.php;
• скриншоты (png-файл);
• index.php;
• header.php;
• functions.php;
• footer.php;
• папка js;
• папка images;
• папка fonts;
• папка css.

Шаг 2 - Установка и активация темы

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

Далее нам нужно активировать тему. Переходим Внешний вид - Темы и активируем bots WordPress theme:

Шаг 3 - Регистрация страницы настроек

Теперь, когда все настроено, откройте файл functions.php и вставьте данный код в нижней части этого файла:

//Настройки панели администрирования
//Регистрация функции настроек
function theme_settings_init(){
	register_setting( 'theme_settings', 'theme_settings' );
}

// Добавление настроек в меню страницы
function add_settings_page() {
add_menu_page( __( 'Theme Settings' ), __( 'Theme Settings' ), 'manage_options', 'settings', 'theme_settings_page');
}

В приведенном выше коде была создана функция theme_settings_init, которая содержит код создания меню. А далее зарегистрирована с помощью обращения действия admin_menu_page.

Шаг 4 - Добавление действий и создание опции сохранения

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

//Добавление действий
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

//Начало страницы настроек
function theme_settings_page() {

if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;

?>

<div>

<div id="icon-options-general"></div>
<h2 id="title"><?php _e( 'Theme Settings' ) //your admin panel title ?></h2>

<?php
//вывод сообщения о том, что значение опции сохранено
if ( false !== $_REQUEST['updated'] ) : ?>
<div><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
<?php endif; ?>

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

<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>

Шаг 5 - Создание полей

Теперь добавим поля, необходимые для страницы настроек темы. Они будут включать в себя простое текстовое поле и текстовые области с соответствующими им названиями опций темы:

<table>

<!-- Пользовательский логотип -->
<tr valign="top">
<th scope="row"><?php _e( 'Custom Logo' ); ?></th>
<td><input id="theme_settings[custom_logo]" type="text" size="40" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" />
</td>
</tr>

<!-- Баннер 743 X 82 баннер -->
<tr valign="top">
<th scope="row"><?php _e( '743px X 82px banner' ); ?></th>
<td><textarea id="theme_settings[banner1]" rows="5" cols="36" name="theme_settings[banner1]"><?php esc_attr_e( $options['banner1'] ); ?></textarea></td>
</tr>

<!-- Баннер 268 X 268 баннер -->
<tr valign="top">
<th scope="row"><?php _e( '268px X 268px banner' ); ?></th>
<td><textarea id="theme_settings[banner2]" rows="5" cols="36" name="theme_settings[banner2]"><?php esc_attr_e( $options['banner2'] ); ?></textarea>
</td>
</tr>

<!-- Текст в футере -->
<tr valign="top">
<th scope="row"><?php _e( 'Footer Text' ); ?></th>
<td><input id="theme_settings[footer]" type="text" size="40" name="theme_settings[footer]" value="<?php esc_attr_e( $options['footer'] ); ?>" />
</td>
</tr>

<!-- Google Analytics -->
<tr valign="top">
<th scope="row"><?php _e( 'Google Analytics' ); ?></th>
<td>
<br />
<textarea id="theme_settings[tracking]" name="theme_settings[tracking]" rows="5" cols="36"><?php esc_attr_e( $options['tracking'] ); ?></textarea></td>
</tr>

</table>

<p><input name="submit" id="submit" value="Save Changes" type="submit"></p>
</form>

</div>

Как видите, мы создали следующие поля:

• URL-адрес пользовательского логотипа (Text box);
• Баннер 743 на 82 пикселя (Text Area);
• Баннер 268 на 268 пикселей (Text Area);
• Текст в футере (Text box);
• Google Analytics (Text Area).

Используя разметку таблицы, вы можете легко добавить еще несколько полей. Просто добавьте нужное поле и задайте ему уникальный идентификатор и имя, которые будут использоваться в дальнейшем PHP-коде get_option.

Шаг 6 - Валидация

Теперь нужно проверить поля, используя wp_filter_nohtml_kses и wp_filter_post_kses, очистить и обезопасить содержащийся HTML-код:

<?php
}
//валидация
function options_validate( $input ) {
	global $select_options, $radio_options;
	if ( ! isset( $input['option1'] ) )
    	$input['option1'] = null;
	$input['option1'] = ( $input['option1'] == 1 ? 1 : 0 );
	$input['sometext'] = wp_filter_nohtml_kses( $input['sometext'] );
	if ( ! isset( $input['radioinput'] ) )
    	$input['radioinput'] = null;
	if ( ! array_key_exists( $input['radioinput'], $radio_options ) )
    	$input['radioinput'] = null;
	$input['sometextarea'] = wp_filter_post_kses( $input['sometextarea'] );
	return $input;
}
?>

Шаг 7 - Вызов опций

Чтобы включить все функции, которые вы только что создали, нужно добавить следующие коды в верхнюю часть каждого из PHP кодов options:

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

Шаг 8 - Добавление пользовательского логотипа

Чтобы добавить собственный логотип, вам необходимо открыть файл header.php и добавить следующий код. Обратите внимание, что вам нужно создать оператор if для проверки, задан ли адрес пользовательского логотипа или будет отображаться логотип по умолчанию:

<div id="logo" href="<?php echo home_url(); ?>">
<?php
//get theme options
$options = get_option( 'theme_settings' ); ?>
<?php if($options['custom_logo']) { ?>
<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img src="<?php echo $options['custom_logo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
<?php } else { ?>
<h2><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
<?php } ?>
</div>

Шаг 9 - Добавление рекламных баннеров

Для рекламных баннеров, у вас есть два варианта: 743 на 82 пикселя и 268 на 268 пикселей. Для баннера 743 на 82 пикселя добавьте следующий код в файл index.php выше списка выдержек из статей:

<div>
<?php $options = get_option( 'theme_settings' ); ?>
<?php echo $options['banner1']; ?>
</div>

Для баннера 268 на 268 пикселей добавьте следующий код ниже функции вызова сайдбара:

<?php echo $options['banner2']; ?>

Шаг 10 - Добавление текста футера

Добавление текста футера производится точно так же, как и вставка кода собственного логотипа. Однако, на этот раз, нам нужно проверить наличие заданного текста, а не изображения. Откройте файл footer.php и скопируйте данный код в элемент div с классом col-md-12:

<div id="footer" role="contentinfo">
<?php
 //получение опций темы
 $options = get_option( 'theme_settings' ); ?>
 <?php if($options['footer']) { ?>
<p><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php echo $options['footer']; ?></a></p>
<?php } else { ?>
<p>© 2014 <a href="http://www.1stwebdesigner.com/">1stwebdesigner</a>. All rights reserved.</p>
<?php } ?>
</div>

Шаг 11 - Подключение кода Google Analytics

Чтобы подключить код Google Analytics, вам нужно открыть файл header.php и скопировать в него данный код ниже ссылок на файлы JS:

<?php
//Google Analytics
$options = get_option( 'theme_settings' );
echo stripslashes($options['tracking']);
?>

Готовая страница

Заключение

Вот и все! Вот как вы можете создать свою собственную страницу настроек темы. Хотя мы сделали это вручную, существует много библиотек настроек WordPress, которые вы можете использовать, чтобы задать более расширенные и динамические параметры страницы.

Сообщите мне, что вы думаете об этой статье, в комментариях. Увидимся в следующий раз!