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

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

💡 Швидкий огляд:

• Підберіть колірну схему з 3 кольорів через Adobe Color, Coolors або ColorHexa
• Налаштуйте шрифти через Google Fonts, Use Any Font для кастомних гарнітур
• Змініть формат дати й часу одним рядком коду або через Customizer

Підбір колірної схеми

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

Оптимальний підхід, три базові кольори: основний (фон/текст), акцентний (кнопки, посилання, важливі елементи) і допоміжний (обведення, роздільники, hover-стани). Більше трьох, ризик отримати візуальний шум; менше, нудно. Головне правило: акцентний колір використовуйте дозовано, лише там, де потрібно привернути увагу.

З чого почати підбір:

Adobe Color (колишній Kuler)

Інструмент від Adobe для створення колірних схем за правилами гармонії: монохроматична, комплементарна, тріадна, аналогова. Під капотом, колірне коло, де ви задаєте базовий відтінок, а система автоматично підбирає решту. Можна витягнути палітру із завантаженого зображення, зручно, якщо є референс. Доступний безкоштовно на color.adobe.com.

Coolors

Генератор палітр, заточений під швидкість. Натискаєте пробіл, отримуєте нову комбінацію з п'яти кольорів. Кожен можна зафіксувати і крутити решту. На виході, готові HEX-коди. Є плагін для Chrome/Firefox та iOS-застосунок. Працює на coolors.co.

ColorHexa

ColorHexa — це не просто піпетка, а енциклопедія кольору. Вводите HEX, RGB або назву, отримуєте сторінку з комплементарними відтінками, градієнтами, тріадами, відсотковим складом і сліпим переглядом (як колір бачать люди з різними типами дальтонізму). Блендер кольорів: введіть #ff0000+#0000ff+#ff00ff, отримаєте результуючий #aa00aa з повною розкладкою. colorhexa.com.

Готові HTML-палітри

Якщо не хочеться підбирати з нуля, беріть готові палітри. htmlcolorcodes.com, 216 веббезпечних кольорів із HEX-кодами, сумісних із CSS, Photoshop і будь-якою графікою. Сервіс Paletton (раніше Color Scheme Designer) дає схеми з попереднім переглядом на макеті сайту.

CSS Gradient Generator

Градієнти повертаються, тепер це не смуги з 2012-го, а тонкі переходи на тлі секцій і кнопок. ColorZilla Gradient Editor, Photoshop-подібний редактор: задаєте опорні точки з кольорами та прозорістю, рухаєте midpoint, копіюєте готовий CSS. Підтримує linear, radial, repeating-градієнти. Є плагін для Chrome і Firefox, піпетка прямо з браузера.

Вибір і налаштування шрифтів

Кольори привертають увагу, текст, утримує. Шрифт впливає на читабельність і сприйняття тону: строгий serif створює відчуття редакційної якості, чистий sans-serif, технологічності.

Проблема вебшрифтів в тому, що відвідувач побачить лише ті, які встановлені в нього на комп’ютері, якщо не використовувати вбудовані (web fonts). Тому для кастомного оформлення, тільки зовнішні шрифти.

Базове правило: не більше двох шрифтів на сторінці. Один для заголовків (крупний, характерний), другий для основного тексту (максимально читабельний). Третій, тільки якщо потрібен моноширинний для коду.

Google Fonts, основне джерело

Безплатний каталог із 1 500+ сімейств на fonts.google.com. Підключення, двома рядками. Класичний спосіб, через header.php теми:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Або в style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Після імпорту шрифт доступний у будь-якому CSS-правилі:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

GDPR-нюанс: Google Fonts, що завантажуються напряму з серверів Google, передають IP-адреси відвідувачів. З 2022 року суди в ЄС визнали це порушенням. Рішення, плагін Local Google Fonts, який завантажує шрифти на ваш сервер і роздає локально. Альтернатива для тих, хто не хоче возитися з плагінами,, стаття про локальне завантаження Google Fonts у нашому блозі.

Кастомні шрифти через плагін

Якщо потрібен фірмовий шрифт, якого немає в Google Fonts,, Use Any Font. Завантажуєте ttf, otf або woff, плагін конвертує в woff2 і додає в адмінку. Безплатна версія дозволяє завантажити один шрифт; Pro знімає обмеження.

Ручне підключення через @font-face

Якщо віддаєте перевагу коду перед плагінами, покладіть файл шрифту в папку /wp-content/themes/ваша-тема/fonts/ і додайте в style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Використання:

1
#menu { font-family: 'Museo300', sans-serif; }

Форматування дати й часу

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

Спосіб 1: через Customizer (без коду)

Перейдіть у Appearance → Customize → General Settings. Там само змінюється формат часу. Підходить для більшості класичних тем.

Спосіб 2: через single.php (точний контроль)

Відкрийте Appearance → Theme Editor → single.php. Знайдіть функцію the_time() або the_date():

1
<?php the_time('F Y'); ?>

Символи формату:

• l, повна назва дня тижня (рядкова L)
• F, місяць словом
• j, день місяця числом
• Y, рік чотирма цифрами
• y, рік двома цифрами

Приклади комбінацій:

('l, j F Y') → Sunday, 14 June 2026. ('j F, Y') → 14 June, 2026.

Не чіпайте одинарні лапки всередині дужок, редагуйте лише символи між ними. Якщо в темі використовується the_date() замість the_time(), формат змінюється простіше: Settings → General → Date Format.

Використання зображень

Додавання зображень у WordPress через кнопку «Додати медіафайл» у редакторі запису. Курсор у потрібне місце → Add Media → вибрати зображення з медіатеки або завантажити нове.

Праворуч, панель налаштувань вкладення: заголовок, alt-текст (важливий для SEO та доступності), розмір, вирівнювання, посилання. Для швидкості сайту завантажуйте зображення вже стиснутими (TinyPNG або ShortPixel до завантаження). Докладніше, у нашому посібнику з медіабібліотеки WordPress.

Додавання favicon

Фавікон — це крихітний квадратик у вкладці браузера та закладках. Маленька деталь, яка працює на впізнаваність: коли у користувача відкрито 20 вкладок, favicon — це єдине, що візуально вирізняє ваш сайт з-поміж інших.

Як створити favicon

Найнадійніший сервіс, RealFaviconGenerator. Завантажуєте квадратне зображення (хоча б 260×260), отримуєте пакет іконок під усі платформи: iOS, Android, Windows tiles, Safari pinned tab. Плюс готовий HTML-код для вставки.

Якщо потрібен простий.ico розміром 16×16, підійде будь-який графічний редактор зі збереженням у.ico (GIMP безкоштовний). Або онлайн-сервіс Favicon.io.

Як встановити у WordPress

Найпростіший спосіб, вбудований Site Icon. З версії WordPress 4.3 він доступний у Customizer:

Appearance → Customize → Site Identity → Site Icon. Завантажуєте квадратне зображення, WordPress сам наріже потрібні розміри під усі платформи. Без плагінів, без FTP, без header.php.

Плагінний спосіб, All In One Favicon, дає більше контролю: окремі іконки для адмінки, фронтенду, різні для різних пристроїв. Але для 95% сайтів вбудованого Site Icon достатньо.

Ручний метод (додати в header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Файл favicon.ico покладіть у корінь папки теми. Не забудьте продублювати в public_html, щоб favicon відкривався за адресою вашсайт.com/favicon.ico.

⁉️🤔 Часті запитання

Чи можна змінити дизайн сайту без втрати контенту?

Так, зміна теми WordPress не зачіпає пости, сторінки та медіафайли. Вони зберігаються в базі даних окремо від теми. Єдине, що може «поїхати», — це верстка та розташування елементів, особливо якщо стара тема використовувала кастомні типи записів або шорткоди. Перед зміною зробіть повний бекап (хостинг + база даних). Для безпечного тестування використовуйте staging-сайт, багато хостингів (SiteGround, Kinsta, WP Engine) надають його в один клік.

Скільки шрифтів оптимально для сайту?

Два: один для заголовків, один для основного тексту. Третій, моноширинний для коду, якщо він є на сайті. Кожен додатковий шрифт збільшує час завантаження на 200-400 мс і створює візуальний шум. Google Fonts дозволяє вибрати лише потрібні накреслення (regular + bold = 2 файли замість 9), а плагін Local Google Fonts додатково кешує їх на сервері.

Чи обов’язково возитися з кодом для кастомізації?

Ні. WordPress Customizer (Appearance → Customize) перекриває більшість задач: кольори, шрифти, логотип, favicon, фонові зображення, CSS. Block-теми (з WP 5.9) дають Site Editor, ще більш візуальний спосіб без коду. Код потрібен, коли вимагається тонке налаштування: формат дати в single.php, кастомний @font-face, специфічний CSS для конкретного плагіна.

Що робити, якщо після зміни теми сайт зламався?

Перше: не панікувати, контент нікуди не подівся. Друге: якщо адмінка доступна, поверніть стару тему (Appearance → Themes → Activate). Якщо адмінка недоступна, зайдіть по FTP у /wp-content/themes/, перейменуйте папку нової теми (додайте _disabled), і WordPress автоматично перемкнеться на стандартну тему. Після відновлення увімкніть WP_DEBUG у wp-config.php, щоб побачити помилки.

Як перевірити, що favicon працює?

Відкрийте вашсайт.com/favicon.ico, якщо іконка відображається, файл на місці. У браузері favicon з’являється не одразу: кешується агресивно. Для перевірки відкрийте сайт у режимі інкогніто або примусово оновіть кеш (Ctrl+Shift+R). RealFaviconGenerator дає інструмент перевірки favicon за URL.

Редизайн WordPress: що робити в першу чергу

Порядок дій для кастомізації з нуля: колірна схема → шрифти → логотип і favicon → формат дати → компонування віджетів і меню. Саме в такій послідовності: кольори й типографіка — це фундамент, на який нанизується все інше.

Якщо сайт уже працює і приносить трафік, не робіть редизайн на живому домені. Staging-копія + тестування → перенесення. Зміни, помітні пошуковикам (зміна HTML-структури, заголовків, URL), робіть із розумінням: різкий редизайн без редиректів може просадити позиції.

Для тих, хто хоче заглибитися в тему: посібник із користувацьких шрифтів у нашому блозі, стаття про медіабібліотеку WordPress для роботи із зображеннями, а також детальний розбір локального завантаження Google Fonts з тестом GTmetrix до/після.

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