Створення сайтів Львів067 607 57 84
МЕНЮ

Як перенести HTML сайт на WordPress

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

Використання CMS значно підвищує ефективність роботи адміністратора сайту. Особливо в умовах необхідності його масштабування. Також розширюються можливості по SEO-оптимізації та доопрацювання функціональності. Перенесення працюючого HTML-сайту на WordPress - поширене завдання, воно вирішується алгоритмами, відшліфованими багаторічним досвідом тисяч розробників.

Ми покажемо кроки, необхідні для успішної міграції HTML-сайту на CMS WordPress. Всіх їх можна виконати самостійно.

Підготовка, загальна інформація

Суть задачі по перенесенню зводиться до конвертації статичних HTML-сторінок в формат, який підходить для WordPress, який також використовує, крім HTML / CSS, і PHP-код. Тобто один в один перенести код без оптимізації під CMS не вийде, він не буде працювати.

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

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

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

Спочатку потрібно проаналізувати, що з функціональності задіяно на HTML-сайті та підшукати відповідні плагіни або вбудовані інструменти, які зможуть їх відтворити на WP. Одразу відзначимо, що це буде не складно, у CMS купа можливостей - там все є. Складіть чекліст з необхідного, і ви без проблем це знайдете - аби нічого не упустити. І не забудьте зробити бекап поточної версії HTML-сайту.

Крок 1 - вибираємо хостинг, встановлюємо WordPress і створюємо базу даних

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

По всьому світу розкидано 118 дата-центрів, штаб-квартира розташована в американському штаті Юта. Сервери для управління всією цією імперією там займають близько 5 000 квадратних метрів. Все працює на SSD-дисках, простору виділяють багато, навіть на мінімальному тарифі для сайтів WordPress ($ 2.63/міс) виділяють 50 Гб.

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

Вам буде потрібна нова база даних для роботи з матеріалами сайту. Зайдіть в розділ «Бази даних», далі в поле «Створити нову базу даних», потім впишіть ім'я користувача, назва БД і пароль доступу до неї. Далі з розділу «Softaculous App Installer» виберіть WP і запустіть автоматичну установку. В процесі необхідно буде вказати тільки що створену базу даних. Тепер у вас є хостинг з встановленим WP і готова до роботи БД.

Bluehost надає цілодобову техпідтримку, дарує домен на перший рік (якщо буде потрібна його реєстрація), безкоштовний SSL, а також забезпечує 100% манібек протягом 30 днів. Для оптимізованого WP-хостингу ви також отримаєте автоматичні установку і оновлення до нових версій, доступ до Microsoft Office 365, доменну пошту, сотні безкоштовних шаблонів, а також зручну і потужну панель управління.

Крок 2 - робота з дизайном

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

Вибір нового шаблону

В панелі управління в розділі «Дизайн» знаходиться магазин шаблонів. Виберіть підходящий і встановіть його в 1 клік і зробіть активним. Далі в настройках шаблону ви зможете підігнати його дизайн під свої вимоги (логотип, колонки, кольори, фон та інше). Це найпростіший спосіб - створити з нуля сайт на WP з новим шаблоном, а потім підігнати його функціональність і перенести контент.

Конвертація HTML-шаблону

Тут вам допоможуть сторонні веб-сервіси типу Theme Matсher, здатні обробити і згенерувати відповідний для WP дизайн на основі HTML-теми. Просто введіть назву поточного домену, і сервіс перетворює файли теми в формат для WP. Потім ви їх завантажуєте і встановлюєте через панель управління як новий шаблон. Зазвичай результат виходить хорошим, але можуть знадобитися доопрацювання. Це оптимальний варіант для тих, хто бажає зберегти дизайн (принаймні, основні його елементи), але не володіє навичками програмування.

Ручна адаптація шаблону під WP

Теми для WordPress складаються з декількох файлів - style.css, index.php, header.php, sidebar.php і footer.php. Потрібно створити порожні заготовки під них, а потім колупати HTML-шаблон, вибираючи з нього необхідні елементи (стилі та HTML-структуру) і вставляючи їх в потрібні файли майбутнього шаблону WP. Також буде потрібно додавання елементів синтаксису CMS в різні області для того, щоб тема оформлення була прийнята системою. Це робота для фахівця, новачкам вона не під силу, тому навіть не будемо детально описувати процес.

Крок 3 - перенесення контенту

На цьому етапі знову з'являється розгалуження - ручне перенесення контенту або автоматизоване за допомогою плагіну.

Перенесення матеріалів вручну

Якщо у вас небагато контенту, краще використовувати цей варіант. Для цього необхідно скопіювати HTML-код матеріалів в редактор, створивши попередньо відповідні статичні сторінки під цю справу. Копіюємо тільки код, вкладений в теги <body></ body>, все, що знаходиться вище або нижче - технічна частина, яка для WordPress-сторінок не потрібна. Буде потрібно окреме копіювання картинок - краще залишити їх назви такими ж, тоді код підхопить їх як є. Не забудьте додати SEO-дані через редактор або інтерфейс відповідного плагіну.

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

Важливо: якщо структура посилань на новому сайті відрізняється від старої, то вони перестануть працювати. Буде потрібно настройка 301 редиректів для перенаправлення відвідувачів зі старих посилань на нові (при невеликих обсягах контенту можна внести правки в .htaccess) або правка всіх посилань сайту під новий формат (ручна або з використанням плагіну на кшталт Redirection).

Автоматичне перенесення за рахунок плагіна

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

Крок 4 - тестування працездатності

Настав час перевірити роботу нового сайту за декількома пунктами:

  • Биті посилання. Переконайтеся, що всі посилання робочі. Якщо сторінок і посилань багато, то для перевірки краще використовувати плагін Xenu's link sleuth, Integrity або їх аналог.
  • Биті стилі. Якщо ви конвертували дизайн або створювали шаблон вручну за зразком старого, можуть бути помилки відображення. Огляньте все - можливо, будуть потрібні додаткові дії для виправлення проблем.
  • Порушення функціональності. Тестуйте все, що є на сайті, - форми, панелі соціалок, кнопки, навігацію, різні опції, плеєри і т. д. Переконайтеся, що все це працює як належить.

Крок 5 - підключення домену до нового сайту

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

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

Висновки та рекомендації

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

Як приклад ми описали алгоритм для тієї ситуації, коли ви плануєте змінювати хостинг-провайдера під новий сайт на WP. Можливий також варіант заливки WP-сайту на хостинг, який обслуговує поточний HTML-сайт. Можна зібрати оновлений сайт на локалхості (Openhost, Denwer і т. д.), а потім залити його туди, підправивши wp-config під наявну базу даних і прибравши звідти старий сайт. Але це вже трохи інша історія.

В цілому, завдання перенесення сайту посильна для досвідченого користувача ПК, що має деякий досвід у програмуванні. Рятують плагіни. Повністю ручне перенесення під силу тільки досвідченим фахівцям.