Кейс: перенесення сайту WordPress на новий шаблон
Нещодавно ми почали співпрацювати з компанією Відбиток, що пропонує друк по відбитку без документів для фізичних та юридичних осіб. Спочатку наш план полягав у доопрацюванні деяких аспектів WordPress-сайту, розробленому ще в далекому 2014 році.
Ми проаналізували сайт для складання плану робіт, за результатами якого разом із замовником дійшли досить радикального, але єдиного рішення – повністю оновити сайт, щоб він відповідав сучасним тенденціям та стандартам інтернет-маркетингу, але обов’язково зберігши його на ядрі WordPress. У цьому кейсі ми розповімо вам, як просувалися роботи з перенесення сайту на Вордпрес на новий шаблон, і чого наша команда змогла досягти в результаті.
Підготовчі роботи
Ключ до успішного перенесення сайту на новий шаблон WordPress є детальний аналіз вихідного ресурсу. Нам потрібно було імпортувати контент повністю: сторінки, записи, зображення, контактні форми – все це (і багато іншого) зі збереженням SEO-атрибутів, щоб сайт не втратив позицій у пошукових системах. Для цього ми розробили відповідний план дій.
- Оцінка вихідного сайту: вивчення всіх сторінок та налаштувань, визначення типу контенту, наявність сторонніх сервісів – будь-яка інформація, яка буде важлива надалі.
- Підготовка середовища: базове налаштування WordPress на робочому піддоміні (ми вибрали такий варіант розробки) із закриттям сайту від індексації на час робіт.
- Імпорт контенту: організація та перенесення контенту на новий шаблон вручну, щоб нічого не втратити і не зламати. Ми вирішили здійснювати автоматичний імпорт, т.к. контенту було небагато і таким чином підвищувалася точність перенесення.
- Перенесення та оновлення дизайну: т.к. ми здійснювали не тільки перенесення, але ще й оновлення проекту, в дизайні ми вирішили відштовхуватися від вихідного сайту, але з внесенням нових ідей.
- Фінальна перевірка сайту: комплексна перевірка сайту після перенесення на новий шаблон дизайну WordPress. Від налаштувань хостингу до мета-тегів та редиректів сторінок.
Оцінка та підготовка середовища
Спершу ми створили резервну копію сайту, потім підключили піддомен, щоб можна було здійснювати всі роботи на хостингу з огляду на його місткість, потужність та стресостійкість. Після цього розгорнули WordPress і підключили БД.
Початкове налаштування пройшло успішно, можна переходити безпосередньо до міграції контенту. Вихідний сайт мав не так багато сторінок, але багато з них були досить об’ємними. До того ж, за роки робіт у них інтегрувалися й сторонні сервіси: Jivosite-чат та Яндекс та Google-метрики – їх також було необхідно акуратно перенести та оновити.
Імпорт контенту
У деяких випадках не обійтися без автоматизації під час перенесення контенту. Прикладом такого підходу може бути наш кейс про заповнення інтернет-магазину автозапчастин.
Однак у цьому випадку ми вибрали ручний спосіб перенесення контенту, т.к. він дозволяє відразу вносити правки до верстки сторінок, актуалізувати їх вміст, виправляти биті посилання і т.д. Особливу увагу тут довелося звернути на покращення та оптимізацію коду сторінок.
Нехай у нашому випадку переважали текстові дані, але вистачало контенту, який містив “поганий” код: наприклад, неадаптивні таблиці із зашитими код CSS-стилями. Вони досить відчутно знижували рейтинг у сервісі.
PageSpeed Insights, а також погіршували адаптивність сайту загалом. Ця проблема виправлялася в процесі перенесення контенту, а також у спільній роботі з оптимізації сайту. До речі, на скріншоті Ви можете побачити таблицю, яка зберегла свій вигляд, але тепер стала на 100% адаптивною та кросбраузерною.
Перенесення та оновлення дизайну сайту на WordPress
Для оновленої версії сайту – бути новим має все. Або майже все. Ми підібрали дуже хорошу та свіжу тему для проекту, яка припала до душі замовнику. Однак, хоч би якою гарною вона була, її ще треба було адаптувати під конкретний проект. Ретельна робота з реалізації стилів для нового дизайну та його адаптивності – все це на скріншотах нижче. Наприклад, перетворення головної сторінки, ДО і ПІСЛЯ:
Як ми вже писали вище, на старому сайті було багато сторінок із таблицями. Такі сторінки не мали належної оптимізацією та адаптивністю, сильно знижуючи продуктивність як для користувача, так і для оцінки в Pagespeed Insights. Після нашої роботи результат є більш ніж очевидним:
Також сайт містить значну кількість прикладів печаток та візиток, а також контактні форми – всі відкриваються у лайтбоксах. На старому сайті з цим були деякі проблеми, які ми переосмислили та виправили:
Фінальна перевірка та тестування сайту
Після завершення основних робіт з переходу сайту на WordPress на новий шаблон дизайну нам потрібно було здійснити посторінковий обхід сайту, принагідно додаючи мета-теги сторінкам і записам, а потім все протестувати і перевіряти ще раз. З мета-тегами ми впоралися швидко, а про тестування сайту перед релізом та про те, на що потрібно звертати увагу під час цього – розповімо трохи докладніше:
- Перевірка на биті посилання. Потрібно переконатися, що всі посилання ведуть куди треба, а не до улюбленої 404-ї сторінки. Це можна робити як вручну, так і за допомогою автоматичних сервісів. І, звичайно, завжди уникати абсолютних посилань.
- Перевірка на биті стилі та адаптивність. Пункт із максимальним ступенем уважності, т.к. потрібно зробити багато: протестувати сайт на всіх основних браузерах і дозволах, від десктопних до мобільних, знаходячи найменші відмінності в роботі стилів і, потім, усувати їх, відповідаючи визначенню правил для кроссбраузерності.
- Перевірка функціональності елементів сайту та плагінів. Тестується практично все, що встановлено: кнопки зворотного зв’язку та форми, що викликаються, розсилка службових листів адміністраторам, контент користувача і т.п.
Так як вся наша робота зі створення оновленої версії сайту велася на піддоміні, то після проходження всіх етапів перевірки необхідно переїздити з піддомена на основний домен. Ці дії здійснюються вже в адмін-панелі хостингу, де ми ще раз, вже після перенесення, проводимо перевірку сайту на працездатність та завершуємо наш проект.
Резюме
Намір перенести сайт-візитку, інтернет-магазин чи блог на WordPress на новий шаблон дизайну – це крок у бік підвищення юзабіліті, покращення візуального сприйняття веб-сторінок, вирішення старих проблем з адаптивністю та швидкодією.
Це – нова якість інтернет-маркетингу, до якої можна прийти без ризику для позицій сайту. Цей крок ми вже зробили разом із компанією “Отиск” і готові зробити на користь Вашого бізнесу.
