Создание пользовательской панели опций в Wordpress

29 Мая 2022г. в 04:33

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

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

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

Ради примера, взгляните на такую панель на одном из моих блогов:



Здесь я могу менять множество настроек оформления моего блога, без необходимости работы с кодом.

А вот пример автора урока:



Для правильной работы у Вас должна быть установлена версия Wordpress не меньше 2.9.

Цель

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



Создание файлов

Создайте новую папку под названием “functions” в корне папки с Вашей темой оформления. В этой папке будет "жить" наш код. Внутри папки создайте файл “admin-menu.php”. В этом файле будут находится все функции, которые относятся к панели опций.

Чтобы Wordpress узнал о существовании этой папки нам необходимо сослаться на нее с файла functions.php. Откройте его и вставьте следующий код:

<?php
// Load main options panel file
require_once (TEMPLATEPATH . '/functions/admin-menu.php');
?>
Чтобы убедится, что мы на правильном пути можно с помощью PHPMyAdmin заглянуть в таблицу wp_options. Там мы сможем найти нашу панель опций.

Создание панели опций

Панель опций будет сделана с использованием 4-х функций. Три из них будут внутри файла “admin-menu.php”. Рассмотрим все по порядку их появления.

Функция omr_create_menu

Эта функция используется для создания нового элемента меню в панели администратора через add_menu_page hook. Эта функция определяет название страницы, а также какая функция будет конструировать панель опций (omr_settings_page). После инициации, будет вызвана функция register_settings.

<?php
// Создать пользовательское меню
add_action('admin_menu', 'omr_create_menu');

function omr_create_menu() {


//создать новое меню верхнего уровня
add_menu_page('Build Internet Settings', 'Build Internet', 'administrator',
__FILE__, 'omr_settings_page', 'favicon.ico');

//вызвать функцию register settings
add_action( 'admin_init', 'register_mysettings' );
}
Функция register_mysettings

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

function register_mysettings() {
//регистрируем наши настройки
register_setting( 'omr-settings-group', 'omr_tracking_code' );
}
Функция omr_settings_page

В этой функции мы определяем структуру и форму нашей панели. Админская панель Wordpress использует несколько классов для оформления и наша панель также будет их использовать.

Заметьте, что функция “omr-settings-group” находится в самом начале. Таким образом мы убеждаемся, что поле(я), которые мы указали в прошлых шагах, точно загрузятся. После загрузки, функция get_option загружает текущие значения из БД.

function omr_settings_page() {
?>
<div class="wrap">
<h2>Build Internet Options</h2>

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

<?php settings_fields('omr-settings-group'); ?>
<table class="form-table">

<tr valign="top">
<th scope="row">Tracking Code</th>
<td><textarea name="omr_tracking_code"><?php echo get_option('omr_tracking_code');
?></textarea></td>
</tr>

</table>

<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>"
/>
</p>


</form>
</div>
<?php } ?>
Доступ к сохраненным значениям

Как только Вы сохранили пользовательскую опцию в БД, Вам все еще необходимо обратится к ней для вывода в оформлении. Мы это сделаем с помощью функции get_option function. Откройте файл footer.php Вашей темы и вставьте сразу перед закрывающим тегом </body> следующий код:

<?php
//Отобразить Google Analytics.
echo get_option('omr_tracking_code');
?>
Вот и все готово! Надеюсь, Вам пригодится! Удачи!