VDS Хостинг со скидкой 20%. Размещение в РФ. Собственный Дата-Центр.

Своя страница настроек (опции) для темы WordPress

 3 июня 2018      
 WordPress      
 Комментариев еще нет      
 94

В этой статье я расскажу как создать свою собственную страницу настроек для темы WordPress.

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

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

Как подключить свою страницу настроек к теме WordPress

Чтобы ваша тема использовала индивидуальную страницу настроек добавьте следующий код в файл functions.php вашей темы:

/* Подключаем страницу настроек темы */
get_template_part('theme-options');

Затем нужно создать файл theme-options.php в корне вашей темы. Это и будет страница настроек вашего шаблона Вордресс.

Пример страницы настроек

Ниже приведу пример моей страницы настроек, в которой есть два поля, значения из которых вставляются в секции <HEAD> и перед закрывающим тегом </BODY> вашего шаблона соответственно. Вы можете взять ее за образец и исправить (дополнить) на свое усмотрение:

<?php
$options_page = 'theme-options.php'; 
 
/*
 * Функция, добавляющая страницу в пункт меню Настройки
 */
function theme_options() {
	global $options_page;
	add_options_page( 'Параметры темы', 'Параметры темы', 'manage_options', $options_page, 'theme_options_page');  
}
add_action('admin_menu', 'theme_options');

/**
 * Возвратная функция (Callback)
 */ 
function theme_options_page(){
	global $options_page;
	?><div class="wrap">
		<h2>Дополнительные параметры шаблона</h2>
		<form method="post" enctype="multipart/form-data" action="options.php">
			<?php 
			settings_fields('theme_options'); 
			do_settings_sections($option_page);
			?>
			<p class="submit">  
				<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />  
			</p>
		</form>
	</div><?php
}

/*
 * Регистрируем настройки
 * Мои настройки будут храниться в базе под названием theme_options (это также видно в предыдущей функции)
 */
function theme_option_settings() {
	global $options_page;
	register_setting( 'theme_options', 'theme_options', 'theme_validate_settings' ); 
 
	// Добавляем секцию
	add_settings_section( 'theme_section_1', 'Текстовые поля ввода', '', $options_page );
 
	// Создадим textarea_1 в первой секции
	$theme_field_params = array(
		'type'      => 'textarea',
		'id'        => 'my_textarea_head',
		'desc'      => 'Эти данные будут вставлены перед закрывающим тегом &lt;/HEAD>.'
	);
	add_settings_field( 'my_textarea_field_head', 'Перед закрывающим тегом &lt;/HEAD>', 'theme_option_display_settings', $options_page, 'theme_section_1', $theme_field_params );

	// Создадим textarea_2 в первой секции
	$theme_field_params = array(
		'type'      => 'textarea',
		'id'        => 'my_textarea_body',
		'desc'      => 'Эти данные будут вставлены перед закрывающим тегом &lt;/BODY>.'
	);
	add_settings_field( 'my_textarea_field_body', 'Перед закрывающим тегом &lt;/BODY>', 'theme_option_display_settings', $options_page, 'theme_section_1', $theme_field_params );
	
}
add_action( 'admin_init', 'theme_option_settings' );

/*
 * Функция отображения полей ввода
 * Здесь задаётся HTML и PHP, выводящий поля
 */
function theme_option_display_settings($args) {
	extract( $args );
 
	$option_name = 'theme_options';
 
	$o = get_option( $option_name );
 
	switch ( $type ) {  
		case 'textarea':  
			$o[$id] = esc_attr( stripslashes($o[$id]) );
			echo "<textarea class='code large-text' cols='50' rows='10' type='text' id='$id' name='" . $option_name . "&#91;$id&#93;'>$o[$id]</textarea>";  
			echo ($desc != '') ? "<br /><span class='description'>$desc</span>" : "";  
		break;

	}
}
 
/*
 * Функция проверки правильности вводимых полей
 */
function theme_validate_settings($input) {
	foreach($input as $k => $v) {
		$valid_input[$k] = trim($v);
 
		/* Вы можете включить в эту функцию различные проверки значений, например
		if(! задаем условие ) { // если не выполняется
			$valid_input[$k] = ''; // тогда присваиваем значению пустую строку
		}
		*/
	}
	return $valid_input;
}
 

Выглядеть в админке WordPress она будет так:

Рекомендую прочесть:  Время генерации страницы, количество SQL запросов и объем памяти Wordpress

Своя страница настроек (опции) для темы WordPress

Как использовать данные из собственной страницы настроек

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

<?php 
$theme_all_options = get_option('theme_options');
echo $theme_all_options['my_textarea_head']; 
?>

Его необходимо добавить в файл header.php вашей темы перед закрывающим тегом </head>.

Для второго поля используем похожий код, но теперь вставляем его перед закрывающим тегом </body> файла footer.php вашего шаблона:

<?php 
$theme_all_options = get_option('theme_options');
echo $theme_all_options['my_textarea_body']; 
?>

Результаты работы страницы настроек

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

Благодарности

При написании статьи были использованы следующие источники:

  1. https://misha.blog/wordpress/option-pages.html
Поделись этой страницей с друзьями!

Прочтите это обязательно

Обзор и тестирование VDS от FirstVDS. Версия 2018

Четыре года назад я опубликовал мой первый обзор услуг хостинга от компании ...

Обзоры хостинга firstvds vds vps хостинг Далее

Автоматическое создание мета тегов description и keywords в WordPress

Этой статьёй я хочу поставить жирную точку в вопросе автоматического создания метатегов description ...

WordPress decription keywords wordpress Далее

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 87 | 0,179 сек. | 8.55 МБ
доступность сайта