Як легко створити власну тему WordPress (без будь-якого коду)

Ви хочете створити власну тему WordPress з нуля?


Раніше вам доводилося слідувати кодексу WordPress і мати гідні знання з кодування, щоб створити власну тему WordPress. Але завдяки новим генераторам тем WordPress, тепер кожен може створити повністю власну тему WordPress протягом години (знання кодування не потрібно).

У цій статті ми покажемо вам, як легко створити власну тему WordPress, не записуючи жодного коду.

Створення власної теми WordPress без написання коду

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

На відміну від статичних HTML-сайтів, теми WordPress – це набір файлів шаблонів, написаних на PHP, HTML, CSS та JavaScript. Як правило, вам потрібно буде гідно розуміти всі ці мови веб-дизайну або найняти веб-розробника, щоб створити власну тему WordPress.

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

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

Ті, хто не хотів влаштовуватися і хотів налаштувати, або використовували перетягування & відкиньте WordPress page builder, або вони використали тему для створення власної теми.

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

З іншого боку, плагіни для створення сторінок WordPress дуже легко створили власні макети сторінок за допомогою перетягування & інтерфейс “drop”, але вони були обмежені лише макетами. Ви не можете створити з ним власні теми.

Поки Beaver Builder, один з найкращих плагінів для WordPress сторінок для вирішення цієї проблеми не вирішив вирішити цю проблему за допомогою додатку під назвою Beaver Themer.

Beaver Builder кращий плагін для WordPress сторінок

Beaver Themer – це надбудова для створення веб-сайтів, яка дозволяє створювати власні макети тем за допомогою інтерфейсу перетягування та без навчання кодування.

Давайте розглянемо, як використовувати Beaver Themer для легкого створення теми WordPress.

Відеоурок

Підписуйтесь на WPBeginner

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

Налаштування Beaver Themer для створення власної теми

Beaver Themer – додаток для додатка для Beaver Builder, тому для цієї статті вам знадобляться обидва додатки.

Спочатку потрібно встановити та активувати плагіни Beaver Builder та Beaver Themer. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

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

Ви можете знайти багато таких тем у каталозі тем WordPress.org. Більшість сучасних тем WordPress включає шаблон на повну ширину. Наш головний вибір:

  • Astra – безкоштовна універсальна тема WordPress для легкої ваги, яка постачається із вбудованою підтримкою для Beaver Builder.
  • OeanWP – Ще одна популярна безкоштовна багатоцільова тема WordPress, яка постачається з повною підтримкою для розробників сторінок.
  • Теми StudioPress – Усі їх теми сумісні з Beaver Builder і чудово співпрацюють з Beaver Themer.

Для цього підручника ми будемо використовувати Astra, яка є легкою та простою для налаштування теми WordPress.

Налаштування вашої теми для Beaver Themer

Створюючи власну тему WordPress за допомогою Beaver Themer, важливо переконатися, що Beaver Themer має доступ до повного тіла сторінки (від краю до краю).

Це макет Astra за замовчуванням. Як ви бачите, що цей макет включає бічну панель, з якою складно працювати при використанні Beaver Themer.

Макет теми за замовчуванням із бічною панеллю

Ви можете змінити це, відвідавши панель адміністратора вашого веб-сайту та перейдіть на сторінку Зовнішній вигляд »Налаштувати сторінки. Звідси потрібно перейти на Макет »Бічні панелі вкладка.

Вимкнення бічних панелей у вашій темі

Потрапивши туди, просто виберіть “Без бічної панелі” під опцією макета за замовчуванням та натисніть кнопку “Опублікувати”, щоб зберегти зміни.

Тепер ваша тема почне використовувати макет без бічних панелей. Це найкращий макет для використання з Beaver Themer.

Макет теми без бічних панелей

Цей макет на повній сторінці дозволяє Beaver Themer використовувати кожен дюйм екрана, тож ви можете створити прекрасний візуальний досвід.

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

Якщо ви не можете його знайти, зв’яжіться зі своїм розробником теми, і вони можуть допомогти вам у цьому.

Після того як ви налаштували свою тему на макет на повну ширину, ви готові створити власну тему WordPress за допомогою Beaver Themer.

Основи швидкого ведення Бівера

Бівер Темер працює над «Бівер будівельником». Як плагін для створення сторінки, Beaver Builder дозволяє перетягувати елементи на сторінку, щоб створити власні макети.

У ньому є такі елементи, які ви можете використовувати у своїх макетах:

  • Шаблон: Колекція рядків стовпців та модулів, що складають цілий макет сторінки.
  • Стовпці: модулі вертикального компонування, які допомагають вирівнювати вміст по горизонталі.
  • Рядки: Горизонтальна колекція декількох модулів
  • Модуль: елемент, який видає конкретну інформацію, таку як заголовок, текстовий блок, таблиця, галерея тощо.

Просто відредагуйте сторінку в Beaver Builder, а потім натисніть кнопку “Додати” у верхньому правому куті. Потім можна перетягувати стовпці, рядки, модулі на свою сторінку і починати їх редагувати відразу.

Використання Beaver Builder

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

Шаблони Beaver Builder

Beaver Builder також дозволяє зберегти свої макети, а потім використовувати їх пізніше як шаблони.

Щоб дізнатися більше, перегляньте нашу статтю про те, як створити користувацький макет сторінки за допомогою програми Beaver Builder.

Однак ми не просто хочемо створювати макети сторінок. Ми хочемо створити повну власну тему.

Це коли Бівер Темер заходить.

Це додає ще один елемент у програму Beaver Builder під назвою “Themer Layout”.

Тематичний макет

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

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

Використання шаблонів Beaver Themer для створення власної теми WordPress

У наступних інструкціях ми ознайомимо вас з кроками, необхідними для створення найпопулярніших елементів власної теми. На час закінчення ви повністю перетворили свою базову тему в повністю власну дочірню тему WordPress.

Створення спеціального заголовка для вашої теми

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

На щастя, в Beaver Themer вбудовані функції заголовка. Ви можете використовувати попередньо створений шаблон або використовувати модулі меню та зображення із двоколонним макетом.

Для того, щоб дістатися до цієї області заголовка, спочатку нам потрібно буде встановити макет заголовка в Beaver Themer. Відвідати Бівер Builder »Додати нове сторінки та вкажіть заголовок для заголовка.

Створення користувацького макета заголовка

Після цього виберіть тип “Темерний макет” як тип і “Заголовок” як варіант макета. Після завершення натисніть кнопку “Додати тематичний макет”, щоб продовжити.

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

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

Потім натисніть кнопку «Запустити Beaver Builder», щоб відкрити інтерфейс для будівельника.

Beaver Builder запуститься з базовим одинарним стовпчиком та дворядним макетом заголовка в якості вихідної точки.

Макет заголовка

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

Після того як ви задоволені дизайном, натисніть кнопку Готово, щоб зберегти або опублікувати ваш макет.

Тепер ви можете відвідати свій веб-сайт, щоб побачити власний заголовок теми в дії. Як бачите, ми застосували макет заголовка до нашої власної теми.

Спеціальний заголовок у вашій спеціальній темі

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

Давайте змінимо це.

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

Ви можете створити спеціальний колонтитул для своєї теми за допомогою програми Thever Beaver так само, як ви створили користувацький заголовок.

Переходьте до Бівер Builder »Додати нове сторінки та вказати назву для макета нижнього колонтитула. Потім виберіть “Тип макета” як тип, а “Футер” як варіант компонування.

Макет нижнього колонтитулу

Натисніть кнопку “Додати темерний макет”, щоб продовжити.

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

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

Після цього натисніть кнопку «Запустити Beaver Builder», щоб відкрити інтерфейс для будівельника.

Beaver Builder запуститься з розкладкою нижнього колонтитулу, використовуючи три колонки. Ви можете використовувати цей макет як початкову точку і почати редагування.

Редагування макета колонтитула

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

Після того як ви задоволені дизайном, натисніть кнопку Готово, щоб зберегти або опублікувати ваш макет.

Створення області вмісту для публікацій та сторінок

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

Ми почнемо приблизно так само, як створили колонтитул і колонтитул, додавши макет “Сингуляр” на сторінці Додати нову.

Створення публікацій та макетів сторінок

Далі ви виберете, де відображати цей макет. Ви можете вибрати однину, щоб використовувати її для всіх одиничних дописів і сторінок, або ви можете вибрати повідомлення або просто сторінки.

Налаштування сингулярного макета

Після цього натисніть кнопку «Запустити Beaver Builder», щоб відкрити інтерфейс для будівельника.

Редагування єдиного макета

Beaver Builder завантажить зразок єдиного макета із заголовком допису / сторінки вгорі, а потім вмістом, біологічним полем автора та областю коментарів.

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

Після того, як вас влаштує макет, натисніть кнопку Готово, щоб зберегти та опублікувати зміни.

Тепер ви можете відвідати ваш веб-сайт, щоб побачити його в дії.

Тематичний макет із змістом

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

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

Давайте створимо макет для архівних сторінок у вашій спеціальній темі.

Ви почнете з відвідування Бівер Builder »Додати нове сторінки та надання заголовка для макета вашого архіву.

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

Після цього виберіть “Тип макета” як тип і “Архів” як параметр макета. Натисніть кнопку “Додати темерний макет”, щоб продовжити.

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

Параметри макета архіву

Після цього натисніть кнопку «Запустити Beaver Builder», щоб відкрити інтерфейс для будівельника.

Beaver Builder запуститься з базовим макетом архіву одного стовпця. Угорі відображатиметься заголовок архіву, за яким слідують публікації.

Редагування макета архівів для вашої теми

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

Після цього натисніть кнопку “Готово”, щоб зберегти та опублікувати зміни.

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me