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

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

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

Создаем собственную страницу настроек в админке WordPress

Для начала создайте в папке вашего шаблона новую папку и назовите ее functions. В этой папке будут храниться все файлы, которые будут подключаться к файлу functions.php. Затем создайте файл settings.php, наполните его следующим кодом и положите в папку functions.

<?php
class ControlPanel {
// Устанавливаем значения по умолчанию
var $default_settings = array(
 'phone' => '495 122-12-12',
 'email' => 'info@site.ru'
 );
 var $options;

 function ControlPanel() {
 add_action('admin_menu', array(&$this, 'add_menu'));
 if (!is_array(get_option('themadmin')))
 add_option('themadmin', $this->default_settings);
 $this->options = get_option('themadmin');
 }

 function add_menu() {
 add_theme_page('WP Theme Options', 'Опции темы', 8, "themadmin", array(&$this, 'optionsmenu'));
 }

 // Сохраняем значения формы с настройками 
 function optionsmenu() {
 if ($_POST['ss_action'] == 'save') {
 $this->options["phone"] = $_POST['cp_phone'];
 $this->options["email"] = $_POST['cp_email'];
 $this->options["facebook"] = $_POST['cp_facebook'];
 $this->options["vkontakte"] = $_POST['cp_vkontakte'];
 $this->options["twitter"] = $_POST['cp_twitter'];
 $this->options["metrika"] = $_POST['cp_metrika'];
 update_option('themadmin', $this->options);
 echo '<div class="updated fade" id="message" style="background-color: rgb(255, 251, 204); width: 400px; margin-left: 17px; margin-top: 17px;"><p>Ваши изменения <strong>сохранены</strong>.</p></div>';
 }
 // Создаем форму для настроек
 echo '<form action="" method="post" class="themeform">';
 echo '<input type="hidden" id="ss_action" name="ss_action" value="save">';

 print '<div class="cptab"><br />
 <b>Настройки темы</b>
 <br />
 <h3>Контакты</h3>
 <p><input placeholder="Телефон" style="width:300px;" name="cp_phone" id="cp_phone" value="'.$this->options["phone"].'"><label> - телефон</label></p>
 <p><input placeholder="Email" style="width:300px;" name="cp_email" id="cp_email" value="'.$this->options["email"].'"><label> - email</label></p>
 <h3>Социальные сети</h3>
 <p><input placeholder="Ссылка на страницу facebook" style="width:300px;" name="cp_facebook" id="cp_facebook" value="'.$this->options["facebook"].'"><label> - facebook</label></p>
 <p><input placeholder="Ссылка на страницу vkontakte" style="width:300px;" name="cp_vkontakte" id="cp_vkontakte" value="'.$this->options["vkontakte"].'"><label> - vkontakte</label></p>
 <p><input placeholder="Ссылка на страницу twitter" style="width:300px;" name="cp_twitter" id="cp_twitter" value="'.$this->options["twitter"].'"><label> - twitter</label></p>

 <h3>Код в footer.php</h3>
 <p><textarea placeholder="Здесь можно прописать коды счетчиков или дополнительных скриптов" style="width:300px;" name="cp_metrika" id="cp_metrika">'.stripslashes($this->options["metrika"]).'</textarea><label> - здесь можно прописать коды счетчиков или дополнительных скриптов</label></p>

 </div><br />';
 echo '<input type="submit" value="Сохранить" name="cp_save" class="dochanges" />';
 echo '</form>';
 }
}
$cpanel = new ControlPanel();
$mytheme = get_option('themadmin');
?>

Этот файл вы можете отредактировать по своему желанию, добавив или удали некоторые поля из формы. Мы добавили комментарии к коду, чтобы вам было понятнее, как это все работает.

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

include('functions/settings.php');

Это предельно просто для тех, кто уже работал с файлами WordPress шаблона. После этого в админке WordPress на вкладке "Внешний вид" вы увидите ссылку "Опции темы", где сможете менять настройки шаблона.

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

Использовать введенные на этой странице данные вы можете с помощью следующего кода:

<?php echo $mytheme['phone']; ?>

Этот код выведет номер телефона, который был сохранен в админке на странице настроек. Но для того, чтобы это код заработал, в самом начале вашего шаблона (например в single.php) следует вызвать глобальную переменную:

<?php global $mytheme; ?>

Вот собственно и все. Пробуйте, экспериментируйте и творите с WordPress :)