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