Как перенести 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-код материалов в редактор, создав предварительно соответствующие статические страницы под это дело. Копируем только код, заключенный в теги , все, что находится выше или ниже — техническая часть, которая для 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 + Bluehost установка CMS в 1-клик на хостинг ↵
Быстрый, простой и безопасный хостинг с автоматической установкой WordPress за 2 минуты. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Цена: от $2.95
* Bluehost — надежный хостинг-провайдер, обслуживает более 2 млн. сайтов, официально рекомендуемый компаниями WordPress, PrestaShop, WooCoomerce и др.!
В целом, задача переноса сайта посильна для опытного пользователя ПК, имеющего некоторый опыт в кодинге. Спасают плагины. Полностью ручной перенос под силу только опытным специалистам.
Как правильно перенести html сайт на wordpress?
В общем сверстал я сайт и нужно теперь его перенести на вордпресс так как там есть нужные плагины. Но не знаю как правильно это сделать. Нужно сделать так что бы я мог редактировать текст, картинки, копировать некоторые блоки,ну в общем делать правки.
- Вопрос задан более двух лет назад
- 356 просмотров
Комментировать
Решения вопроса 2
Alex @Kozack Куратор тега WordPress
Thinking about a11y
Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать
Когда то когда динозавры еще делали первые сайты я посмотрел этот ролик
https://www.youtube.com/watch?v=7akPICFR-AI и он мне очень помог, советую к просмотру.
Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 1
DmitryKlyuev @DmitryKlyuev
Если коротко, то вам надо натянуть вашу вёрстку на движок WP (создать свою тему). Это несложно. Первая ссылка из ответа Alexa, там как раз про это, создание тем. Рекомендую посмотреть какой-нибудь видеокурс, бесплатных курсов по этой тематике выше крыши. И потом сделать по образцу свой сайт.
Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- WordPress
Как правильно сделать фильтрацию постов?
- 1 подписчик
- 15 часов назад
- 32 просмотра
- WordPress
WordPress, как сделать заполнение поля по данным из базы?
- 1 подписчик
- 16 часов назад
- 25 просмотров
ПЕРЕНОС HTML НА WORDPRESS
Несмотря на бурное развитие различных систем управления контентом в интернет (CMS), многие сайты до сих пор работают на html. Очень часто, старые сайты на html имеют хорошие позиции в поисковой выдаче. Однако, функционал их не редко оставляет желать лучшего. Отличным решением данной проблемы является перенос html сайта на wordpress . Именно Вордпресс позволяет сохранить все «наработки» html сайта, и одновременно, добавляет функциональности. Мы предлагаем вам качественный перенос html сайта на wordpress без потери трафика и поисковых позиций . Особенно это актуально для «старых» html сайтов с длинной историей, которые требуется обновить.
+38 (050) 971 70 40
для звонков по Украине
+38 (067) 522 26 38
Viber, WhatsApp, Telegram
info@contentt.stream
по любым вопросам
Перенос html сайта на wordpress: какие риски существуют?
Фото. Процесс переноса html сайта на wordpres — не самая легкая задача
Основным направление работы нашей компании является обновление и поддержка сайтов на CMS WordPress. На сегодняшний день, мы осуществили перенос сайта на вордпресс сотни раз, и имеем большой опыт в данном направлении. При переносе html сайта на wordpress существуют значительные риски, если сам перенос выполняется не грамотно. Вы должны это понимать. Наибольший риск представляет резкая потеря трафика , при условии некорректного переноса url-адресов сайта.
Если вам нужно старый сайт на html перенести на cms wordpress, то первым делом требуется изучить карту сайта и его структуру. Среди наиболее распространенных рисков, можно выделить следующие:
- Потеря трафика на сайт по важным ключам
- Потеря позиций в поисковой выдаче
- Ухудшение поведенческих факторов пользователей
- Замедление загрузки сайта
Это далеко не полный список. Но как уже отмечалось, неправильный перенос сайта с html приведет к тому, что к вам перестанут «заходить» посетители. Ухудшиться работоспособность всего сайта. Не нужно объяснять, что это полный провал и такой перенос не сулит ничего хорошего.
Наши специалисты осуществляют ручной перенос сайтов с html на wordpress с сохранением точных урл-адресов всех страниц, каталогов, товаров. Это гарантирует стабильный трафик на новом сайте. Кроме этого, при переносе мы осуществляем техническую и СЕО оптимизацию сайта. Его работа будет намного лучше, чем вашего старого сайта на html.
Что дает перенос html сайта на cms wordpress
Следует отметить, что перенос html сайта на cms wordpress вполне целесообразен. Можно привести множество аргументов, но в нашей практике основные из них такие (по сравнению с сайтами на html):
- Возможность существенно улучшить дизайн и внешний вид сайта
- Возможность добавить функциональности сайту
- Возможность более качественного SEO-продвижения
- Возможность защитить сайт от атак злоумышленников
- Возможность автоматизировать процессы на сайте (блог, статьи, товары)
- Возможность сделать сайт адаптивным для смартфонов и планшетов
Эти преимущества – факторы, которые чаще всего заставляют людей обращаться к нам за переносом старых сайтов на вордпресс. Возможно, у вас есть и другие аргументы, которые скорее всего оправдаются. В любом случае, если вас не устраивает ваш сайт на html, хорошее решение – перенести его на CMS WordPress.
Вы не проиграете в любом случае!
Как проходит перенос html сайта на Вордпресс
Перед тем, как мы будем переносить сайт, мы тщательно изучаем его структуру и карту. Также, мы в обязательном порядке изучаем имеющиеся позиции сайта, его контент и мета теги. При наличии хороших результатов, это все переноситься на новый сайт в 100% соответствии со старым! При необходимости, вносятся правки.
Также, мы сохраняем все ваши медиа файлы с сайта на html и переносим их на сайт на WordPress. Они также имеют значение для ранжирования и продвижения. При необходимости, медиа файлы оптимизируются.
На все работы мы даем 100% гарантию без ограничения срока! Сайт на html перенести на WordPress который мы взялись – мы доведем до идеала. Сделаем так, что ваш новый сайт вдохнет жизнь в ваше дело или бизнес.
Звоните, пишите – будем рады вам помочь!
Преобразование HTML-сайта в WordPress
На многих различных хостах есть свои пользовательские инструменты для создания веб-сайтов С их помощью пользователи без опыта кодирования вебсайтов с нуля могут создать собственный сайт.
Тем не менее пользователи отмечают, что эти конструкторы веб-сайтов с поддержкой перетаскивания имеют некоторые недостатки. Поскольку это универсальные предложения, им не хватает функциональных возможностей и персонализированности многих современных сайтов. Кроме того, из-за отсутствия чётких и точных линий, которые иногда создаются при перетаскивании, страница может выглядеть менее профессиональной, а такие сайты не всегда правильно переносятся на мобильные устройства, например телефоны или планшеты.
Переход на WordPress.com может решить эти проблемы, а также повысить уровень профессионализма вашего сайта.
Поскольку многие из конструкторов сайтов с поддержкой перетаскивания и опции только для HTML не предлагают опцию экспорта, вы можете вручную скопировать и вставить содержимое своего сайта, чтобы выполнить перемещение из конструктора на WordPress.com. Это требует времени и усилий, но результат стоит того.
В этом руководстве
- Сохранение содержимого
- Сохранение изображений
Сохранение содержимого
Самым быстрым способом сохранения содержимого в конструкторе сайтов с поддержкой HTML или перетаскивания является сохранение каждой отдельной страницы на своём компьютере.
Для каждой страницы, которую нужно реплицировать, перейдите в раздел Файл > Сохранить страницу как > Веб-страница, завершить
Копии все ваших фотографий и записей будут сохранены на дубликате страницы на вашем компьютере. Кроме того, будут созданы несколько подпапок, где будут находиться ваши файлы:
Сохранение изображений
Если вы используете описанный выше метод для сохранения страниц, изображения будут сохранены, но иногда они будут обрезаны или их размер будет изменён до того, в котором они отображены на веб-сайте. Самым лучшим способом добавить полноразмерные изображения на ваш новый веб-сайт WordPress.com является загрузка оригинальных файлов изображений непосредственно с компьютера.
Создание нового сайта
Если вы ещё не создали свой сайт на WordPress.com, вы можете сделать это, перейдя по ссылке.
Здесь вы получите инструкции по запуску своего сайта. Вы выберете стиль, тему, бесплатный домен и тарифный план. Вы можете изменить свою тему и тарифный план в любое время, поэтому не переживайте о том, что выбрать!
Создание страниц и добавление содержимого
Начните с добавления изображений сайта в Библиотеку файлов. Для этого откройте на своём компьютере папку, где сохранена информация об этой странице и загрузите для неё изображения в формате JPG, GIF или PNG. В этой папке вы найдёте много других файлов, но вам нужно найти и загрузить только изображения. Другие файлы не будут перенесены на WordPress.com.
- Откройте в браузере (например, в Chrome или Firefox) копию скачанного сайта или действующую версию старого веб-сайта и загрузите страницу, которую хотите воссоздать на сайте WordPress.com.
- Создайте страницу на своём сайте WordPress.com. Чтобы создать первую страницу, на консоли перейдите в раздел Страницы → Добавить.
- Скопируйте основной текст старой страницы и вставьте его на свою новую страницу WordPress.com.
Не нужно копировать и вставлять меню навигации своего сайта. Создание меню сайта WordPress.com и управление им осуществляются в другом расположении. Чтобы узнать больше, см. Меню.
Вот пример того, что вам нужно скопировать на своём старом веб-сайте.
Выше представлен пример страницы, созданной в конструкторе страниц вне WordPress.com. Если вы попытаетесь скопировать страницу полностью, она может создать очень занимательный HTML, вид которого может вам не понравиться. Поэтому лучше скопируйте только основной текст отдельной страницы (помните, что вы можете отредактировать общий вид и оформление веб-сайта позже), а затем вставьте изображения для этой страницы и выровняйте их в соответствии с текстом.
Вот пример экрана редактора WordPress.com, демонстрирующий, что нужно скопировать со страницы выше и куда это следует вставить:
Сосредоточьтесь только на добавлении текста и изображений. Если вы обладаете некоторыми навыками кодирования HTML, скопируйте и вставьте немного кодов HTML, но только не все коды, поддерживаемые на сайтах WordPress.com. Щёлкните здесь, чтобы ознакомиться со списком поддерживаемых кодов HTML.
Обратите внимание, что стилизация кода CSS доступна только в плане Premium и выше и находится в отдельном разделе.
Повторите этапы 1, 2 и 3 для всех страниц. Поскольку предварительная настройка может избавить вас от лишних хлопот во время выбора дизайна общего внешнего вида и оформления вашего сайта, мы рекомендуем сначала создать все страницы.
После того как вы создадите все страницы, переместите все тексты и изображения, можете переходить к этапу 4!
Создание меню навигации
Следующим шагом будет создание меню для вашего сайта! Так пользователи смогут находить большинство страниц на вашем сайте.
Одним из преимуществ перемещения WordPress.com является возможность быстро настраивать общий вид и делать оформление всего сайта, а не отдельных страниц (как в некоторых конструкторах). Меню можно редактировать в разделе Внешний вид → Меню или Внешний вид → Редактор, в зависимости от выбранной темы.
После создания страница не обязательно должна появиться в главном меню вашего сайта. Вы сами можете выбрать, какие страницы будут отображаться, и создать безупречный внешний вид своего сайта.
Настройка темы
Пришло время установки темы! Тема фактически является общим дизайном и оформлением вашего сайта. У нас есть сотни бесплатных и премиум-тем. Какие-то из них могут напоминать ваш сайт, а некоторые могут выглядеть совершенно по-новому. Независимо от того, хотите вы реплицировать общий вид и оформление своего прошлого сайта или имеете желание попробовать что-то новое, можете быть уверены, что ваш сайт будет иметь безупречный и профессиональный вид.
Если вам нравится текущая тема, перейдите в раздел Внешний вид → Настроить, чтобы изменить её по своему вкусу. Если вы хотите выбрать новую тему или попробовать другие, перейдите по этой ссылке, чтобы ознакомиться со всеми вариантами тем WordPress.com. Все темы отличаются друг от друга и имеют разные возможности. Не существует правильного или неправильного выбора — просто ищите то, что вам нравится!
Последние шаги
На WordPress.com есть множество дополнительных функций, которые вы можете добавить на свой сайт: от подключения к социальным сетям до видео и монетизации сайта, а также многого другого!
Вы купили домен у своего поставщика услуг хостинга с поддержкой перетаскивания или HTML, который хотите использовать с новым веб-сайтом? Ознакомьтесь с руководством по использованию домена для сайта WordPress.com.
Если у вас возникнут затруднения, посетите наш сайт по поддержке, чтобы получить необходимые инструкции, и не бойтесь попросить помощи у нас!