15%

Збережіть 15% на всі хостинг-послуги

Перевірте свої навички і отримайте Знижку на будь-який план хостингу

Використовуй код:

Skills
Почати
21.10.2024

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

Стартові шаблони у WordPress — це готові, повністю розроблені макети сторінок, які можна імпортувати на свій сайт одним кліком, отримуючи повну візуальну структуру — заголовки, підвали, внутрішні сторінки, типографіку та колірні схеми — без написання жодного рядка коду. Вони постачаються разом із темами Astra, Neve, Kadence та OceanWP і доступні через супутні плагіни, що підключаються до бібліотеки галузево-специфічних дизайнів.

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

Що потрібно перед початком

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

Мінімальні вимоги до PHP та пам’яті:

  • PHP 7.4 або вище (рекомендується PHP 8.1+ для сучасних тем)
  • memory_limit встановлено не менше 256 MB у php.ini
  • max_execution_time від 300 секунд і більше
    upload_max_filesize та post_max_size обидва на рівні 64 MB або вище
    
    Якщо ви використовуєте план VPS Хостингу, ви можете редагувати ці значення безпосередньо у /etc/php/8.1/fpm/php.ini (відкоригуйте шлях версії відповідно до вашого стеку) та перезавантажити PHP-FPM:
    sudo nano /etc/php/8.1/fpm/php.ini
    # Set: memory_limit = 256M, max_execution_time = 300
    sudo systemctl reload php8.1-fpm
    У спільних середовищах ці обмеження часто встановлюються через панель керування хостингом. Якщо ви використовуєте план Спільного Веб-хостингу, перевірте розділ конфігурації PHP у cPanel або зверніться до служби підтримки для підвищення лімітів перед спробою повного імпорту сайту.
    SSL настійно рекомендується перед запуском. Імпорт шаблону через HTTP з подальшим переходом на HTTPS спричиняє проблеми зі змішаним контентом у вбудованих зображеннях та скриптах. Налаштуйте свій SSL Сертифікат перед запуском імпорту.
    Крок 1: Виберіть тему, що підтримує стартові шаблони
    Не кожна тема WordPress постачається з бібліотекою шаблонів. Наступні чотири є найбільш зрілими екосистемами, кожна з сотнями шаблонів та активною розробкою:
    
    
    
    Тема
    Розмір бібліотеки шаблонів
    Сумісність з конструктором сторінок
    Легка база (KB)
    Безкоштовний рівень
    
    
    
    
    
    
    
    
    —
    —
    —
    —
    —
    
    
    
    
    
    
    
    
    **Astra**
    250+ шаблонів
    Elementor, Gutenberg, Beaver Builder, Brizy
    ~50 KB
    Так
    
    
    
    
    
    
    
    
    **Neve**
    100+ шаблонів
    Elementor, Gutenberg, Brizy
    ~30 KB
    Так
    
    
    
    
    
    
    
    
    **Kadence**
    100+ шаблонів
    Gutenberg (нативний), Elementor
    ~40 KB
    Так
    
    
    
    
    
    
    
    
    **OceanWP**
    50+ шаблонів
    Elementor, Gutenberg
    ~60 KB
    Так
    
    
    
    
    
    Astra є найбільш широко використовуваним варіантом і має найглибшу інтеграцію з Elementor. Kadence — найкращий вибір, якщо ви хочете залишатися повністю в нативному блоковому редакторі Gutenberg і уникнути залежності від сторонніх конструкторів сторінок. Neve є найбільш оптимізованим за продуктивністю з коробки.
    Щоб встановити обрану тему:
    
    Увійдіть до панелі керування WordPress.
    Перейдіть до Зовнішній вигляд > Теми.
    Натисніть Додати нову, знайдіть тему за назвою.
    Натисніть Встановити, потім Активувати.
    
    Крок 2: Встановіть плагін стартових шаблонів
    Кожна екосистема тем використовує дещо інший плагін для доступу до своєї бібліотеки шаблонів. Таблиця нижче відображає відповідність тем та їхніх супутніх плагінів:
    
    
    
    Тема
    Назва плагіна
    Слаг на WordPress.org
    
    
    
    
    
    
    
    
    —
    —
    —
    
    
    
    
    
    
    
    
    Astra
    Starter Templates
    `astra-sites`
    
    
    
    
    
    
    
    
    Neve
    Neve Pro / Otter Blocks
    `otter-blocks`
    
    
    
    
    
    
    
    
    Kadence
    Kadence Starter Templates
    `kadence-starter-templates`
    
    
    
    
    
    
    
    
    OceanWP
    Ocean Extra
    `ocean-extra`
    
    
    
    
    
    Для Astra (найпоширеніший робочий процес):
    
    Перейдіть до Плагіни > Додати новий.
    Знайдіть Starter Templates.
    Встановіть та активуйте плагін під назвою Starter Templates – Elementor, Gutenberg & Beaver Builder Templates.
    
    Після активації новий пункт меню з’являється у розділі Зовнішній вигляд > Starter Templates.
    Критичний граничний випадок: Якщо ви переносите існуючий сайт і вже маєте контент, не запускайте повний імпорт сайту. Це перезапише ваші існуючі сторінки, меню та віджети. Натомість використовуйте Імпорт однієї сторінки або Імпорт шаблону головної сторінки та вручну об’єднайте потрібні елементи дизайну.
    Крок 3: Виберіть та імпортуйте стартовий шаблон
    Після активації плагіна майстер імпорту запускається автоматично або доступний через Зовнішній вигляд > Starter Templates.
    Робочий процес:
    
    Оберіть конструктор сторінок. Майстер запитує, чи хочете ви використовувати Elementor, Gutenberg або Beaver Builder. Цей вибір є постійним для імпорту — ви не можете змішувати конструктори в межах одного імпорту шаблону. Оберіть Gutenberg, якщо хочете легше налаштування без плагінів; оберіть Elementor, якщо вам потрібна розширена гнучкість перетягування.
    
    
    Фільтрування за категорією. Шаблони організовані за галуззю (Бізнес, eCommerce, Агентство, Ресторан, Портфоліо, Освіта тощо). Використовуйте рядок пошуку для фільтрування за ключовими словами.
    
    
    Попередній перегляд перед імпортом. Натисніть на будь-який мініатюрний зображення шаблону, щоб відкрити живий попередній перегляд. Перевірте внутрішні сторінки (Про нас, Контакти, Блог) — не лише головну сторінку — оскільки головна сторінка часто виглядає відполірованою, тоді як внутрішні сторінки є мізерними.
    
    
    Оберіть обсяг імпорту:
    
    
    Імпортувати повний сайт — імпортує всі сторінки, записи, меню, віджети та налаштування кастомайзера теми. Найкраще для нових сайтів.
    Імпортувати шаблон головної сторінки — імпортує лише макет головної сторінки. Найкраще для існуючих сайтів, де ви хочете оновити лише першу сторінку.
    
    
    Підтвердіть імпорт. Плагін завантажить демонстраційний контент, зображення (з Unsplash або CDN плагіна) та налаштування кастомайзера. На повільних з’єднаннях або обмежувальних серверах це може зайняти 60–90 секунд.
    
    Що імпортується, а що ні:
    
    
    
    Ресурс
    Імпортується
    Примітки
    
    
    
    
    
    
    
    
    —
    —
    —
    
    
    
    
    
    
    
    
    Макети сторінок
    Так
    Всі сторінки в демо
    
    
    
    
    
    
    
    
    Демонстраційні зображення
    Так
    Зображення-заповнювачі з Unsplash CDN
    
    
    
    
    
    
    
    
    Плагіни (WooCommerce тощо)
    За запитом
    Інсталятор плагінів запускається як частина майстра
    
    
    
    
    
    
    
    
    Ваші існуючі записи/сторінки
    Ні
    Існуючий контент не видаляється, якщо ви не обираєте «Видалити раніше імпортовані дані»
    
    
    
    
    
    
    
    
    Налаштування власного домену/DNS
    Ні
    Необхідно налаштовувати окремо
    
    
    
    
    
    
    
    
    SSL сертифікат
    Ні
    Необхідно попередньо налаштувати
    
    
    
    
    
    Крок 4: Налаштуйте шаблон
    Використання редактора Elementor
    Перейдіть до Сторінок, наведіть курсор на будь-яку сторінку та натисніть Редагувати в Elementor. Візуальний редактор відкривається з повністю редагованим імпортованим макетом.
    Основні дії з налаштування:
    
    Заміна зображень: Натисніть на будь-який віджет зображення, потім клацніть на мініатюру зображення на лівій панелі, щоб відкрити медіабібліотеку. Замініть демонстраційні зображення власними ресурсами.
    Редагування тексту в режимі реального часу: Натисніть безпосередньо на будь-який текстовий елемент, щоб редагувати його на місці.
    Глобальні кольори та шрифти: В Elementor перейдіть до Налаштування сайту > Глобальні кольори та Глобальні шрифти, щоб визначити палітру бренду та систему типографіки для всього сайту. Зміна глобального кольору одночасно оновлює кожен елемент, що посилається на нього, на всіх сторінках.
    Структура секцій та колонок: Клацніть правою кнопкою миші на будь-якій секції, щоб дублювати, видалити або перемістити її. Використовуйте панель навігатора (іконка шарів на нижній панелі інструментів) для складних макетів із вкладеними секціями.
    
    Після редагування натисніть Оновити (не Опублікувати — сторінка вже опублікована; Оновити зберігає ваші зміни).
    Використання блокового редактора Gutenberg
    Перейдіть до Сторінок, натисніть Редагувати на цільовій сторінці. Блоковий редактор відкривається з імпортованим макетом на основі патернів.
    Основні дії з налаштування:
    
    Натисніть на будь-який блок, щоб вибрати його. Використовуйте панель інструментів над блоком для параметрів вирівнювання, кольору та форматування.
    Використовуйте Перегляд списку (іконка стопки рядків на верхній панелі інструментів), щоб переглядати та навігувати повну ієрархію блоків — необхідно для складних шаблонів із вкладеними блоками Group та Cover.
    Щоб змінити глобальні стилі, перейдіть до Зовнішній вигляд > Редактор > Стилі (теми з повним редагуванням сайту) або Зовнішній вигляд > Налаштувати (класичні теми).
    Панель Стилі у редакторі сайту дозволяє встановити глобальну типографіку та колірні палітри, які поширюються на всі блоки.
    
    Примітка щодо продуктивності: Шаблони на основі Gutenberg генерують чистіший HTML і завантажуються швидше, ніж шаблони на основі Elementor, оскільки не потребують виконання JavaScript Elementor. Для сайтів, де пріоритетом є Core Web Vitals, шлях через Gutenberg є вимірно кращим.
    Крок 5: Налаштуйте глобальні параметри теми
    Після імпорту відкрийте Зовнішній вигляд > Налаштувати, щоб точно налаштувати глобальну систему дизайну. Доступні панелі варіюються залежно від теми, але всі основні теми зі стартовими шаблонами надають:
    Типографіка:
    
    Встановіть основне сімейство шрифтів для заголовків (H1–H6) та основного тексту.
    Визначте розміри шрифтів, висоту рядків та міжлітерний інтервал глобально.
    Використовуйте системні шрифти (-apple-system, BlinkMacSystemFont, sans-serif) або вибір з Google Fonts. Системні шрифти усувають зовнішній HTTP-запит та покращують показники LCP.
    
    Кольори:
    
    Визначте основний колір (акцент бренду), вторинний колір, колір тексту та колір фону.
    Ці значення заповнюють CSS-властивості (--wp--preset--color--primary), на які посилаються всі імпортовані блоки та віджети.
    
    Макет:
    
    Встановіть глобальну ширину контейнера (зазвичай 1200px–1440px для сучасних дизайнів).
    Налаштуйте макет заголовка: фіксований заголовок, прозорий заголовок при прокручуванні, поведінка мобільного меню.
    Налаштуйте колонки підвалу, області віджетів та текст авторських прав.
    
    Специфічно для Astra: Кастомайзер Astra має панель Продуктивність, де можна вимкнути завантаження Google Fonts (корисно, якщо ви самостійно розміщуєте шрифти для відповідності GDPR) та увімкнути мінімізацію CSS.
    Крок 6: Замініть контент-заповнювачі
    Демонстраційний контент шаблону є навмисно загальним. Систематична заміна є швидшою, ніж редагування сторінка за сторінкою:
    
    Перейдіть до Сторінок та відсортуйте за Датою, щоб знайти всі сторінки, імпортовані під час налаштування шаблону.
    Відкрийте кожну сторінку та замініть:
    
    
    Заголовки та основний текст на ваш реальний контент.
    Демонстраційні зображення на власні фотографії або ліцензовані стокові зображення. Використовуйте описовий текст alt для кожного зображення.
    Номери телефонів-заповнювачів, адреси та електронні адреси.
    Демонстраційні посилання навігації — перевірте Зовнішній вигляд > Меню, щоб переконатися, що всі пункти меню вказують на реальні сторінки.
    
    
    Оновіть Назву сайту та Слоган у розділі Налаштування > Загальні.
    Встановіть Головну сторінку та Сторінку блогу у розділі Налаштування > Читання.
    
    Критичний крок для SEO: Після заміни контенту встановіть Yoast SEO або Rank Math та встановіть унікальний мета-заголовок та мета-опис для кожної сторінки. Імпорт шаблонів не заповнює SEO-метадані.
    Крок 7: Розширте функціональність за допомогою плагінів
    Стартові шаблони забезпечують каркас дизайну, а не функціональність. Залежно від типу вашого сайту вам знадобляться додаткові плагіни:
    
    
    
    Тип сайту
    Рекомендований плагін
    Призначення
    
    
    
    
    
    
    
    
    —
    —
    —
    
    
    
    
    
    
    
    
    eCommerce
    WooCommerce
    Каталог товарів, кошик, оформлення замовлення
    
    
    
    
    
    
    
    
    Генерація лідів
    WPForms або Contact Form 7
    Контактні форми та форми запитів
    
    
    
    
    
    
    
    
    Членство
    MemberPress або Restrict Content Pro
    Контент з обмеженим доступом
    
    
    
    
    
    
    
    
    SEO
    Rank Math або Yoast SEO
    SEO на сторінці, карти сайту, схема
    
    
    
    
    
    
    
    
    Продуктивність
    WP Rocket або LiteSpeed Cache
    Кешування, мінімізація, відкладене завантаження
    
    
    
    
    
    
    
    
    Безпека
    Wordfence або Solid Security
    Брандмауер, сканування на шкідливе ПЗ
    
    
    
    
    
    
    
    
    Резервне копіювання
    UpdraftPlus
    Автоматичне резервне копіювання поза сайтом
    
    
    
    
    
    Якщо ви використовуєте WooCommerce, переконайтеся, що ваш хостинговий план може впоратися з додатковим навантаженням на базу даних. VPS з cPanel надає вам запас ресурсів та інтерфейс управління для роботи WooCommerce у масштабі без обмежень спільного хостингу.
    Крок 8: Попередній перегляд, тестування та запуск
    Перед публікацією пройдіть цей контрольний список перед запуском:
    Візуальне QA:
    
    Перегляньте на десктопі, планшеті та мобільному пристрої за допомогою адаптивного попереднього перегляду кастомайзера WordPress або DevTools браузера.
    Переконайтеся, що на жодній сторінці не залишилося демонстраційних зображень.
    Перевірте, що всі шрифти завантажилися правильно (обмеження мережі в DevTools може виявити мерехтіння при заміні шрифтів).
    
    Функціональне тестування:
    
    Надішліть кожну форму та підтвердіть отримання сповіщення електронною поштою. Перевірте конфігурацію Email Хостингу, якщо транзакційні листи не доставляються — стандартний wp_mail() WordPress покладається на функцію mail() PHP, яку багато хостів блокують. Використовуйте SMTP-плагін (WP Mail SMTP, Post SMTP) з автентифікованими обліковими даними.
    Натисніть на кожне посилання навігації та кнопку. Імпортовані шаблони іноді містять жорстко закодовані демонстраційні URL.
    Протестуйте процес оформлення замовлення, якщо WooCommerce активний.
    
    Базовий рівень продуктивності:
    
    Запустіть тест PageSpeed Insights на головній сторінці. Прагніть до LCP менше 2,5 секунди та показника CLS нижче 0,1.
    Якщо показники низькі, увімкніть кешування, оптимізуйте зображення (конвертуйте у WebP) та розгляньте використання CDN.
    
    Безпека:
    
    Переконайтеся, що HTTPS застосовується на всьому сайті. Перевірте, що в консолі браузера немає попереджень про змішаний контент.
    Змініть стандартне ім’я користувача адміністратора WordPress, якщо воно все ще admin.
    Встановіть права доступу до файлів: каталоги на 755, файли на 644, та wp-config.php на 600.
    
    Після проходження всіх перевірок сайт готовий до запуску. Якщо він все ще знаходиться на тимчасовому домені, оновіть Адресу WordPress (URL) та Адресу сайту (URL) у розділі Налаштування > Загальні після вказівки вашого домену. Ви можете зареєструвати або перенести свій домен через Реєстрацію доменів, якщо ви ще цього не зробили.
    Поширені помилки та як їх уникнути
    Імпорт зупиняється в середині процесу: Зазвичай спричинено занадто низьким значенням PHP memory_limit або max_execution_time. Підвищте ці значення, як описано в розділі передумов, потім повторіть імпорт.
    Демонстраційні зображення не завантажуються після імпорту: Плагін Starter Templates завантажує зображення із зовнішнього CDN. Якщо ваш сервер має обмеження вихідного HTTP або брандмауер, що блокує зовнішні запити, зображення не завантажаться. Додайте домени CDN плагіна до білого списку або тимчасово послабте правила вихідного трафіку під час імпорту.
    Шаблон виглядає інакше, ніж у попередньому перегляді: Це майже завжди означає, що необхідний плагін (Elementor Pro, певний додаток) не було встановлено. Майстер імпорту перераховує необхідні плагіни — встановіть усі з них перед імпортом.
    Зміни кастомайзера не застосовуються до імпортованих сторінок: Деякі шаблони Elementor використовують власні глобальні налаштування Elementor, а не кастомайзер теми. Зміни, внесені у Зовнішній вигляд > Налаштувати, не впливатимуть на елементи, керовані Elementor. Використовуйте Elementor > Налаштування сайту для цих сторінок.
    Погіршення продуктивності після імпорту: Повний імпорт сайту завантажує всі демонстраційні плагіни та ресурси. Перевірте активні плагіни після імпорту та деактивуйте все, що вам не потрібно. Кожен активний плагін додає накладні витрати на виконання PHP при кожному завантаженні сторінки.
    Матриця технічних рішень: вибір шляху розробки
    
    
    
    Сценарій
    Рекомендований шлях
    
    
    
    
    
    
    
    
    —
    —
    
    
    
    
    
    
    
    
    Новий сайт, без існуючого контенту, потрібна швидкість
    Astra + Starter Templates + Elementor, повний імпорт сайту
    
    
    
    
    
    
    
    
    Сайт з пріоритетом продуктивності (пріоритет Core Web Vitals)
    Kadence + Kadence Starter Templates + лише Gutenberg
    
    
    
    
    
    
    
    
    Існуючий сайт, редизайн лише головної сторінки
    Будь-яка тема + імпорт шаблону однієї сторінки
    
    
    
    
    
    
    
    
    Магазин WooCommerce
    Astra або Kadence + шаблон для WooCommerce
    
    
    
    
    
    
    
    
    Розробник, що створює сайт для клієнта
    Neve + дочірня тема + вибірковий імпорт блоків
    
    
    
    
    
    
    
    
    Необхідний мінімальний набір плагінів
    Kadence + Gutenberg, без Elementor
    
    
    
    
    
    Контрольний список перед запуском
    
    Ліміт пам’яті PHP становить 256 MB або більше перед імпортом
    SSL сертифікат активний та HTTPS застосовується
    Повний імпорт сайту спочатку виконано на тестовому середовищі, потім перенесено на продакшн
    Весь демонстраційний текст-заповнювач та зображення замінено
    SEO мета-заголовки та описи встановлено на кожній сторінці
    Всі форми протестовано з підтвердженням реальної доставки електронної пошти
    Меню навігації перевірено — немає недійсних посилань або демонстраційних URL
    Базовий рівень продуктивності виміряно за допомогою PageSpeed Insights
    Плагін кешування активний та налаштований
    Ім’я користувача адміністратора змінено зі стандартного admin
  • Права доступу wp-config.php встановлено на 600
  • DNS домену вказує на правильний IP сервера

FAQ

Чи можна використовувати стартовий шаблон на існуючому сайті WordPress без втрати поточного контенту?

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

Чи працюють стартові шаблони з будь-якою темою WordPress, чи лише з певними?

Стартові шаблони прив’язані до конкретних екосистем тем. Плагін Astra Starter Templates працює лише з темою Astra. Kadence Starter Templates вимагають теми Kadence. Ви не можете виконувати перехресний імпорт шаблонів між несумісними темами.

Чому мої імпортовані сторінки виглядають інакше, ніж у попередньому перегляді шаблону?

Найпоширенішою причиною є відсутній необхідний плагін — зазвичай Elementor Pro або преміум-додаток. Майстер імпорту перераховує всі необхідні плагіни; встановіть кожен з них перед імпортом. Другорядною причиною може бути ліміт пам’яті PHP, через який імпорт завершився з помилкою без повідомлення, залишивши деякі ресурси незавантаженими.

Чи вплине використання стартового шаблону на SEO мого сайту?

Не за своєю суттю, але стартові шаблони імпортують демонстраційний контент без SEO-метаданих. Необхідно вручну встановити унікальні мета-заголовки, описи та структуровані дані для кожної сторінки. Крім того, деякі шаблони з великою кількістю Elementor генерують роздутий HTML, що може негативно вплинути на Core Web Vitals — перевірте за допомогою PageSpeed Insights після імпорту.

Чи можна перейти на інший стартовий шаблон після того, як сайт вже налаштовано?

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

15%

Збережіть 15% на всі хостинг-послуги

Перевірте свої навички і отримайте Знижку на будь-який план хостингу

Використовуй код:

Skills
Почати