Изначально Интернет состоял сплошь из текста и статического 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 class = "main" в файл header.php
- Все внутри тега aside class = "sidebar", включая сам тег, в файл sidebar.php
- Все после боковой панели в файл footer.php
- Вся остальная информация, оставшаяся в файле index.html, копируется в файл index.php
Закройте файл index.html.
Теперь, финальная доработка файла index.php.
В самом начале файла добавьте строку <?php get_header(); ?>. Затем, внизу файла поместите код <?php get_sidebar(); ?> <?php get_footer(); ?>.
И последнее, что нужно сделать, это организовать цикл. Это то, что WordPress будет использовать для отображения контента для посетителей вашего сайта. Добавьте следующий код:
<?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="//msiter.ru/%3C?php_the_permalink%28%29%3B_%3F%3E" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--конец заголовка поста-->
<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>
<!--конец записи-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--конец подвала поста-->
</div><!--конец поста-->
<?php endwhile; /* перемотать или продолжить, если все посты извлечены */ ?>
<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><!--конец навигации-->
<?php else : ?>
<?php endif; ?>
Сохраните файл index.php и закройте его.
Наконец пришло время загрузить вашу новую тему. Это означает, что вы должны взять все файлы темы, которые вы сохранили в папке вашей темы, и подключить ее к WordPress. Сделать это можно, скопировав папку папку темы в директорию /wp-content/themes/. Затем нужно перейти в раздел Внешний вид > Темы и активировать вашу новую тему. Теперь вам осталось только добавить контент старого сайта.
Что-то все это для меня слишком сложно!
Если вам все вышесказанное кажется слишком сложным, то мы рекомендуем использовать два других способа перевода HTML сайта на Wordpress, о которых мы говорили в начале статьи. А именно найти уже готовую тему Wordpress наиболее подходящую для вашего сайта и использовать ее, либо же обратиться к специалисту, который все сделает за вас.
Очень скоро вы вольетесь в ряды миллионов пользователей, которые попробовав один раз Wordpress уже никогда не захотят вернуться к старым способам создания сайтов. У Wordpress множество разнообразных тем, плагинов и ресурсов. А многочисленное и дружелюбное сообщество охотно поделится с вами секретами и приемами, и поможет решить любую проблему.
