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

Как перенести 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 – тестирование работоспособности

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

1. Битые ссылки. Убедитесь, что все ссылки рабочие. Если страниц и ссылок много, то для проверки лучше использовать плагин Xenu’s link sleuth, Integrity либо их аналог.
2. Битые стили. Если вы конвертировали дизайн либо создавали шаблон вручную по образцу старого, могут быть ошибки отображения. Осмотрите всё – возможно, потребуются дополнительные действия для исправления проблем.
3. Нарушения функциональности. Тестируйте всё, что есть на сайте, – формы, панели социалок, кнопки, навигацию, различные опции, плееры и т. д. Убедитесь, что всё это работает как положено.

Шаг 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

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

Что же можно сделать, если у вас возникло желание перенести свой статический HTML сайт на WordPress? К счастью, есть несколько вариантов для решения этой проблемы.

Три способа перенести HTML-сайт на WordPress

1. Создание вручную сайта на WordPress на основе статического HTML сайта
В зависимости от вашего уровня знаний в области кодирования, это может быть простой или сложной задачей. Идея состоит в том, чтобы взять код, который у вас уже есть, и использовать его в качестве основы при создании файлов темы WordPress. Вам понадобится немного опыта в области PHP, CSS и HTML. Но, в конце концов, вы будете много копировать и вставлять.

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

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

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

Как вручную создать сайт на WordPress на основе статического HTML

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

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

К ним мы вернемся через несколько минут.

Затем скопируйте ваш существующий CSS в таблицу стилей WordPress.

Это файл style.css, который вы создали ранее. Здесь вам сначала нужно будет записать следующую информацию:

• Author — Ваше имя
• Theme Name — Название вашей темы
• Description — Краткое описание вашей темы
• Author URI — Ссылка на вашу домашнюю страницу

После этого служебного заголовка вставьте стили CSS из вашего исходного статического HTML сайта. Сохраните изменения.

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

Начнем с файла index.html. Ваша задача — скопировать части вашего index.html и вставить их в соответствующий файл темы. Когда копирование будет закончено, сохраните все.

• От начала файла до тега div в файл header.php
• Все внутри тега aside , включая сам тег, в файл sidebar.php
• Все после боковой панели в файл footer.php
• Вся остальная информация, оставшаяся в файле index.html, копируется в файл index.php

Закройте файл index.html.

Теперь, финальная доработка файла index.php.

В самом начале файла добавьте строку . Затем, внизу файла поместите код .

И последнее, что нужно сделать, это организовать цикл. Это то, что WordPress будет использовать для отображения контента для посетителей вашего сайта. Добавьте следующий код:

Сохраните файл index.php и закройте его.

Наконец пришло время загрузить вашу новую тему. Это означает, что вы должны взять все файлы темы, которые вы сохранили в папке вашей темы, и подключить ее к WordPress. Сделать это можно, скопировав папку папку темы в директорию /wp-content/themes/. Затем нужно перейти в раздел Внешний вид > Темы и активировать вашу новую тему. Теперь вам осталось только добавить контент старого сайта.

Что-то все это для меня слишком сложно!

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

Очень скоро вы вольетесь в ряды миллионов пользователей, которые попробовав один раз WordPress уже никогда не захотят вернуться к старым способам создания сайтов. У WordPress множество разнообразных тем, плагинов и ресурсов. А многочисленное и дружелюбное сообщество охотно поделится с вами секретами и приемами, и поможет решить любую проблему.

Перенос HTML-сайта на WordPress 6.4.2

WordPress

Автор Алекс На чтение 10 мин Обновлено 26.10.2022

В начале (Интернета) все веб-сайты были созданы только с текстом и статическим HTML кодом. Теперь, спустя более 20 лет, Интернет стал совсем другим. Веб-сайты стали намного сложнее. Они обеспечивают более богатые и приятные впечатления как для создателей сайтов, так и для посетителей.

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

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

Конечно, у этих владельцев сайтов могут быть веские причины не выполнять обновление или преобразование. Может быть, содержание их сайта никогда не меняется, а простое форматирование и дизайн, которые уже есть, можно использовать. Или, может быть, это меньше хлопот, чем беспокоиться об обновлении сайта WordPress. Оба варианта являются уважительными причинами. Яркие примеры: «Не ремонтируйте то, что не сломано».

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

Как это часто бывает с WordPress, есть несколько способов решить эту проблему. Ниже я собрал несколько вариантов.

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

Как вы решите преобразовать свой статический HTML сайт в WordPress, без сомнения, будет зависеть от ваших личных предпочтений, желаемых временных или денежных вложений и уровня навыков работы с кодом. Вы должны сами решить, что лучше для вас, но с приведенными ниже вариантами вы сможете быстро принять решение и сразу перейти к наиболее актуальной информации в этом статье для вашей конкретной ситуации.

Есть три основных варианта как перенести HTML сайт на WordPress:

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

Заказать у специалиста: Перенос html сайта на WordPress

Подготовка: перенос HTML на WordPress

Независимо от того, какой маршрут вы выберете, есть несколько вещей, которые вы захотите сделать перед погружением.

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

После того, как вы выбрали, вам нужно будет установить WordPress и войти в WP Admin. Это точка, в которой наши два возможных пути расходятся.

Перенос статического HTML-сайта в WordPress вручную

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

Вам понадобится редактор кода, такой как Sublime или Notepad ++, и доступ как к каталогу вашего HTML-сайта, так и к каталогу вашей новой установки WordPress.

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

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

Затем создайте несколько файлов (все они будут в папке новой темы) в редакторе кода. Пока ничего с ними не делайте. Просто оставьте их открытыми для дальнейшего редактирования.

• Style.css
• Index.php
• header.php
• sidebar.php
• footer.php

Шаг 2. Скопируйте существующий CSS в файл style.css

Если вы хотите продублировать дизайн, это, вероятно, означает, что у вас есть хотя бы какой-то CSS, который вы хотите сохранить. Итак, первый файл, который вы захотите отредактировать, — это ваш файл Style.css.

Для начала добавьте следующее в начало файла.

Как правильно перенести html сайт на wordpress?

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

• Вопрос задан более двух лет назад
• 358 просмотров

Комментировать
Решения вопроса 2

Alex @Kozack Куратор тега WordPress
Thinking about a11y
Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать

Когда то когда динозавры еще делали первые сайты я посмотрел этот ролик
https://www.youtube.com/watch?v=7akPICFR-AI и он мне очень помог, советую к просмотру.

Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 1
DmitryKlyuev @DmitryKlyuev

Если коротко, то вам надо натянуть вашу вёрстку на движок WP (создать свою тему). Это несложно. Первая ссылка из ответа Alexa, там как раз про это, создание тем. Рекомендую посмотреть какой-нибудь видеокурс, бесплатных курсов по этой тематике выше крыши. И потом сделать по образцу свой сайт.

Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• WordPress

Как исправить ошибку 404 в постах WordPress?

• 1 подписчик
• 57 минут назад
• 30 просмотров

• WordPress

Как сделать уведомления по емейл пользователей о новых записях в новом типе поста?

• 1 подписчик
• 20 часов назад
• 29 просмотров