Преобразование сайтов HTML в сайты WordPress

Опубликовано: 2018-10-05

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

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

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

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

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

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

Подпишитесь на наш канал Youtube

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

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

Есть три основных варианта:

1. Вручную создайте тему WordPress на основе вашего текущего статического HTML-сайта.

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

2. Установите готовую тему и просто перенесите свой контент.

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

3. Платите за услугу преобразования HTML в WordPress, чтобы воссоздать ваш сайт.

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

Подготовка к преобразованию HTML в WordPress

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

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

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

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

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

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

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

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

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

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

Шаг 2. Скопируйте существующий CSS в новую таблицу стилей

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

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

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

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

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

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

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

Вот так.

Сначала откройте файл 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(); ?>

И наконец, мы должны добавить то, что называется The Loop. Это основная часть php, которую 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 / . Затем вернитесь в WP Admin> Внешний вид> Темы, и ваша вновь созданная тема должна появиться там. Идите и активируйте его!

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

Использование готовой темы WordPress и импорт HTML-содержимого

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

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

После того, как вы выбрали понравившуюся тему (и загрузили ее заархивированный пакет файлов), вы захотите вернуться в WP Admin> Внешний вид> Темы> Добавить новую и установить / активировать новую тему WordPress.

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

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

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

В заключение

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

Если вы «поймали ошибку WordPress», официальный веб-сайт WordPress.org полон полезных тем, плагинов и других ресурсов. Если вы хотите дополнительно настроить файлы тем, изучите Кодекс, чтобы получить, казалось бы, бесконечные советы, приемы и варианты.

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

Миниатюра статьи через Макса Грибоедова / shutterstock.com