Как перенести html сайт на wordpress

Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.

На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как преобразовать действующий HTML-сайт в WordPress. К счастью, WordPress предоставляет сразу несколько способов решить эту проблему.

Варианты преобразования HTML-сайта в WordPress

Есть три способа перенести HTML-сайт на WordPress:

• Самостоятельно создать WordPress- тему на основе действующего HTML-сайта.

Этот подход требует знания веб-программирования. Для его реализации нужно зайти в папку HTML-сайта с помощью FTP и использовать существующий код как отправную точку. После этого создайте все файлы темы оформления WordPress. Это достаточно просто, если у вас есть опыт работы с HTML, CSS и PHP.

• Установите одну из существующих тем оформления и перенесите контент.

Это наиболее оптимальный вариант. Подразумевается, что у вас уже есть действующий сайт. Но в этом случае придется потратиться на разработку уникальной WordPress-темы. Плагин, который можно использовать для импорта контента, доступен в официальном репозитории WordPress совершенно бесплатно.

• Заказать веб-программисту перенос HTML-сайта на WordPress.

Я не буду рассматривать этот вариант подробно. Если вы хотите использовать именно его, достаточно просто найти толкового разработчика.

Подготовка к переносу HTML-сайта на WordPress

Сначала выберите подходящий хостинг и тарифный план. После этого установите WordPress и войдите в панель администрирования.

Перенос HTML-сайта вручную

Если нужно не только перенести контент на WordPress, но и воссоздать текущий дизайн, то придется создавать собственную WordPress-тему. Для этого понадобится редактор кода (например, Sublime или Notepad++), а также доступ к файлам HTML-сайта и WordPress.

Шаг 1: Создание папки с новой темой и необходимых файлов

Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:

Шаг 2: Скопируйте существующий CSS- код в новый файл стилей

Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.

После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.

Шаг 3: Выделите ваш текущий HTML-код

Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.

Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .

Вернитесь в index.html . Выделите код разметки боковой панели (например, as >. Скопируйте и вставьте его в файл sidebar.php .

Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php .

Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php . Сохраните его, но пока не закрывайте.

Шаг 4: Завершите создание файла Index.php

Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.

В самом начале index.php вставьте приведенную ниже строку:

Затем в самом конце index.php вставьте следующий код:

Теперь нужно добавить то, что называется циклом . Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index. php добавьте этот код:

Сохраните и закройте файл index.php . Тема готова! Осталось только загрузить её на сайт WordPress.

Шаг 5: Загрузка вашей темы

Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/ . Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.

Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.

Использование темы WordPress и импорт контента

Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.

Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую , установите и активируйте новую тему.

После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый . Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.

Заключение

Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.

И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс . Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.

Данная публикация представляет собой перевод статьи « Converting HTML Sites to WordPress Sites » , подготовленной дружной командой проекта Интернет-технологии.ру

Не думаем, что подлежит оспариванию факт огромной популярности ВордПресс – веб-ресурсов, работающих на этой платформе громадное число и в буржунете, и в рунете. Проекты, которые были созданы на менее популярных движках или HTML постепенно переносятся на этот движок. С другими CMS все более просто – они используют шаблоны, которые можно конвертировать для требуемой системы – перенести же HTML сайт на WordPress немного сложнее.

Подготовительная работа

Обязательное требование для специалистов всех уровней – создать резервную копию. Это поможет сохранить работоспособную версию при ошибочных действиях, сравнивать детали во время корректировки файлов. Отмечается весь имеющийся функционал, формы, дополнительные модули – это необходимо для дальнейшей установки в административной консоли. Плагины подбираются на начальном этапе.

• необходимо провести изучение всех элементов сайта, оценить имеющуюся навигацию для дальнейшего дублирования на новой платформе;
• проверить контент, сделать аудит и выявить некачественные материалы;
• выявить все недочеты, которые тормозили работу текущего ресурса или негативно влияли на его продвижение;
• познакомиться с системой WordPress, если нет опыта работы с ней.

Установка WordPress

Все операции рекомендуется проводить на локальном сервере: это обеспечит беспрерывную работу площадки на хостинге, пока проходит конвертация всех элементов. Можно использовать популярную программу Open Server, которая имеет все необходимые инструменты для создания веб-ресурса, базы данных, работы с консолью и конверторами. Такая схема позволит безопасно перенести HTML сайт на WordPress.

На официальной страницу скачиваем движок, распаковываем и загружаем в «/domains/newsite», размещенную в директории программы Open Server. В контекстном меню, заходим в PhpMyAdmin для создания базы данных и пользователя. Вводиться логин – root, пароль отсутствует. Вход в интерфейс выполнен, необходимо перейти во вкладку «Пользователи» и добавить нового. Заполняются все необходимые поля, параметры входа и привилегии (устанавливаются все галочки).

После этого, информация базы данных переносится в соответствующие строки кода файла «wp-config-sample.php» корневой папки движка. Информация внесена, файл сохраняется и переименовывается в «wp-config.php». Далее осуществляется установка CMS: в браузере вводиться название локального домена – «newsite». Загрузиться скрипт установки платформы – все данные заполняются и подтверждаются. Все готово, для входа в консоль следует перейти по ссылке: «newsite/wp-login.php».

Тема и плагины

Текущий этап подразумевает установку и настройку всех необходимых плагинов, чтобы комфортно перенести HTML сайт на WordPress. Основные категории требуемых модулей:

• имеющиеся формы могут некорректно перекочевать на платформу, лучше создать новые при помощи плагина Contact Form 7 или Gravity Forms;
• при использовании всех необходимых SEO-данных в старой версии ресурса, их необходимо перенести, используя Yoast SEO или All in One SEO Pack. Во время переноса контента заполняются мета-теги и параметры оптимизации;
• если предыдущий ресурс использовал несколько языковых версий, следует воспользоваться специализированными плагинами, к примеру, WPML;
• поскольку CMS больше загружают сервер, нежели HTML – обязательно устанавливаются плагины кеширования и оптимизации медиафайлов WP Total Cache и Image Optimizer.

Касаемо темы – поиск следует начать с момента возникновения идеи переноса. Нужно подобрать максимально близкий по структуре, внешнему виду и необходимым функциям шаблон. Это облегчит дальнейшую конвертацию.

Перенос контента

Существует несколько методов, позволяющих импортировать материалы сайта. Самый простой, который в большей части подходит для небольших проектов – перенос контента вручную, скопировав HTML код статьи в редактор WordPress, добавляя SEO-данные в виджете соответствующего плагина. Такой способ может создать некоторые ошибки с отображением. Для исправления этого, рекомендуется применять пользовательские стили, вписав их в шаблон.

Как перенести HTML сайт на WordPress при большом количестве материала? Можно воспользоваться плагином HTML Import 2 или Import HTML Pages. В их возможности входит импорт контента с элементами форматирования. Адаптация оформления на низком уровне. Поэтому все правки осуществляются вручную.

Стоит отметить, что автоматический перенос материалов не совершенен, он позволяет сократить рутинную работу, но требует доработок по отображению данных. Третий вариант – предоставить работу специалисту, который имеет соответствующие средства и навыки по конвертации сайта на CMS.

Конвертация дизайна

Имеется несколько вариантов действий в такой ситуации. Наиболее простой заключается в создании нового шаблона, а не использование оформления с HTML версии. Этот способ подходит для проектов, в которых нужно кардинально менять внешний вид всех элементов и это не отразиться на поведении пользователей. Чаще всего данный метод выбирается вебмастерами малопосещаемых площадок.

Имеется несколько вариантов действий в такой ситуации. Наиболее простой заключается в создании нового шаблона, а не использование оформления с HTML версии. Этот способ подходит для проектов, в которых нужно кардинально менять внешний вид всех элементов и это не отразиться на поведении пользователей. Чаще всего данный метод выбирается вебмастерами малопосещаемых площадок.

Если аудитория сайта достаточно большая и постоянная (привыкла к оформлению), тогда придется серьезно поработать над конвертированием дизайна с HTML-страницы в шаблон движка. Можно воспользоваться сервисом Theme Matcher, который на основе старого макета сгенерирует файл темы для ВордПресс. Обычно результаты весьма удачны, требуются лишь незначительные доработки – но задача сохранения общей концепции и внешнего вида проекта выполнена.

Еще один способ – создание новой темы и работа с исходным кодом. В этом случае проводится детализированная обработка каждого элемента темы и исходного дизайна в HTML. Для проведения качественной работы нужны специальные знания. В ином случае необходимо воспользоваться услугами профессионалов (студий дизайна, фрилансеров).

C localhost на хостинг

Перенос HTML сайта на WordPress осуществлялся через локальный сервер, соответственно готовую площадку со всеми изменениями следует перенести на хостинг, где расположена HTML версия. В качестве примера будет использоваться cPanel и PhpMyAdmin.

Для начала, экспортируем базу данных на хостинг. Поскольку используется Open Server, в браузере переходим по следующей ссылке http://127.0.0.1/openserver/phpmyadmin , открывается интерфейс работы с базами данных. Переходим во вкладку «Экспорт» и выбираем файл, с именем, которое указывалось в «wp-config.php» при создании сайта. Вводятся все необходимые параметры:

• Шаблон имени – @DATABASE@;
• Кодировка – UTF8;
• Сжатие – gzip.

После этого, с localhost копируем основную директорию, где находится новый вариант сайта и помещаем в архив. В панели хостинга необходимо создать базу данных. Указываются только надежные имя пользователя и пароль, отмечаются галочкой необходимые права и привилегии.

Используя PhpMyAdmin на хостинге, импортируется база данных, сохраненная с локального сервера. Пункт «Do not use AUTO_INCREMENT for zero values» должен быть отмечен. После этого проводится разархивация новых файлов в основную директорию сервера, чтобы площадка открывалась после ввода доменного имени в адресной строке.

Важно: непосредственно перед копированием новых файлов, следует удалить старые данные HTML-сайта.

Следующий этап: редактирование файла «wp-config.php». В него записываются новые данные пользователя и базы данных. Для констант WP_SITEURL и WP_HOME прописывается доменное имя.

Проверка сайта

Перенос HTML сайт на WordPress закончен и необходимо протестировать все элементы. Прежде всего проверяются элементы оформления, ошибки отображения контента, работоспособность кнопок и модулей. Необходимо убедиться в работоспособности всех ссылок, временные убрать. Плагин Broken Link Checker поможет справиться с проверкой на крупных сайтах, насчитывающих сотни статей.

Заключение

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

В силу развития web-технологий часто созданные давно веб-сайты устаревают, они плохо отображаются в различных браузерах, они не имеют адаптивного дизайна, они не имеют нормального редактора текста или даже попросту не имеют редактора мета тегов, которой необходим для продвижения сайта.

Когда ко мне попадают такие устаревшие интернет ресурсы, я все время должен принимать решение: либо нанимать программиста (а это лишние расходы), либо перенести сайт на вордпресс самому. В случае, если изначально сайт создан на какой-либо cms, то обычно для переноса существуют плагины и компоненты. Но самый неудобный вариант переноса — это когда у вас html сайт, а вы хотите его перенести.

К примеру, нам нужно переехать на cms wordpress. Как это сделать?

Есть два варианта:

Ручной перенос — материал каждой страницы со старого веб-сайта выделяется, копируется и вставляется в редактор новой страницы на wordpress. Массовый перенос страниц при помощи платина HTML Import 2.

Плагин HTML Import 2 доступен для установки из репозитория wordpress. После установки плагин доступен в Настройках.

Плагин позволяет импортировать как по одной странице, так и массово все страницы из указанной директории.

Но прежде, чем импортировать все страницы, я советую произвести тестовой импорт только одной страницы и убедиться, что импорт происходит корректно. К примеру, самой частой проблемой является неподходящая кодировка html, и в этом случае после импорта вы увидите:

Дело в том, что wordpress работает в кодировке UTF-8, а большинство html сайтов — в windows-1251. И, соответственно, для того чтобы выполнить импорт, необходимо предварительно переконвертировать весь html в UTF-8. Это вы можете сделать при помощи программы UTFCast Express.

Все, что нужно — это указать директорию, где находится ваш html сайт, а также куда произвести перекодировку, и нажать кнопку Start.

И тогда после конвертации вы можете с легкостью импортировать все материалы вашего интернет ресурса в wordpress. Конечно, придется проделать колоссальную работу по распределению материалов по рубрикам, плюс важно не забыть, что все ссылки вашего сайта сменятся на новые (так как у wordpress другие ЧПУ), и в этом случае чтобы сайт не потерял вес (тиц и pr), вам придется составить большую таблицу сопоставления «старая ссылка — новая ссылка» с последующей задачей 301 редиректа. Все это трудоемкие процессы, но они стоят того, чтобы иметь сайт на современной cms.

Комментарии (3)

Добрый день! Интересная информация по переносу на Вордпресс! Может дадите совет? Есть у меня сайт ***** он изначально на Битрикс создан. Потом битрикс пару раз ломанули, я попроси Битрикс поломать так, чтобы нельзя было создать и изменять файлы и заразить сайт. Но хотелось бы перейти на Воордпресс и оживить сайт. Что посоветуете? Купить тему (шаблон ВП) и ручками настраивать рубрики и переносить контент? Или есть более быстрые способы (плагины, сервисы и т.п.) Спасибо заранее за развернутый ответ! 🙂

Странно, что Битрикс у вас ломают, достаточно неплохая cms, важно ее обновлять регулярно (покупать продление лицензии). В случае желания перейти на wordpress c bitrix, нужно произвести Экспорт всех материалов в Xml
. А затем их импортировать в Вордпресс при помощи плагина WP All Import — Вообщем, то и все. Понятно, что в процессе экспорта/импорта могут возникнуть проблемы — но пока не попробуешь = не узнаешь (это вы легком можете сделать на текстовым домене и убедиться в возможностях переноса, а потом уже идти покупать хороший шаблончик).

Да, не обновлял Битрикс тройку лет. Потому ломают.
Спасибо за подсказку, буду пробовать! 🙂