Як перейти з класичної теми на блокові теми WordPress

Якщо ви шанувальник конструктора Lego, то вам сподобаються теми блоків WordPress.

Починаючи з версії 5.9, WordPress надає повну підтримку тем блоків. Це була значна зміна для більшості сайтів, які були побудовані на тому, що тепер відомо як “класичні” теми.

Але перехід від класичної теми до теми на основі блоків вимагає певної роботи.

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

Це не буде так весело, як збирати колекційну модель Зірки Смерті з 3,441 деталлю 2005 року. Але ми зробимо все можливе.

Що таке тема блоків WordPress?

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

Спочатку відомі як “повне редагування сайту” (FSE) або “редагування сайту,” ці теми додають модульну, блокову функціональність до макетів і шаблонів вашої теми. Схоже на те, як редактор Gutenberg ввів блоки та шаблони блоків, які можна використовувати у вашому вмісті сторінок та постів.

Але тепер ви можете налаштовувати макет та вміст на всьому вашому сайті (включаючи шаблони сторінок та користувацькі шаблони) за допомогою візуальних блоків у стилі drag-and-drop.

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

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

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

Крім того, ви можете створювати та використовувати спільні блоки-шаблони. Це заздалегідь створені блоки, які розробили окремі особи, компанії та розробники WordPress.

Загалом, теми у вигляді блоків перетворюють WordPress на більш модульну та гнучку систему. Вона емулює багато функцій інших конструкторів сайтів стилю “drag-and-drop”, які стали популярними завдяки компаніям на кшталт Squarespace та Wix.

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

Блокові теми проти класичних тем

Класичні теми WordPress були створені для забезпечення послідовного стилю та дизайну.

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

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

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

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

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

Крім додаткової гнучкості та контролю, блокові теми пропонують багато переваг.

Усунення шорткодів та редагування HTML-коду

З класичними темами багато користувачів WordPress почали покладатися на власні методи додавання функціональності або редагування макету та дизайну своїх блогів та сторінок.

Шорткоди та користувацькі HTML-фрагменти часто використовувались для заміни або введення нових функцій, які не були включені в тему вебсайту.

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

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

Розблокуйте елементи рідного конструктора сторінок

Для багатьох користувачів тема на основі блоків усуне потребу у плагінах конструктора сторінок, які стали популярними в спільноті WordPress.

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

Ці теми, звичайно, все ще популярні. Divi, Elementor, Gutenify та інші були піонерами у цій галузі, але зараз вам не обов’язково використовувати саме ці теми, щоб розблокувати можливості модульного побудови сайтів.

Покращте продуктивність сайту

Ще однією великою перевагою переходу на блокові теми є покращення швидкості завантаження сторінок та продуктивності сайту.

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

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

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

Зменшення конфліктів, оновлень та вразливостей

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

Як сайти стають складнішими, додаткові плагіни, які використовуються, часто можуть конфліктувати один з одним. Це може створити проблеми, які ламають сайт, наприклад, знаменитий Білий екран смерті. І оновлення плагінів може здатися справжнім кидком кубиків. («Чи буде цей оновлення тим, що зламає мій сайт?!»)

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

Чи варто переходити на тему блоків?

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

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

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

І це цінний крок на шляху до покращення продуктивності та безпеки вашого вебсайту.

Коли не варто переходити?

Коротко: Якщо у вас немає часу та ресурсів, щоб присвятити зміні. Зміна вашої теми WordPress, особливо якщо вона створена на замовлення або сильно налаштована, вимагає значної кількості роботи.

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

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

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

Давайте розглянемо процес.

Як перейти на тему блоків WP

Крок 1: Створіть резервну копію вашого сайту

Кожного разу, коли ви робите значні оновлення вашого сайту, створюйте резервну копію.

Це настільки важливо, що ми повторимо це.

Створіть резервну копію. (Серйозно.)

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

Якщо ви ще не користуєтеся, розгляньте WordPress плагін наприклад BlogVault, UpdraftPlus, або Jetpack Backup для збереження всіх файлів та вмісту вашого сайту.

Таким чином, якщо щось піде не так, у вас буде можливість відновити ваш сайт.

Крок 2: Оцініть свій вебсайт

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

Зміна вашої теми зазвичай має два негайні наслідки:

1. Загальний макет, кольори та стилі вашого веб-сайту зміняться.
2. Ви втратите будь-який користувацький код або модифікації, які були додані безпосередньо до файлів або шаблонів вашої старої теми.

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

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

Отже, що вам слід зробити?

Перегляньте кожну сторінку на вашому вебсайті (або принаймні всі унікальні шаблони).

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

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

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

Крок 3: Виберіть тему

Тепер прийшов час вибрати вашу тему.

Який ваш бажаний результат?

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

Незалежно від напрямку, ви можете почати з перегляду доступних тем в директорії тем WordPress. (Клікніть “Block Themes”, щоб застосувати фільтр.)

Ви також можете ознайомитися з нашим списком 27 найкращих блок-тем.

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

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

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

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

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

Крок 4: Встановлення та активація теми

Як тільки ви вибрали тему, прийшов час її встановити.

Ви можете або завантажити zip-файл блокової теми локально, а потім його завантажити. Або, якщо тема знаходиться в директорії WordPress, ви можете встановити її з вашої WP Admin.

Для цього перейдіть до Зовнішній вигляд > Теми, та натисніть кнопку «Додати нову».

Потім введіть назву теми у поле пошуку. Знайдіть тему, яку ви хочете встановити, та наведіть курсор на неї. Клікніть “Встановити”.

Тепер ваша нова тема встановлена!

Поверніться на свою сторінку Теми і знайдіть тему. Ви можете активувати її одразу, натиснувши «Активувати».

Замітка для гіків: Якщо ви все ще не впевнені, як ваш сайт виглядатиме з новою темою, скористайтеся опцією “Live Preview”, щоб побачити, як це буде виглядати. Або, ще краще, встановіть тему та виконайте наступні кроки на тимчасовій версії вашого сайту. Таким чином, зміни не будуть опубліковані, поки ви оновлюєте та налаштовуєте свій сайт.

Крок 5: Налаштування макета та дизайну

Після активації теми ваш сайт (ймовірно) виглядатиме інакше, ніж раніше.

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

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

Зазвичай, якщо ваша тема може використовувати Редактор сайту, вона відобразить нове повідомлення на сторінці customize.php , з текстом “Гура! Ваша тема підтримує редагування сайту за допомогою блоків! Розкажіть більше. Використовуйте Редактор сайту.”

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

Тепер ви побачите екран Редактора. Звідси ви можете зануритись та редагувати будь-яку конкретну сторінку чи пост на вашому сайті. Ви також можете редагувати та створювати нові шаблони або візерунки.

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

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

У налаштуваннях “Block” ви зможете побачити кілька опцій стилізації. Тут ви можете налаштувати елементи дизайну, такі як розмір шрифту, вирівнювання, інтервали та колірні схеми.

Ви також можете додати користувацькі CSS класи для кожного елементу в розділі Розширені.

Крок 6: Перевірте на наявність зламаних Плагінів або віджетів

Не кожен плагін, віджет або налаштування буде працювати з темами блоків.

Якщо ваш сайт використовував кілька плагінів і віджетів (які ви мали б ідентифікувати на етапі 2), то вам може знадобитися внести деякі корективи в backend.

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

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

Знайдіть ідеальну тему блоку для вашого вебсайту

Тепер, коли ви знаєте кроки, настав час для веселої частини.

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

Деякі з наших улюблених популярних тем блоків:

1. Twenty Twenty-Three
2. GeneratePress
3. Blockbase
4. SeedProd
5. Divi

З правильною темою ви на правильному шляху до того, щоб стати майстром блоків WordPress, DreamHost може допомогти!

Щасливого будівництва!