Использование 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 под имеющуюся базу данных и убрав оттуда старый сайт. Но это уже чуть другая история.
Быстрый, простой и безопасный хостинг с автоматической установкой WordPress за 2 минуты. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Цена: от $2.95
* Bluehost — надежный хостинг-провайдер, обслуживает более 2 млн. сайтов, официально рекомендуемый компаниями WordPress, PrestaShop, WooCoomerce и др.!
В целом, задача переноса сайта посильна для опытного пользователя ПК, имеющего некоторый опыт в кодинге. Спасают плагины. Полностью ручной перенос под силу только опытным специалистам.
