Як створити просту сторінку налаштувань теми WordPress

От

20.04.2020

812

Якщо ви є користувачем 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;
?>

Крок 5 — Створення полів

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

Як бачите, ми створили такі поля:

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-код:

Крок 7 — Виклик опцій

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

Крок 8 — Додавання настроюваних логотипу

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