Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

Створення сторінки налаштувань для вашої WordPress теми

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Створення власної теми для WordPress - відмінний спосіб додати вашому блогу чи іншому веб-сайту WordPress оригінальний образ. Але навіть найприємніша тема не буде такої приємна, якщо для дрібних змін вам потрібно лізти під капот і редагувати HTML або PHP-код теми. Особливо, коли це платить клієнт, який використовує вашу тему. На щастя в WordPress, процес створення сторінки налаштувань для вашої теми в WordPress зовсім не складний, і після прочитання цього уроку ви зможете створити її в найкоротші терміни!


Крок 1 Рішення про те, які налаштування необхідні

Все це починається з необхідності: щоб створити чітку і корисну сторінку налаштувань, вам потрібно з'ясувати, що можна буде змінити, і залишити все інше. Кожен новий параметр, який додається до меню адміністратора, ускладнює інтерфейс користувача і підвищує складність використання теми. Ось чому краще бути обережним і вручну вибирати параметри, які будуть часто змінюватися, і не враховувати дрібні настройки, які можуть бути легко змінені за допомогою одного файлу всередині теми.

Ще одне питання, яке слід мати на увазі: «Хто буде міняти ці налаштування?» Якщо користувач знайомий з PHP і WordPress, можна очікувати що у нього не буде проблем з вкладенням Google Analytics в код, але ви не повинні вимагати цього від графічного дизайнера , не кажучи вже про письменника, який навіть не має нічого знати про HTML і CSS.

Загальні ідеї для визначення об'єктів в налаштуваннях теми:

  • Код відстеження Google Analytics на сайті
  • Кількість бічних панелей і їх позиціонування (зліва, справа, може бути, навіть вгору і вниз)
  • Ширина сторінки
  • Вміст вашого футера
  • Параметри для функцій, характерних для теми, наприклад, призначені для користувача формати тізерів.

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

Налаштування, створені в цьому підручнику

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

Елементи головної сторінки в редакторі будуть представлені у вигляді списку елементів, до яких нові можуть бути додані за допомогою JavaScript та jQuery.

Мені подобається переглядати сторінку адміністратора в панелі адміністратора WordPress при розробці HTML-коду, тому я зазвичай починаю з прив'язки сторінки налаштувань до WordPress і тільки після цоьго переходжу до конструювання вмісту сторінки. Тому на наступному кроці ми створюємо заглушку для сторінки налаштувань і підключимо її до WordPress.


Крок 2 Підключення сторінки налаштувань до WordPress

Створення сторінки налаштувань починається зі створення функції, яка налаштовує меню і підключає його до дії admin_menu. Це повідомляє WordPress про те, щоб викликати вашу функцію, коли потрібно буде створити меню, щоб все було зроблено в потрібний час. Додайте цей код в файл functions.php вашої теми:

Тепер ми додамо код для створення сторінок налаштувань всередині щойно створеної функції.

При створенні сторінки налаштувань ви можете або додати сторінку в якості підміню в одну з існуючих груп налаштувань, або створити власне меню верхнього рівня.

Додавання підміню виконується за допомогою функції add_submenu_page:

  • $parent_slug - унікальний ідентифікатор сторінки верхнього меню, до якого це підміню додається як дочірнє.
  • $page_title - назва сторінки, що додається
  • $menu_title - це назва, що відображається в меню (часто більш коротка версія $page_title
  • $capability - мінімальні вимоги для користувача для доступу до цього меню.
  • $menu_slug - унікальний ідентифікатор створюваного меню
  • $function - це ім'я функції, яка викликається для обробки (і візуалізації) цієї сторінки меню

Якщо ви вирішите додати сторінку меню в якості підміню в одну з груп WordPress, ви можете використовувати наступні значення як параметр $parent_slug:

  • Панель інструментів: index.php
  • Повідомлення: edit.php
  • Медіа: upload.php
  • Посилання: link-manager.php
  • Сторінки: edit.php?post_type=page
  • Коментарі: edit-comments.php
  • Зовнішній вигляд: themes.php
  • Модулі: plugins.php
  • Користувачі: users.php
  • Інструменти: tools.php
  • Налаштування: options-general.php

Група Appearance виглядає хорошим кандидатом для розміщення нашої сторінки налаштувань. Спробуємо її і створимо нашу першу сторінку налаштувань. Ось оновлена ​​версія нашої функції настройки меню:

Для цього нам ще потрібно створити функцію theme_front_page_settings. Ось вона в найпростішій формі:

І ось як це виглядає в дії:

Нам також необхідно перевірити, що у користувача є права, необхідні для редагування сторінки налаштувань. Для цього додайте наступний код на початку функції сторінки налаштувань:

Тепер, якщо користувач, якому не дозволено керувати параметрами, потрапляє на сторінку налаштувань, він не побачить нічого, крім повідомлення «У вас недостатньо прав для доступу до цієї сторінки».

Якщо вашій темі потрібні кілька сторінок налаштувань, це може збентежити користувача, коли доведеться шукати їх, розкиданих по всій структурі меню. В цьому випадку створення власної групи налаштувань полегшує користувачеві теми пошук всіх сторінок меню для теми.

Щоб додати свою власну групу налаштувань, вам потрібно створити сторінку меню верхнього рівня і зв'язати сторінки підміню з нею. Ось нова версія нашої функції настройки меню. Функція add_menu_page, яка використовується для створення меню верхнього рівня, схожа на add_submenu_page, за винятком того, що вона не приймає параметр $parent_slug.

Якщо ви перевірите код і оновите панель адміністратора WordPress, ви побачите, що ваша нова група меню з'явиться в нижній частині списку меню:

Але поки щось не зовсім коректно. Клацання по елементу верхнього меню не приведе вас до меню «Головна сторінка», а на сторінку меню «Приклад теми». Це не узгоджується з тим, як функціонують інші меню WordPress, тому давайте зробимо ще одну річ: змінивши атрибут $menu_slug у виклику add_submenu_page на те ж значення, що і в меню верхнього рівня, ми можемо пов'язати два меню, щоб вибір верхнього меню вибирав меню головної сторінки:

Тепер виглядає трохи краще. Якщо ви хочете поліпшити зовнішній вигляд своєї групи меню, є дві необов'язкові поля в функції add_menu_page, які ви знайдете корисними. Просто додайте значення після імені функції у виклику методу:

  • $icon_url вказує URL-адресу значка для меню верхнього рівня.
  • $position визначає позицію вашої групи меню в списку меню. Чим вище значення, тим нижче положення в меню.

Крок 3 Створення HTML форми для сторінок налаштувань

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

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

Коли ви перезавантажте сторінку налаштувань, ви побачите перше поле налаштувань:

Щоб наша сторінка налаштувань легко вписалася в WordPress, найкраще використовувати класи і стилі CSS, які WordPress використовує на своїх власних сторінках налаштувань. Хороший спосіб вивчити ці трюки - це просто піти і проаналізувати вихідний код WordPress.

Найголовніше - обернути сторінку налаштувань за допомогою div з класом "wrap". Усередині цього елемента div ви можете використовувати багато зумовлені стилі, такі як заголовки, кнопки і поля форми. Почнемо з оформлення назви нашої сторінки налаштувань:

  • Ми створимо заголовок h2 для сторінки (ви можете використовувати теги заголовків від h2 до h6 для створення заголовків різних розмірів.)
  • Перед заголовком ми покажемо значок сторінки налаштувань теми. (Ви можете використовувати зумовлені значки WordPress за допомогою функції screen_icon. Функція може приймати один з наступних параметрів: index, edit, upload, link-manager, pages, comments, themes, plugins, users, tools або options-general.)
  • Ми помістимо елемент input в форму і таблицю з класом form-table.

Тепер прийшов час почати додавати елементи.

Щоб зробити це, ми будемо використовувати jQuery, оскільки він спрощує роботу, ніж якби ми писали JavaScript з нуля, і поставляється в комплекті з WordPress. Якщо ви раніше використовували jQuery, потрібно мати на увазі тільки одну річ: нотація $, яку ви зазвичай використовуєте з jQuery, не працює в WordPress - вам потрібно ввести ціле слово jQuery.

По-перше, ми створимо елемент для редагування параметрів для одного блоку головної сторінки, який буде служити шаблоном для елементів, доданих користувачем. Додайте цей код прямо між закриває тегом таблиці і закриває тегом форми відразу після нього.

Тепер це виглядає так:

Тепер, коли у нас є наш шаблон, прийшов час приховати його і створити JavaScript для його використання, щоб створювати нові рядки для постів на сторінці налаштувань. Встановіть стиль для елемента li в значення display:none;

Потім ми створимо список для зберігання елементів головної сторінки при додаванні і посилання, яку користувач натисне, щоб додати нові елементи. Я повторюю весь HTML, щоб ви могли чітко бачити, куди йдуть зміни:

У реальному житті хорошою практикою буде помістити ваш JavaScript-код в окремий файл, але для того, щоб зробити цей підручник трохи легше, я додаю JavaScript в ту ж функцію за допомогою HTML вище, прямо перед wrap div:

JavaScript-код вище створює функцію, яка викликається, коли користувач клацає посилання з ідентифікатором add-featured-post. Ця функція клонує елемент списку шаблонів, який ми створили раніше, і оновлює його поля, щоб мати унікальні ідентифікатори та імена. Таким чином, всі вони будуть коректно відправлені з формою, коли користувач натисне кнопку відправити. Мінлива elementCounter містить наступний ідентифікатор для додавання. Вона також зберігається в прихованому полі, тому, коли форма відправляється, ми знаємо, скільки елементів сторінки потрібно очікувати.

Якщо ви натиснете посилання «Додати пост» пару раз, ви побачите, що в список додані елементи:

Але коли ви натискаєте на посилання remove, ви помітите, що нічого не відбувається. Давайте додамо функцію для видалення елементів зі списку:

Нам також потрібно викликати функцію. Додайте наступний код перед инкрементом elementCounter.

Перш ніж перейти до збереження форми, потрібно ще дещо зробити. Ми будемо використовувати плагін jQuery ui.sortable, щоб зробити елементи сторінки сортованими, перетягуючи їх один на одного. Щоб активувати цю функцію сортування, нам потрібно буде підключити відповідний файл JavaScript (який також поставляється разом з WordPress). Це можна зробити, додавши наступний рядок коду в кінець functions.php:

Потім ми додамо наступний JavaScript перед (або після) jQuery("#add-featured-post").click певним вище.

Цей фрагмент робить список відсортованих і додає подія, яке викликається всякий раз, коли користувач закінчує сортування. Оброблювач подій оновлює всі ідентифікатори елементів, щоб новий порядок зберігався також при збереженні форми (це стане ясніше після реалізації збереження). При написанні цього обробника я помітив, що код для установки ідентифікатора для вмісту шаблону дублювався в двох місцях, тому я реорганізував його в свою власну функцію, яку я розмістив прямо перед рядком з jQuery(document).ready():

Після додавання нових елементів, їх сортуванням та видаленням, прийшов час перейти до збереження даних. Але перед цим додайте кнопку відправлення прямо перед закриває тегом форми.


Крок 4 Збереження форми

Сторінка налаштувань виглядає добре, але чогось не вистачає: вона нічого не робить. Прийшов час зберегти деякі дані. WordPress забезпечує легку систему для збереження налаштувань теми і плагіна в якості пар ключ-значення в базі даних з використанням двох функцій: get_option та update_option. Дані, що зберігаються з використанням цих функцій, можуть бути простими, як наприклад числове значення або складними, як масив, вкладений кілька разів.

Обробка форми виконується в тій же функції, яка відображає форму. Щоб дізнатися, чи була форма відправлена чи ні, ми додамо приховане поле, update_settings в форму і потім перевіримо, чи було це поле відправлено чи ні в функції обробки.

Приховане поле, яке входить в форму, виглядає наступним чином:

Почнемо з збереження більш простого налаштування num_elements. Ми екрануючи атрибута, щоб переконатися, що користувач не відправляє шкідливий контент в теги HTML, а потім зберігає його в сховище налаштувань WordPress. При використанні update_option нам не потрібно турбуватися про те, чи була ця настройка вже збережена чи ні.

Перш ніж перейти до збереження списку, давайте додамо поточне значення num_elements в форму налаштувань, щоб користувач завжди бачив, яке значення він ввів, перш ніж приймати рішення про такому значенні. Це також допоможе нам перевірити, чи дійсно значення було збережено.

І для випадків, коли ми ще нічого не зберегли, нам потрібно буде завантажити поточне значення з параметрів, тому давайте додамо цей шматок коду, який буде виконаний, коли форма ще не була відправлена.

Коли форма зберігається, важливо повідомити користувача, щоб вона не залишала сумнівів у тому, сталося щось чи ні. Отже, давайте зробимо просте повідомлення про те, що «Налаштування збережені». відразу після update_option:

Потім збережемо елементи передньої сторінки. Найбільше значення id в елементах сторінки передається як element-max-id, тому ми можемо взяти це значення і перебрати елементи до цього ідентифікатора, зберігши їх дані в масиві в правильному порядку:

Це зберігає дані, але нам все одно потрібно підставити значення на сторінці налаштувань. Отже, давайте зробимо те ж саме, що і в поле num_elements і завантажимо параметри за замовчуванням на початку функції:

І потім, відобразимо існуючі елементи при побудові форми:

Нам також потрібно встановити початкове значення для змінної elementCounter, використовуваної в JavaScript, встановивши початкове значення прихованого поля в PHP і прочитавши його при ініціалізації змінної в JavaScript:

І частина JavaScript:


Крок 5 Використання налаштувань всередині теми

Збереження і відображення значень параметрів в межах області адміністрування готове, але насправді важливо, як ви їх використовуєте для настройки теми, тому тепер ми підійшли до точки, де прийшов час прийняти наші настройки і зробити з ними щось класне.

З цього моменту зміни потрапляють в index.php замість functions.php. Спочатку ми розглянемо параметри змінних:

Давайте пройдемося по списку $elements, згрупуємо їх в рядки з блоками $num_elements в кожному.

І потім, використовуючи дані, збережені для кожного елемента, ми заповнимо вищеописану частина елемента:

З кількома елементами це виглядає приблизно так:

Все ще досить таки нудно. Пости не мають зменшених зображень, і для них немає стилю. Щоб вони виглядали краще, давайте спочатку додамо підтримку мініатюр зображень. Це робиться шляхом підключення нової функції, яка налаштовує можливості теми, яка буде викликатися відразу після завантаження теми.

Функція, setup_theme_features включає мініатюри повідомлень, використовуючи функцію WordPress add_theme_support, так що WordPress додає цю функціональність на сторінку збереження постів. На сторінці посту ми можемо додати одне зображення у вигляді ескізу, натиснувши «Використовувати зображення» на сторінці завантаження зображення після завантаження фотографії.

Функція також визначає новий тип розміру зображення, tutorial-thumb-size, який використовується при отриманні ескізу поста в коді рендеринга.

Після вибору відображуваного зображення збережіть зміни і перезавантажте сторінку. Виглядає більш цікаво:

Нарешті, ми додамо кілька стилів в style.css, ось тепер тема має настроюється відображення постів:


Висновок

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.