Ця стаття — локалізована версія японського оригіналу. Читати японський оригінал
Blocksy — безкоштовна багатофункціональна тема для WordPress. Більшість налаштувань виконується в розділі «Вигляд» (Appearance) → «Налаштувати» (Customize), тобто в кастомайзері, із попереднім переглядом, а шапку й підвал можна збирати перетягуванням. У цій статті в порядку налаштування розглянуто встановлення теми та допоміжного плагіна «Blocksy Companion», кольори й шрифти, які варто обрати насамперед, створення шапки, відображення списку блогу й сторінки запису та підготовку дочірньої теми.
З чого складається Blocksy
Blocksy складається з трьох частин.
- Blocksy (сама тема): безкоштовно доступна на WordPress.org. Має налаштування дизайну в кастомайзері, а також конструктори шапки й підвалу
- Blocksy Companion (безкоштовний плагін): відповідає за імпорт стартових сайтів (демоданих) і додавання розширень
- Blocksy Pro (платний): додає елементи шапки, умовне відображення, докладніші можливості розмітки тощо
Найрозумніше почати зі зв’язки самої теми й Companion, а до Pro повертатися тоді, коли стане ясно, що безкоштовних можливостей бракує (розподіл функцій і ціни можуть змінюватися, тому перевіряйте їх на офіційному сайті станом на жовтень 2026 року).
Також Blocksy за побудовою ближча до класичних тем і водночас підтримує редактор блоків. Місця керування тут відрізняються від блокових тем, які цілком збираються в редакторі сайту («Вигляд» → «Редактор»), тому запам’ятайте: «загальний дизайн — у кастомайзері, а вміст записів і сторінок — у редакторі блоків», і плутанини не буде.
Встановлення та підключення Companion
- У розділі «Вигляд» (Appearance) → «Теми» (Themes) → «Додати нову» (Add New) знайдіть «Blocksy», установіть і активуйте тему
- Скориставшись підказкою, що з’являється після активації, або панеллю Blocksy, яка додається в адмінку, установіть і активуйте Blocksy Companion
За допомогою WP-CLI це можна зробити так.
wp theme install blocksy --activate
wp plugin install blocksy-companion --activateЯкщо ви змінюєте тему на вже працюючому сайті, заздалегідь зробіть резервну копію всього сайту. Після зміни теми шорткоди, віджети й розташування меню, що були власними для попередньої теми, можуть не перенестися.
Чи використовувати стартовий сайт
Після встановлення Companion на панелі Blocksy можна імпортувати «стартові сайти». З ними одразу додаються готові сторінки, налаштування кастомайзера й потрібні плагіни, тож для нового сайту швидко видно, який вигляд має вийти.
Проте на сайті, де вже є записи, краще цього не робити. Додадуться демосторінки, зображення й меню, а налаштування кастомайзера буде перезаписано, тому згодом буде важко зрозуміти, що з цього було вашим. Якщо використовувати, то лише на початку роботи над новим сайтом або на тестовому середовищі (staging), а потім перенести потрібні налаштування вручну.
Загальні налаштування, які варто визначити першими
Відкривши «Вигляд» → «Налаштувати», ви побачите перелік параметрів Blocksy. Назви пунктів часто перекладено, але в різних версіях написання може змінюватися. Спочатку займіться двома параметрами, що впливають на весь сайт.
Кольори (колірна палітра)
У налаштуваннях кольорів серед загальних параметрів визначте базову палітру сайту. У Blocksy колір тексту, посилань, кнопок тощо посилається на кольори цієї палітри, тож якщо змінити палітру, колірна схема всього сайту переключиться разом.
Якщо вказувати колір безпосередньо в окремих місцях, то коли згодом захочеться змінити схему, доведеться виправляти все по одному. Найзручніше в роботі так: основне задавайте палітрою, а окремо вказуйте колір лише там, де без цього не обійтися.
Шрифти (типографіка)
У налаштуваннях типографіки визначаються шрифти основного тексту й заголовків, розмір літер та інтервал між рядками. Для японськомовного сайту варто пам’ятати: латинський шрифт не застосовується до японських ієрогліфів. Японські символи відображаються шрифтом пристрою відвідувача, тому для основного тексту залиште типовий варіант на кшталт «системного шрифту» або вкажіть шрифт із підтримкою японської.
Якщо підключати японський шрифт як вебшрифт, файли великі й можуть уповільнити відображення. Якщо вирішите це робити, обмежте кількість накреслень і перевірте вплив на швидкість, наприклад за допомогою PageSpeed Insights.
Збирання шапки
Відкрийте в кастомайзері розділ шапки — унизу екрана з’явиться конструктор шапки. Шапка поділена на верхній, середній і нижній рядки, а такі елементи, як логотип (назва сайту), меню, пошук і кнопки, ви перетягуєте ліворуч, у центр чи праворуч у кожному з рядків.
Найчастіше спотикаються на тому, що шапки для комп’ютера й смартфона налаштовуються окремо. Якщо перемкнути конструктор на відображення для смартфона, з’явиться інше розташування. На смартфоні основна схема така: меню розміщується в «offcanvas» — панелі, що відкривається значком-гамбургером (тригером). Якщо налаштувати лише версію для комп’ютера й опублікувати, на смартфоні може не з’явитися меню, тому перевіряйте обидва варіанти відображення.
Якщо клацнути елемент, ліворуч з’являться його налаштування (розмір літер, колір, відступи тощо). Самі пункти меню створюються в розділі «Вигляд» → «Меню» (Menus) і призначаються елементу меню в шапці.
Підвал збирається за тим самим принципом у конструкторі підвалу. Щоб змінити розташування областей віджетів або напису про авторські права, відредагуйте їх у розділі підвалу.
Відображення списку блогу й сторінки запису
У кастомайзері є налаштування для кожного типу сторінок: список записів (блог), окремий запис, сторінки тощо.
- Список записів: спосіб розташування (картки, список тощо), кількість стовпців у рядку, співвідношення сторін головного зображення (Featured image), довжина витягу (Excerpt), відомості про запис, які показуються (дата публікації, категорії тощо)
- Окремий запис: ширина області вмісту, наявність і розташування бічної панелі, спосіб показу заголовка, відображення пов’язаних записів і відомостей про автора
- Сторінки: як і для окремого запису, налаштовуються ширина й наявність бічної панелі
Найбільше на зручність читання сторінки запису впливає ширина основного тексту. Довгий японський текст у надто довгих рядках читається погано, тому якщо бічної панелі немає, робіть основний текст вужчим і перевіряйте, чи не стають літери надто дрібними на смартфоні.
Якщо потрібно змінити розмітку лише для окремого запису, це можна зробити в налаштуваннях Blocksy, що відображаються в бічній панелі екрана редагування запису, наприклад вимкнувши бічну панель лише для цього запису.
Підготуйте дочірню тему
Якщо редагувати файли теми безпосередньо, зміни зникнуть після оновлення теми. Якщо потрібно лише трохи додати CSS, вистачить «Додаткового CSS» (Additional CSS) у кастомайзері. Коли потрібне налаштування на PHP або перевизначення шаблонів, створіть дочірню тему.
Офіційний сайт Blocksy пропонує заготовку дочірньої теми. Якщо створюєте її самостійно, покладіть у wp-content/themes/blocksy-child/ такий style.css,
/*
Theme Name: Blocksy Child
Template: blocksy
*/а в functions.php у цьому самому каталозі підключіть стилі дочірньої теми.
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'blocksy-child-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}, 20 );Після переходу на дочірню тему налаштування кастомайзера зберігаються окремо від батьківської теми, тож налаштування, виконані в батьківській, можуть стати невидимими. Налаштування кастомайзера можна перенести за допомогою функцій експорту й імпорту, якщо встановлено Companion, тож експортуйте їх перед переходом на дочірню тему — це убереже від повторної роботи.
Оновлення та експлуатація
Blocksy і Companion оновлюються часто. Перед оновленням робіть резервну копію, а після оновлення перевірте шапку, сторінку запису й відображення на смартфоні. Якщо вигляд зіпсувався, очистьте кеш плагінів кешування чи CDN і перевірте ще раз. Якщо ви користуєтеся плагіном для прискорення, що об’єднує й стискає CSS, застарілий CSS може залишатися, і сторінка виглядатиме зламаною.
Підсумок
- Почніть із зв’язки теми Blocksy та Blocksy Companion, а до Pro повертайтеся, коли стане ясно, яких можливостей бракує
- Стартові сайти використовуйте для нового сайту або на тестовому середовищі; на наявному сайті остерігайтеся перезапису налаштувань
- Кольори визначайте колірною палітрою, текст — типографікою. Пам’ятайте, що латинські шрифти не діють на японські символи
- Конструктор шапки налаштовується окремо для комп’ютера й смартфона. Перевіряйте обидва відображення, а якщо чіпаєте PHP — користуйтеся дочірньою темою
Маєте запитання щодо WordPress? Видавець сайту перебуває в Японії й відповідає японською. Написати нам (японською)