Преобразование 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: Создание папки с новой темой и необходимых файлов

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

  • 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: Адрес вашего сайта.
*/
Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress

После этого блока вставьте 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

Как добавить на WordPress страницу HTML-Sitemap

Завершим создание файла 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; ?>
7 лучших онлайн-чатов для сайтов на WordPress

Сохраните и закройте файл 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» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню