Вихідна точка
Клієнтка — Пауліна Нєвядомська, фотографиня, яка знімає жіночі, чуттєві та іміджеві фотосесії, проводить воркшопи й продає пресети та електронні книги. Її сайт поєднує портфоліо, блог, кілька десятків сторінок із пропозиціями та магазин WooCommerce, куди замовлення надходять щодня.
Сайт працював на преміум-темі Solene. До неї додавалися Elementor, Qi Addons, Slider Revolution і ще з десяток плагінів, встановлених за роки. Виглядало все гарно, але під капотом:
- головна сторінка завантажувалася приблизно 8,5 секунди;
- PageSpeed показував 54 бали на мобільних і 68 на десктопі;
- тему та її плагін «core» перестали розвивати.
Я поставив собі дві умови. Магазин ані на хвилину не припиняє роботу і жодне замовлення не губиться. Це одразу відкинуло найпростіший шлях: зробити все на копії й перезаписати нею робочий сайт.
Чому не «перенести копію й перезаписати»
Зазвичай переробку роблять на стейджингу, а потім заливають усе цілком через Duplicator або плагін для стейджингу. Тут база на робочому сайті весь час змінювалася: замовлення, клієнти, складські залишки. Перезаписати її копією кількаденної давності означало б втратити дані.
Тому стейджинг слугував мені лише еталоном вигляду, тобто копією старого сайту, з якою я порівнював результат. Усі зміни я вносив на живому сайті, елемент за елементом:
- налаштування теми;
- вміст сторінок;
- віджети;
- CSS.
Нічого не перезаписував гуртом.
Новий фундамент: Blocksy і Gutenberg
Я обрав Blocksy з дочірньою темою і нативні блоки Gutenberg. Вони легкі, добре працюють із WooCommerce, і немає ризику, що через рік тема зникне з ринку, як Solene.
Відтворення вигляду 1:1
Клієнтка не хотіла нового дизайну. Вона хотіла, щоб сайт виглядав так само, тільки працював краще. Спочатку я виписав зі старого сайту всі «токени» вигляду:
- шрифти й розміри заголовків H1–H6 разом із міжлітерними інтервалами;
- кольори, зокрема три відтінки бежевого, які на перший погляд нічим не відрізняються;
- висоту шапки сайту та закріпленої шапки;
- стиль меню та підменю;
- смугу із заголовком підсторінок;
- компонування футера з печаткою зі слоганом бренду, що обертається.
Усе це я відтворив у Customizer Blocksy та в додатковому CSS.
Портфоліо без втрати даних
Проєкти портфоліо зберігалися як тип запису з плагіна Solene Core. Замість міграції даних я зареєстрував у дочірній темі той самий тип запису й ті самі таксономії під тими самими назвами. Після вимкнення старого плагіна всі проєкти, категорії та старі посилання працювали далі — без зміни жодного запису в базі. Я також додав архів портфоліо та запасну мініатюру: проєкт без зображення запису бере перше фото з галереї.
Конвертер Elementor → Gutenberg
Найбільше роботи було з підсторінками, зібраними в Elementor: пропозиціями, прайсом, «Про мене», воркшопами, ваучером і освітніми сторінками. Ручне переписування кожної з них зайняло б дні, а результат однаково відрізнявся б від оригіналу.
Тож я написав власний конвертер. Він зчитує відрендерену сторінку в браузері, тобто реальні розміри, відступи, фони та шрифти, а не сирі дані Elementor. На цій основі він будує коректні блоки Gutenberg з окремою таблицею стилів для кожної сторінки. Серед іншого він обробляє:
- колонки з відступами у відсотках;
- абсолютно позиціоновані елементи, наприклад бежеві фони, «підкладені» під фото;
- іконки соцмереж;
- FAQ;
- карти Google;
- слайд-шоу з фото у фоні секцій;
- кнопки.
Кожна конвертована сторінка відкривається в редакторі без жодної помилки блоку, тож клієнтка може й далі редагувати її сама.
Slider Revolution на головній сторінці я замінив власним легким слайдером. У ньому 6 слайдів, анімовані написи та фото, які довантажуються лише перед показом.
Мобільна версія
Сторінки з Elementor часто «розлазяться» на телефоні. Я перевірив кожну підсторінку на ширині 390 px і виправив:
- фото, що накладаються одне на одне;
- надто тісні рамки з фоном;
- заголовки, що переносяться посеред слова;
- порожні смуги, що лишилися після старих елементів.
Наостанок я написав скрипт, який автоматично пройшов усі 91 опубліковану сторінку в десктопній і мобільній версіях. Він шукав текст, притиснутий до країв блоків із фоном, і горизонтальну прокрутку. Серед іншого він виловив контактну рамку без внутрішнього відступу, яка повторювалася на 66 сторінках під різні локації. Я виправив її одним правилом CSS для всіх одразу.
Продуктивність
- Кеш: LiteSpeed Cache був увімкнений, але сервер працює на Apache, тож нічого не кешувалося. Після переходу на WP Super Cache час відповіді сервера скоротився з ~1,2 с до ~0,1 с.
- Зображення: конвертація бібліотеки (майже 99 тис. файлів) у WebP зменшила їхню вагу в середньому приблизно на 42%.
- Код: сайт більше не завантажує ні Elementor, ні Qi Addons, ні Slider Revolution.
Мобільний результат PageSpeed зріс з 54 до 61. Це ще не той результат, на якому я хочу зупинитися, тож оптимізація мобільної версії — наступний етап.
Результат
- Вигляд такий самий, як на старому сайті, але на сучасній темі, яку підтримують.
- Пауліна редагує всі підсторінки у звичайному редакторі WordPress, без конструктора сторінок.
- Нуль перерв у роботі магазину й нуль втрачених замовлень за весь час робіт.
Результат наживо: paulinaniewiadomskaphotography.pl. Дякую Пауліні за дозвіл описати цей проєкт під її ім’ям.
Ваш сайт на WordPress працює повільно або стоїть на покинутій темі й конструкторі сторінок, який уже ніхто не розвиває? Напишіть мені — і подивимося, що з цим можна зробити.
Читайте також: WordPress не надсилає листи з форми — чому зелене повідомлення «надіслано» не означає, що заявка хоч комусь дійшла.
