Главная
Wordpress
Как создать страницу настроек темы без плагина WordPress
  • 01 Мар 2015г
  • 1343
  • 8
  • Рубрика: Wordpress

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

Настройки темы

Доброго времени суток. 🙂

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

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

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

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

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

Страница настроек WordPress

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

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

Для начала Вы должны определится как именно вы подключите код страницы. Есть два варианта.

Первый простой, все добавляем в самый конец вашего functions.php после ?> и все.

Второй способ - нужно создать файл settings.php и в него добавить весь код, после подключить его в functions.php следующим образом.

include('/settings.php');

Когда создадите settings.php, перед тем как добавлять в него код убедитесь, что он сохранен в правильной кодировке - UTF-8 без BOM. Редактировать файлы, лучше всего в программе Notepadd++.

Теперь начинаем добавлять сам код. Сначала зарегистрируем нашу функцию.

<?php
//Страница настроек темы
//Регистрация функции настроек
function theme_settings_init(){
	register_setting( 'theme_settings', 'theme_settings' );
}

Теперь добавим нашу страницу в админку в меню слева.

// Добавление Страницы настроек в меню
function add_settings_page() {
add_menu_page( __( 'Опции темы' ), __( 'Опции темы' ), 'manage_options', 'settings', 'theme_settings_page');
}
//Добавление действий
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

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

Пункт меню опции темы

Добавим действия и функцию сохранения опций нашей страницы

//Сохранение настроек
function theme_settings_page() { 
global $select_options; if ( ! isset( $_REQUEST['settings-updated'] ) ) $_REQUEST['settings-updated'] = false;
?>

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

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

<div>
<h2 id="title">Настройка темы</h2>
<?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
<div id="message" class="updated">
<p><strong>Настройки сохранены</strong></p>
</div>
<?php endif; ?>

Далее создаем нашу форму с опциями темы

<form method="post" action="options.php">
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>

У нас будет таблица, в которой будут все опции по порядку в новых строках. Первая опция - это выбор нового пути к логотипу

<table>
<tr valign="top">
<td>Лгоготип</td>
<td><input id="theme_settings[custom_logo]" type="text" size="38" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" /></td>
<td><label> - Укажите новый путь к Вашему логотипу. </label></td>
</tr>

Обратите внимание что, у поля input есть id и name у которых значение theme_settings[custom_logo]. Вы можете создавать много элементов, но у каждого должно быть свое имя, в данном случаи это - custom_logo

Также у полей input есть - value у которого внутри тоже есть custom_logo. Так что, если Вам надо добавить еще поле, можете целиком скопировать код выше, но только поменяв имя на новое.

Следующей строкой я добавил элемент интерфейса в виде раскрывающегося списка. С его помощью можно например установить расположение блока или сайдбара.

<tr valign="top">
<td>Расположение блока:</td>
<td><select name="theme_settings[block_pos]" id="theme_settings[block_pos]">
<option value="left"<?php if($options[block_pos]=='left') echo ' selected="selected"';?>>Слева</option>
<option value="right"<?php if($options[block_pos]=='right') echo ' selected="selected"';?>>Справа</option>
</select> </td>
</tr>

Как Вы ведите тут тоже есть id и name и у них свое уникальное имя - block_pos. Внутрь списка добавляем элементы option, для которых тоже задаем условия.

Можете приспособить под себя, но только не сделайте ошибки.

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

<tr valign="top">
<td>Показывать блок:</td>
<td><input type="checkbox" name="theme_settings[show_block]" id="theme_settings[show_block]" value="1"<?php if($options[show_block]=='1') echo ' checked="checked"';?> /></td>
</tr>

Как в поле ввода и списке есть id и name и они тоже обязательны. Тоже есть свойство $options и в нем тоже указано имя.

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

<tr valign="top">
<td>Ссылка на банер</td>
<td><textarea id="theme_settings[banner]" name="theme_settings[banner]" rows="5" cols="36"><?php esc_attr_e( $options['banner'] ); ?></textarea></td>
<td><label> - Укажите путь к Вашему баннеру. </label></td>
</tr>
<tr valign="top">
<td>Текст в подвале</td>
<td><textarea id="theme_settings[footer]" name="theme_settings[footer]" rows="5" cols="36"><?php esc_attr_e( $options['footer'] ); ?></textarea></td>
<td><label> - Можете ввести свой текст, ссылки и права на копирайт. Можно использовать html теги. </label></td>
</tr>
<tr valign="top">
<td>Метрика</td>
<td><textarea id="theme_settings[tracking]" name="theme_settings[tracking]" rows="5" cols="36"><?php esc_attr_e( $options['tracking'] ); ?></textarea></td>
<td><label> - здесь можно прописать коды счетчиков или дополнительных скриптов</label></td>
</tr>
</table>

Также к каждому полю я прописывал label, с помощью которого я прописал пояснения к каждому из элементов.

В самом конце добавляем кнопку сохранения, закрываем форму, блок в котором вся форма и функцию.

<p><input name="submit" id="submit" class="button button-primary" value="Сохранить" type="submit"></p>
</form>
</div>
<?php } ?>

Теперь весь код целиком

<?php
//Настройки панели администрирования
//Регистрация функции настроек
function theme_settings_init(){
	register_setting( 'theme_settings', 'theme_settings' );
}
// Добавление настроек в меню страницы
function add_settings_page() {
add_menu_page( __( 'Опции темы' ), __( 'Опции темы' ), 'manage_options', 'settings', 'theme_settings_page');
}
//Добавление действий
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );
//Сохранение настроек
function theme_settings_page() { 
global $select_options; if ( ! isset( $_REQUEST['settings-updated'] ) ) $_REQUEST['settings-updated'] = false;
?>
<div>
<h2 id="title">Настройка темы</h2>
<?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
<div id="message" class="updated">
<p><strong>Настройки сохранены</strong></p>
</div>
<?php endif; ?>
<form method="post" action="options.php">
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>
<table>
<tr valign="top">
<td>Лгоготип</td>
<td><input id="theme_settings[custom_logo]" type="text" size="38" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" /></td>
<td><label> - Укажите новый путь к Вашему логотипу. </label></td>
</tr>
<tr valign="top">
<td>Расположение блока:</td>
<td><select name="theme_settings[block_pos]" id="theme_settings[block_pos]">
<option value="left"<?php if($options[block_pos]=='left') echo ' selected="selected"';?>>Слева</option>
<option value="right"<?php if($options[block_pos]=='right') echo ' selected="selected"';?>>Справа</option>
</select> </td>
</tr>
<tr valign="top">
<td>Показывать блок:</td>
<td><input type="checkbox" name="theme_settings[show_block]" id="theme_settings[show_block]" value="1"<?php if($options[show_block]=='1') echo ' checked="checked"';?> /></td>
</tr>
<tr valign="top">
<td>Ссылка на банер</td>
<td><textarea id="theme_settings[banner]" name="theme_settings[banner]" rows="5" cols="36"><?php esc_attr_e( $options['banner'] ); ?></textarea></td>
<td><label> - Укажите путь к Вашему баннеру. </label></td>
</tr>
<tr valign="top">
<td>Текст в подвале</td>
<td><textarea id="theme_settings[footer]" name="theme_settings[footer]" rows="5" cols="36"><?php esc_attr_e( $options['footer'] ); ?></textarea></td>
<td><label> - Можете ввести свой текст, ссылки и права на копирайт. Можно использовать html теги. </label></td>
</tr>
<tr valign="top">
<td>Метрика</td>
<td><textarea id="theme_settings[tracking]" name="theme_settings[tracking]" rows="5" cols="36"><?php esc_attr_e( $options['tracking'] ); ?></textarea></td>
<td><label> - здесь можно прописать коды счетчиков или дополнительных скриптов</label></td>
</tr>
</table>
<p><input name="submit" id="submit" class="button button-primary" value="Сохранить" type="submit"></p>
</form>
</div>
<?php } ?>

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

Для этого сначала нужно включить нашу функцию

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

Эту строку нужно прописывать каждый раз перед выводом опции

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

Для лого например это так:

<?php echo $options['custom_logo'] ?>

Готовый результат будет вот таким

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

Думаю с этим понятно. Если хотим вывести значение из страницы настроек, в нужном месте вставляем код, что выше, лишь правильно указав имена. Так выводим для метрики и баннера меняя лишь имена на tracking и banner, ну или те, что Вы придумаете, главное чтобы они совпадали с теми что на странице настроек.

Можно еще провернуть еще один фокус. На примере опции - Текст в подвале, предлагаю добавить условие - если. Суть такова - изначально текст в подвале прописан по умолчанию, но если пользователь на странице настроек что-то введет, то вместо текста по умолчанию появится то что задал пользователь.

Чтобы это сделать нам понадобится прописать такой вот код:

<div id="copyright">
<?php
 //получение опций темы
 $options = get_option( 'theme_settings' ); ?>
 <?php if($options['footer']) { // выводим то что написал пользователь?>
<p><?php echo $options['footer']; ?></p>
<?php } else { // или текст по умолчанию ?>
<p>&copy; <?php echo date('Y'); ?> <a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>. Все права защищены.
Любое использование материалов допускается только с указанием активной ссылки на источник</p>
<?php } ?>
</div>

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

<?php $options = get_option( 'theme_settings' ); ?>
<?php if($options['show_block']) { ?>
<p>Содержание если флажок установлен.</p>
<?php }?>

Можно добавлять любое содержание. Хоть пол сайта скрыть, если нужно.

Теперь осталось вывести только содержание того, что пользователь выберет в списке. У нас это было размещение блока слева или справа

Тут как и с текстом в подвале будем использовать условие - если. В моем списке - только два элемента, поэтому условие такое - если выбран пункт номер один(слева) показываем блок у которого в стилях свойство - float:left;, иначе показываем блок у которого свойство - float:right;.

<?php $options = get_option( 'theme_settings' ); ?>
<?php if($options[block_pos]=='left') { ?>
<p style="float:left;">Блок слева</p>
<?php } else { ?>
<p style="float:right;">Блок справа</p>
<?php }?>

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(8 голосов, в среднем: 5 из 5)

Опубликовано 8 комментариев

  • Ольга
    Комментариев: 1

    А как можно сделать, чтобы был с логотипом так же как с текстом в подвале. Чтобы лого стояло по умолчанию, а когда пользователь введет ссылку, то будет новый.

    • Виталий
      Комментариев: 267

      Добрый день. Конечно можно, тем более Вы сами указали правильное решение. Используем то же условие что и с текстом в подвале, только меняем имя.
      Примерно это будет так:
      <div id="logo">
      <?php
      //получение опций темы
      $options = get_option( 'theme_settings' ); ?>
      <?php if($options['custom_logo']) { // выводим ссылку пользователя?>
      <a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img alt="Лого" src="<?php echo $options['custom_logo']; ?>" /></a>
      <?php } else { // или ссылка по умолчанию ?>
      <a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Лого"/></a>
      <?php } ?>
      </div>
      Ссылку на лого по умолчанию и название файла меняйте под себя 🙂

  • dima.krutoo
    Комментариев: 1

    Спасибо тебе большое! Просто и понятно объяснил.

  • Геннадий
    Комментариев: 2

    Ваш пост тупо откуда то скопирован даже не проверен, хотя бы по тому что именно строки

    add_action( 'admin_init', 'theme_settings_init' );
    add_action( 'admin_menu', 'add_settings_page' );

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

    • Виталий
      Комментариев: 267

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

      • Геннадий
        Комментариев: 2

        Ни какой агрессии... простите если что...
        просто вы наверное 10 автор на котором я решил высказаться, так как мне как новичку не понятно когда идешь пошагово.. что к чему

  • Марина
    Комментариев: 1

    Виталий, спасибо за статью.Все просто и понятно

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий