Как перенести сайт на WordPress с HTML
Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.
На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как перенести сайт на WordPress с HTML. К счастью, 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: Создание папки с новой темой и необходимых файлов
Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2: Скопируйте существующий CSS- код в новый файл стилей
Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.
/*
Theme Name: Замените этот текст именем вашей темы.
Theme URI: Адрес вашей темы
Description: Краткое описание.
Version: 1.0
Author: Ваше имя
Author URI: Адрес вашего сайта.
*/После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.
Шаг 3: Выделите ваш текущий HTML-код
Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.
Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div class=”main”). Скопируйте выделенный код и вставьте его в header.php.
Вернитесь в index.html. Выделите код разметки боковой панели (например, aside class=”sidebar”). Скопируйте и вставьте его в файл sidebar.php.
Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php.
Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php. Сохраните его, но пока не закрывайте.
Шаг 4: Завершите создание файла Index.php
Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.
В самом начале index.php вставьте приведенную ниже строку:
<?php get_header(); ?>Затем в самом конце index.php вставьте следующий код:
<?php get_sidebar(); ?>
<?php get_footer(); ?>Теперь нужно добавить то, что называется циклом. Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index.php добавьте этот код:
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) 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><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>Сохраните и закройте файл index.php. Тема готова! Осталось только загрузить её на сайт WordPress.
Шаг 5: Загрузка вашей темы
Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/. Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.
Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.
Использование темы WordPress и импорт контента
Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.
Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую, установите и активируйте новую тему.
После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый. Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.
Заключение
Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.
И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс. Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.
Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!