Отже, Ви хочете створити власну користувацьку тему WordPress?

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

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

Створення індивідуального вебсайту WordPress

Ви хочете, щоб ваш сайт виглядав чудово та мав усю необхідну функціональність, тому перевірте Довідник тем WordPress:

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

Конструктори сторінок

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

Блокові теми

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

Використовуючи новий Редактор сайтів, ви можете налаштувати більшість вашого сайту за допомогою блоків drag-and-drop в єдиному інтерфейсі, включаючи шаблони сторінок, без використання коду. Ось наш повний путівник по повному редагуванню сайту.

Налаштування теми

Якщо ви оберете налаштовувану тему, ви також зможете змінити зовнішній вигляд вашого сайту без технічних навичок. Використовуючи WordPress Customizer та Theme Options Panel, ви маєте змогу налаштувати різні елементи дизайну:

• Кольорова схема: Від кольору фону вашого сайту до конкретного відтінку тексту основного змісту.
• Типографіка: Це охоплює шрифти, що використовуються на вашому сайті, та спосіб відображення тексту в різних типах контенту.
• Макет: Деякі теми дозволяють перемикатися між різними макетами та вибирати, як ваш сайт повинен адаптуватися до різних розмірів екранів.

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

Створення дочірньої теми

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

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

На поверхні, дочірня тема WordPress працює як будь-яка інша тема. Основна відмінність полягає в тому, що дочірня тема успадковує атрибути від батьківської теми (оригінальної теми, яку ви вибрали для використання).

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

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

Таким чином, використання дочірньої теми є ефективним способом створення унікальної онлайн-присутності без занурення в світ розробки.

Повний контроль

Іноді, навіть цього недостатньо. Коли ви хочете створити щось дійсно унікальне, прийшов час подумати про створення власної теми.

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

Ми підемо з вами через процес створення вашої першої теми. Щоб розпочати, вам знадобляться дві речі:

• Ваш власний сайт WordPress
• Якісний план хостингу

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

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

Що таке стартова тема? (І чому ви повинні її використовувати)

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

Існує багато чудових початкових тем, включаючи Underscores, UnderStrap, та Bones (це лише декілька прикладів).

Ми будемо використовувати Underscores для нашого навчання. Це надійний вибір для початківців, оскільки містить лише основи. Крім того, ця стартова тема була розроблена Automattic (командою, яка стоїть за WordPress.com), що означає, що вона, ймовірно, буде безпечною, сумісною та добре підтримуватися в довгостроковій перспективі.

Як розробити вашу першу тему WordPress (у 5 кроках)

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

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

Крок 1: Налаштування локального середовища

Перше, що вам потрібно зробити, це створити локальне середовище розробки. Це фактично сервер, який ви встановлюєте на свій комп’ютер, який можна використовувати для розробки та управління локальними сайтами WordPress. Локальний сайт – це безпечний спосіб розроблення теми без впливу на ваш живий сайт.

Існує багато способів створити локальне середовище, але ми будемо використовувати Local. Це швидкий і простий спосіб безкоштовно встановити локальну версію WordPress, яка сумісна як з Mac, так і з Windows:

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

Тут вам буде запропоновано налаштувати ваше нове локальне середовище:

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

Крок 2: Завантажте та інсталюйте вашу стартову тему

Як і більшість стартових тем, Underscores дуже легко розпочати роботу. Насправді, все що вам потрібно зробити – це перейти на сайт та назвати вашу тему:

Якщо ви хочете, ви можете Клікнути на Розширені налаштування для додаткового налаштування базової теми:

Тут ви можете ввести додаткову інформацію, таку як ім’я автора, та додати опис теми:

Також є опція _sassify!, яка додасть Syntactically Awesome StyleSheets (SASS) файли до вашої теми. SASS — це мова попередньої обробки для CSS, яка дозволяє використовувати змінні, вкладення, математичні оператори та більше.

Коли ви зробите свій вибір, ви можете натиснути на Generate, що завантажить файл .zip, який містить вашу стартову тему. Це основний файл, навколо якого ви розроблятимете власну тему, тому вам потрібно встановити його на ваш локальний сайт.

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

Крок 3: Дізнайтеся про різні компоненти теми WordPress

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

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

Наприклад, header.php використовується для створення заголовка, тоді як comments.php дозволяє вам відображати коментарі.

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

Наприклад, якщо ви відвідуєте URL http://example.com/post/this-post, WordPress буде шукати наступні файли шаблонів у такому порядку:

1. Файли, які відповідають слагу, наприклад this-post
2. Файли, що відповідають ID публікації
3. Загальний файл окремого поста, такий як single.php
4. Файл архіву, такий як archive.php
5. Файл index.php

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

Основні файли теми

Крім файлу index.php, у більшості тем WordPress ви знайдете наступні файли:

• header.php: Цей файл містить HTML для вашого індивідуального шаблону заголовка, включаючи метадані та посилання на таблиці стилів. Зверніть увагу, що меню зазвичай обробляються за допомогою функції індивідуального меню WordPress.
• footer.php: Цей файл містить HTML для шаблону нижнього колонтитулу вашого веб-сайту.
• sidebar.php: Якщо ви хочете, щоб ваш веб-сайт мав бічну панель, код буде взято звідси. Майте на увазі, що це просто структура; віджети керуються з адміністративної зони.
• single.php: Це файл шаблону для окремих блог-постів. Якщо ви хочете підтримувати різні типи постів, ви можете створити більше одного файлу.
• page.php: Стандартний макет окремих сторінок береться з цього файлу. Знову ж таки, ви можете створити більше одного шаблону — наприклад, ви могли б створити дизайн сторінки товару для інтернет-магазину.
• comments.php: Цей файл контролює відображення коментарів під вашими блог-постами та на сторінках.
• search.php: Коли хтось використовує функцію пошуку на вашому веб-сайті, цей шаблон визначає, як будуть виглядати результати пошуку.

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

Цикл

Ще один важливий елемент, який вам потрібно зрозуміти, це Loop. WordPress використовує цей код для відображення контенту, тому в багатьох аспектах він є серцем вашого сайту. Він присутній у всіх шаблонних файлах, які відображають контент постів, таких як index.php або sidebar.php.

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

Крок 4: Налаштуйте свою тему

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

Додайте функціональність за допомогою хуків

Hooks – це фрагменти коду, вставлені у файл шаблону, які дозволяють виконувати дії PHP у різних областях сайту, вставляти стилі та відображати іншу інформацію. Більшість хуків реалізовані безпосередньо в основне програмне забезпечення WordPress, але деякі також корисні для розробників тем.

Давайте розглянемо деякі з найпоширеніших хуків та для чого вони можуть бути використані:

• wp_head(): Додано до елемента <head> у header.php. Активує стилі, скрипти та іншу інформацію, яка виконується відразу після завантаження сайту. Часто використовується для вставки коду Google Analytics.
• wp_footer(): Додано до footer.php прямо перед тегом </body>.
• wp_meta(): Зазвичай знаходиться в sidebar.php для включення додаткових скриптів (наприклад, хмари тегів).
• comment_form(): Додано до comments.php безпосередньо перед закриваючим тегом </div> для відображення даних коментарів.

Ці хуки вже будуть включені у вашу тему Underscores. Однак, ми все ж рекомендуємо відвідати Базу даних хуків щоб побачити всі доступні хуки та дізнатися більше про них.

Додавання стилів за допомогою CSS

Каскадні таблиці стилів (CSS) визначають зовнішній вигляд усього вмісту на вашому сайті. У WordPress це реалізується за допомогою файлу style.css. У вашій темі цей файл вже міститься, але наразі він містить лише базове, стандартне оформлення:

Якщо ви хочете швидкий приклад того, як працює CSS, ви можете редагувати будь-які стилі тут і зберегти файл, щоб побачити ефекти. Наприклад, ви можете знайти наступний код (зазвичай на лінії 485):

a {
color: royalblue;
}

Цей код контролює колір невідвіданих гіперпосилань, які за замовчуванням мають королівський синій колір:

Подивимося, що станеться, якщо ми спробуємо змінити це, замінивши на наступний код:

a {
color: red;
}

Збережіть файл і перевірте ваш локальний сайт. Як ви можете очікувати, всі невідвідані посилання тепер будуть яскраво червоними:

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

a:visited {
color: purple;
}

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

Крок 5: Експортуйте тему і завантажте її на свій сайт

Коли ви закінчите налаштування вашої теми, настав час переконатися, що вона працює належним чином. Для цього ви можете використати дані Theme Unit Test.

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

Коли ви ретельно протестували свою тему і переконалися, що вона відповідає вимогам стандартів, все, що залишилося, це експортувати її.

Спочатку вам потрібно знайти місцезнаходження вашого сайту на локальному комп’ютері. Ймовірно, ви знайдете його у папці під назвою Websites, у вашій стандартній папці Documents.

Відкрийте папку веб-сайту та перейдіть до /wp-content/themes/, де ви знайдете вашу тему:

Тепер ви можете використовувати інструмент стиснення, такий як WinRAR, для створення файлу .zip на основі папки. Просто клацніть правою кнопкою миші на папці та виберіть опцію, яка дозволяє її стиснути, наприклад Стиснути “папку.”

Коли папка буде стиснута, її можна буде завантажити та встановити на будь-якому сайті WordPress, точно так само, як ви встановили свою тему Underscores на початку.

Поради для розробки вашої першої власної теми

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

Ось кілька додаткових заходів, які ви можете вжити, щоб ваша тема процвітала на ринку:

• Використовуйте систему контролю версій: Системи, як-от Git, допомагають відстежувати зміни у вашому коді з часом і відкатувати помилки.
• Перевіряйте свій код: Використовуйте інструменти, такі як Theme Check та W3C Validator, для виявлення помилок у коді. Постійні перевірки можуть допомогти вам виявити проблеми на ранніх стадіях.
• Тестуйте свою тему: Спробуйте завантажити свою тему в різних браузерах і на різних пристроях, щоб виявити проблеми з макетом або відображенням. Дизайн, який ідеально працює на вашому комп’ютері, може не спрацювати на іншій платформі.
• Використовуйте коментарі у коді: Залишаючи собі примітки, що пояснюють, що робить кожен елемент, ви зможете легше вирішувати проблеми у майбутньому.

Створіть власну тему WordPress

Створення власної теми WordPress з нуля – це не маленьке досягнення. Однак, процес може бути не таким складним, як ви думаєте.

Підсумовуючи, ось як розробити тему WordPress у п’яти простих кроках:

1. Налаштуйте локальне середовище за допомогою Local.
2. Завантажте та встановіть стартову тему, наприклад Underscores.
3. Дізнайтеся про різні компоненти теми WordPress.
4. Налаштуйте вашу тему.
5. Експортуйте тему та завантажте її на ваш сайт.

Дотримуючись рекомендацій на сайті документації Codex, ви можете розробити тему, яка відповідає стандартам якості. Можливо, ви навіть захочете подати її до Довідника тем WordPress!

Запустіть свій унікальний сайт WordPress з DreamPress

Створення чудової теми є першим кроком до створення успішного вебсайту. У нас є інструменти, щоб допомогти вам доповнити решту.

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

Зареєструйтеся сьогодні, щоб запустити свій сайт на WordPress!