Как бесплатно конвертировать HTML-сайт в WordPress? Руководство

Опубликовано: 2015-05-18

Вначале все веб-сайты были сделаны с использованием текста и статического HTML. Не было WordPress и необходимости конвертировать HTML-сайт в WordPress или любую другую систему CMS.

Многие компании по-прежнему полагаются на простые HTML-сайты для своего присутствия в Интернете. Эти HTML-сайты обычно статичны. Это означает, что даже незначительные изменения на веб-сайте можно изменить путем редактирования файла кодировки.

Теперь, более 20 лет спустя, Интернет - это совсем другое место. Охватывая более 25% Интернета , WordPress все больше становится системой управления контентом (CMS), которую выбирают среднестатистические пользователи.

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

Оглавление

HTML веб-сайт

Независимо от того, как закодирован ваш сайт, как только посетитель загружает страницу на вашем сайте, браузер берет все элементы (включая серверные, изображения из другого каталога и т. Д.) И объединяет их в окончательный статический HTML-код. страница.

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

Даже если ваш сайт состоит из somepage.php, который вызывает файл с именем header.inc, и файл с именем footer.php, когда пользователь просматривает somepage.php в браузере, полученный исходный код находится в одном месте , как если бы он был написан вручную как статическая HTML-страница.

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

Предварительные шаги по переходу со статического HTML-сайта на WordPress

Если вы готовы перейти на WordPress, обратите внимание на четыре шага:

1. Проанализируйте свой существующий HTML-сайт

Проверьте свой сайт на наличие нерелевантного или устаревшего контента и, если он найден, очистите его. Изучите текущую систему навигации и подумайте, как ее можно улучшить. Анализ вашего HTML-сайта поможет вам решить, какой контент, функции и функции следует перенести в WordPress.

Это даст четкое представление о том, какие плагины вам нужно установить, чтобы получить ту же функциональность на платформе WordPress.

2. Познакомьтесь с WordPress

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

3. Сделайте резервную копию своего HTML-сайта.

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

4. Конвертируйте HTML-сайт в WordPress.

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

Если ваш сайт большой, вы можете воспользоваться плагином HTML to WordPress, например HTML Import 2, или нанять кого-нибудь для преобразования HTML в WordPress.

Как конвертировать HTML-сайт в WordPress Учебник

То, как вы решите преобразовать свой статический HTML-сайт в сайт WordPress, без сомнения, будет зависеть от ваших личных предпочтений, желаемых временных / денежных вложений и уровня навыков работы с кодом.

Способ 1

С помощью этого метода преобразования веб-сайта HTML в WordPress вы сохраните дизайн и внешний вид сайта.

1. Загрузите HTML-страницы с вашего текущего хоста. Для этого используйте WinHTTrack. Это отличный бесплатный инструмент, которым очень легко пользоваться. Убедитесь, что вы также захватили папку с изображениями (или там, где у вас есть изображения на старом сайте).

2. Установите WordPress на новый веб-хостинг.

  • Установите структуру постоянных ссылок на «Название сообщения» (/% postname% /)
  • Установите флажок «Не рекомендовать поисковым системам индексировать этот сайт» (пока все не будет сделано)
  • Установите какой-нибудь плагин режима обслуживания (если хотите), чтобы никто, кроме вас, не мог получить доступ к вашему новому WordPress.
  • Установите бесплатный плагин WordPress HTML Import 2. Используйте его, чтобы «загрузить» старый сайт на новый. Руководство пользователя по импорту всего каталога HTML-страниц.

3. Загрузите содержимое, которое вы только что загрузили с шага 1, в файловую структуру нового веб-хоста. Поместите их в папку с названием, например, «html-files-to-import». Загрузите все старые изображения в свою медиатеку WordPress на новом сайте.

4. Запустите импорт.

5. Подготовьте командную строку DOS и Excel.

  • В командной строке DOS перейдите туда, где вы разместили свои HTML-файлы (проще всего поместить их в папку с именем «yourwebsite» и поместить эту папку на диск C: \). Затем запустите эту команду: i. каталог> files.txt
  • Откройте файл files.txt в Excel.
  • Теперь в Excel. По сути, вы собираетесь использовать несколько функций Excel, включая «объединение» для рендеринга «канонического» кода, который вы будете помещать в файлы HTML.
  • Поместите соответствующий канонический код в каждый файл HTML. Вы можете сделать это, нанять аутсорсеру или нанять кого-нибудь для написания кода PHP, который будет делать это автоматически.

6. Загрузите файлы HTML на свой веб-хостинг . Поместите их в корневую (т. Е. Самую верхнюю) папку вашего нового веб-сайта. Не забудьте загрузить в ROOT и папку изображений.

7. Убедитесь, что на новом сайте все по-прежнему работает.

8. Снимите флажок с шага № 2 - «Отказать поисковым системам от индексации этого сайта» и отключите плагин HTML Import 2.

9. Измените DNS у вашего регистратора.

10. Убедитесь, что URL-адрес вашего сайта соответствует правильному IP- адресу (ваш новый IP-адрес, а не старый IP-адрес) и что ВСЕ страницы загружаются правильно. Возможно, вам придется подождать несколько часов, пока серверы имен обновятся.

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

Вы захотите добавить перенаправления в свой файл .htaccess, которые будут указывать ваши старые «.html-страницы» на ваши новые страницы WordPress.

Способ 2

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

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

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

Затем создайте несколько файлов (все они будут в папке вашей новой темы) в редакторе кода:

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

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

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

 / *
 Название темы: замените название вашей темы.
 URI темы: URI вашей темы
 Описание: Краткое описание.
 Версия: 1.0
 Автор: You
 URI автора: адрес вашего веб-сайта.
 * /

После этого раздела вставьте только существующий CSS ниже. Сохраните и закройте файл.

3. Разделите текущий HTML-код

Здесь идет процесс вырезания и вставки частей вашего существующего кода в различные файлы, которые вы создали.

  • Сначала откройте файл index.html вашего текущего сайта. Выделите все, от начала файла до открывающего тега div class = ”main” . Скопируйте и вставьте этот раздел в свой файл header.php , сохраните и закройте.
  • Вернитесь к вашему файлу index.html . Выделите элемент aside class = ”sidebar” и все, что внутри него. Скопируйте и вставьте этот раздел в свой файл sidebar.php , сохраните и закройте.
  • В своем index.html выберите все, что находится после боковой панели, скопируйте и вставьте в файл footer.php , сохраните и закройте.
  • В файле index.html выберите все, что осталось (это должен быть раздел основного содержимого) и вставьте его в файл index.php . Сохраните, но пока не закрывайте. Однако вы можете закрыть файл index.html и перейти к последним шагам. Почти сделано!

4. Завершите работу над файлом Index.php.

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

В самом верху файла index.php поместите следующую строку php.

<?php get_header(); ?>

Затем в самом низу файла index.php поместите эти строки php.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!-- end entry-->
<div class = "post-footer" >
<div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div>
</div><!-- end post footer-->
</div><!-- end post-->
<?php endwhile ; /* rewind or continue if all posts have been fetched */ ?>
<div class = "navigation index" >
<div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

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

5. Загрузите новую тему.

Теперь вы будете хранить созданные файлы темы в своей новой папке темы. Установите WordPress.

Поместите новую папку темы в / wp-content / themes / . Перейдите в WP Admin> Внешний вид> Темы, и вы должны увидеть там только что созданную тему. Активируйте это! Все, что осталось сделать на этом этапе, - это заполнить ваш новый сайт WordPress содержимым вашего старого сайта.

6. Скопируйте контент с HTML- сайта в WordPress.

В WP Admin перейдите в Плагины> Добавить новый. Найдите плагин под названием HTML Import 2 от Стефани Лири. После того, как этот плагин установлен и активирован, следуйте его руководству пользователя, чтобы импортировать весь каталог HTML-страниц. После этого ваш сайт должен выглядеть так же, как и раньше, только на WordPress.

Использование существующей темы WordPress для преобразования HTML-сайта (самый простой способ)

Если описанные выше шаги кажутся слишком интенсивными или трудоемкими, есть другой способ. Это самый простой способ.

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

Есть бесплатные темы и темы премиум-класса. После того, как вы выбрали понравившуюся тему (и загрузили ее заархивированный файл), установите / активируйте новую тему WordPress.

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

В WP Admin перейдите в Plugins> Add New и найдите плагин под названием HTML Import 2. Следуйте руководству пользователя, чтобы импортировать весь каталог HTML-страниц. После этого у вас будет весь ваш старый контент, но новый вид.

4 Конвертируйте HTML в WordPress с помощью Theme Matcher

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

Преобразование HTML-сайта в WordPress-сайт-с-темой-сопоставителем

5 Служба конвертации HTML в WordPress

HTML в WordPress преобразует ваши HTML-проекты в темы WordPress без необходимости писать ни одной строчки PHP.

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

Конвертер HTML в WordPress

Преобразование полностью автоматизировано , и функциональность темы можно расширить, просто добавив классы конвертера с префиксом «wp-» в ваш HTML.

Конвертер создает шаблоны для каждого файла HTML, ссылается на ваши ресурсы и заполняет все необходимые функции php. Используйте Bootstrap, Webflow, Dreamweaver или любой другой инструмент / фреймворк, с которым вы уже знакомы, для создания веб-сайтов. Если веб-сайт создан с использованием HTML, вы можете преобразовать его в тему.

Что нужно сделать после миграции?

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

  • Установите необходимые плагины - чтобы расширить свой новый сайт WordPress теми же функциями, что и HTML-сайт, установите плагины, которые вам пригодятся.
  • Проверьте и исправьте неработающие ссылки - проверьте свой сайт на наличие неработающих ссылок (ошибки 404) и, если обнаружите, исправьте их.
  • Настройка настраиваемой страницы ошибки 404 - добавьте настраиваемую страницу ошибки 404, чтобы посетители переходили в соответствующие разделы вашего сайта WordPress, если они попытаются получить доступ к любому URL-адресу, который не существует.
  • Ссылки переадресации - чтобы проинформировать поисковые системы о том, что контент вашего веб-сайта был перемещен на новый веб-адрес, установите 301 переадресацию. Для этого можно использовать Simple 301 Redirect.
  • Включение индексации поисковой системы : перейдите в « Настройки -> Чтение » на панели управления WordPress и установите флажок « Разрешить поисковым системам индексировать этот сайт », чтобы ваш сайт был проиндексирован поисковыми системами.
  • Создание и отправка карты сайта в формате XML . Чтобы обеспечить максимально быстрое включение вашего сайта в результаты поиска, создайте карту сайта в формате XML и отправьте ее в Google.

WordPress против HTML - ЗА И ПРОТИВ

Запуск бизнес-сайта - непростой процесс. Одна из самых больших дилемм - выбрать статический HTML-сайт или использовать WordPress.

WordPress - WordPress воспринимается как CMS (система управления контентом). Упрощенная HTML-версия для пользователей, не являющихся техническими специалистами, для добавления и изменения материалов на своих веб-сайтах.

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

Интерфейс очень простой и удобный, и для его изучения не требуется специальной подготовки. Рынок CMS очень конкурентен, но WordPress каждый раз побеждает конкурентов.

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

Преимущества использования WordPress:

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

Недостатки использования WordPress:

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

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

Поэтому все веб-сайты были построены как статический HTML (языки гипертекстовой разметки). Дело было в том, чтобы иметь веб-сайт. Не изменять контент или его макет, потому что вам придется снова нанять разработчика HTML.

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

Преимущества HTML-сайта:

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

Недостатки HTML-сайта:

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

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

Как преобразовать HTML в резюме WordPress

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

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

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