В начале (Интернета) все веб-сайты были созданы только с текстом и статическим HTML кодом. Теперь, спустя более 20 лет, Интернет стал совсем другим. Веб-сайты стали намного сложнее. Они обеспечивают более богатые и приятные впечатления как для создателей сайтов, так и для посетителей.
Это во многом благодаря проектам с открытым исходным кодом, таким как WordPress. Который за последние десять лет или около того преуспел в своей основной миссии по демократизации онлайн-публикации и многого другого в процессе. Так что любой, у кого установлен WordPress и хорошая тема с плагинами, может иметь современный веб-сайт с продвинутым дизайном и функциональность. Никакого кодирования, даже HTML — не требуется.
Вот почему таким заядлым пользователям WordPress, как я, почти трудно поверить, что в 2023 году кто-то все еще может управлять статическим веб-сайтом HTML вместо сайта на WordPress с темой и плагинами. Но факт в том, что все еще существует значительное количество активных сайтов только на HTML либо HTML с небольшим количеством CSS.
Конечно, у этих владельцев сайтов могут быть веские причины не выполнять обновление или преобразование. Может быть, содержание их сайта никогда не меняется, а простое форматирование и дизайн, которые уже есть, можно использовать. Или, может быть, это меньше хлопот, чем беспокоиться об обновлении сайта WordPress. Оба варианта являются уважительными причинами. Яркие примеры: «Не ремонтируйте то, что не сломано».
Однако у меня такое чувство, что это может быть не основной причиной, по которой владельцы HTML сайтов не сделали этого. Самым очевидным является то, что они просто не знают, как преобразовать свой HTML сайт в WordPress. Особенно без потери контента, дизайна или необходимости чрезмерного форматирования на каждой странице.
Как это часто бывает с WordPress, есть несколько способов решить эту проблему. Ниже я собрал несколько вариантов.
- Варианты преобразований статический HTML сайт в WordPress
- Подготовка: перенос HTML на WordPress
- Перенос статического HTML-сайта в WordPress вручную
- Шаг 1. Создайте новую папку темы и необходимые файлы
- Шаг 2. Скопируйте существующий CSS в файл style.css
- Шаг 3. Разделите HTML-код
- Шаг 4. Завершите работу над файлом Index.php
- Шаг 5: Загрузите новую тему
- Использование готовой темы WordPress и импорт HTML-содержимого
- Вывод
Варианты преобразований статический HTML сайт в WordPress
Как вы решите преобразовать свой статический HTML сайт в WordPress, без сомнения, будет зависеть от ваших личных предпочтений, желаемых временных или денежных вложений и уровня навыков работы с кодом. Вы должны сами решить, что лучше для вас, но с приведенными ниже вариантами вы сможете быстро принять решение и сразу перейти к наиболее актуальной информации в этом статье для вашей конкретной ситуации.
Есть три основных варианта как перенести HTML сайт на WordPress:
- Вручную — создайте тему WordPress на основе вашего текущего статического HTML-сайта. Для этого вам потребуется войти в свой код. Вам нужно будет получить доступ к текущему каталогу сайта через FTP и использовать существующий код в качестве отправной точки. Оттуда вам нужно будет создать необходимые файлы для темы WordPress и скопировать фрагменты кода из кодекса WordPress. Это довольно просто и понятно, если у вас есть некоторый опыт работы с HTML, CSS и немного PHP.
- Установить готовую тему и просто перенесите свой контент. Это, наверное, лучший вариант на стыке простоты и стоимости. Предполагая, что у вас уже есть хостинг для вашего текущего веб-сайта, вам нужно будет потратить деньги, только если вы решите приобрести премиальную тему. Плагин, который мы будем использовать для импорта контента, находится в свободном доступе в официальном репозитории плагинов WordPress.
- Олатить услугу преобразования HTML в WordPress, чтобы пересоздать ваш сайт. Это самое простое решение, так как оно не требует от вас особых действий. Однако это не поможет вам познакомиться с WordPress, и стоимость будет варьироваться в зависимости от того, кого вы решите нанять. Я не буду описывать этот вариант в следующих разделах, потому что, если это интересующий вас маршрут, вы можете просто выполнить быстрый поиск поставщиков услуг, и они позаботятся обо всем остальном.
Заказать у специалиста: Перенос html сайта на WordPress
Подготовка: перенос HTML на WordPress
Независимо от того, какой маршрут вы выберете, есть несколько вещей, которые вы захотите сделать перед погружением.
Просмотреть доступные варианты и выбрать пакет, который наилучшим образом соответствует вашим потребностям. Или, может быть, вы хотите вместо этого создать локальную установку WordPress? Вы всегда можете перенести его на хостинг позже.
После того, как вы выбрали, вам нужно будет установить WordPress и войти в WP Admin. Это точка, в которой наши два возможных пути расходятся.
Перенос статического HTML-сайта в WordPress вручную
Если ваша цель — не только перенести контент со статического HTML-сайта в WordPress, но и продублировать ваш текущий дизайн, это означает, что вам нужно будет создать свою собственную тему. К счастью, это не так страшно, как может показаться сначала. Для этого нужно всего лишь создать несколько папок и файлов, немного скопировать и вставить, а затем загрузить результат.
Вам понадобится редактор кода, такой как Sublime или Notepad ++, и доступ как к каталогу вашего HTML-сайта, так и к каталогу вашей новой установки WordPress.
Шаг 1. Создайте новую папку темы и необходимые файлы
На рабочем столе создайте новую папку для хранения файлов вашей темы. Назовите его, как хотите, например myTheme.
Затем создайте несколько файлов (все они будут в папке новой темы) в редакторе кода. Пока ничего с ними не делайте. Просто оставьте их открытыми для дальнейшего редактирования.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2. Скопируйте существующий CSS в файл style.css
Если вы хотите продублировать дизайн, это, вероятно, означает, что у вас есть хотя бы какой-то CSS, который вы хотите сохранить. Итак, первый файл, который вы захотите отредактировать, — это ваш файл Style.css.
Для начала добавьте следующее в начало файла.
1 2 3 4 5 6 7 8 | /* Theme Name: Замените на имя вашей темы Theme URI: URL вашей темы (сайта) Description: Краткое описание темы Version: 1.0 Author: Ваше имя Author URI: Ссылка на ваш соц. аккаунт или сайт. */ |
После этого раздела просто вставьте существующий 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 кода.
1 | <?php get_header(); ?> |
Затем в самом низу файла index.php поместите эти строки.
1 2 | <?php get_sidebar(); ?> <?php get_footer(); ?> |
И наконец, мы должны добавить то, что называется The Loop. Это основной бит php, который WordPress использует для отображения содержимого вашего сообщения посетителям. Итак, последний шаг в создании файла index.php вашей новой темы — это добавление приведенного ниже кода в раздел содержимого.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?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.
Прежде чем решить, что лучше всего для вас, вы можете прочитать в статье бесплатные и премиальные темы, какие темы предназначены для удовлетворения ваших потребностей.
После того, как вы выбрали понравившуюся тему и скачали ее заархивированный пакет файлов, вам нужно перейти в WP Admin> Внешний вид> Темы> Добавить новую и активировать выбранную тему WordPress.
Как только это будет сделано, у вас будет новый веб-сайт и тема WordPress — но больше ничего. Когда вы просматриваете свой сайт, он будет пустым и, вероятно, будет выглядеть скучно. Это нормально, потому что теперь мы собираемся импортировать контент вашего старого сайта.
В WP Admin перейдите в Плагины> Добавить новый и найдите плагин под названием HTML Import 2 от Stephanie Leary. После того, как этот плагин установлен и активирован, следуйте его удобному руководству пользователя, чтобы импортировать весь каталог HTML-страниц. В комплекте с изображениями!
После этого весь ваш старый контент будет перенесен на WordPress и отформатирован с помощью новой темы. Или, если вы создали свою собственную тему выше, ваш сайт должен выглядеть примерно так же, как и раньше — просто работающий на WordPress.
Вывод
Если вы использовали этот пост в качестве руководства по переносу своего веб-сайта на WordPress, значит, вы только что присоединились к одному из крупнейших сообществ с открытым исходным кодом в мире. Добро пожаловать!
Это интересное место с множеством разработчиков, дизайнеров, блоггеров, мастеров и многих других — все они создают сайты с помощью тем и плагинов WordPress.
Если вы «поймали ошибку WordPress», то официальный веб-сайт WordPress.org полон полезных тем, плагинов и других ресурсов. Если вы хотите дополнительно настроить файлы тем, изучите Кодекс, чтобы получить лучшие советы, приемы и варианты.
И, конечно же, я надеюсь, что вы оставите комментарий в комментариях ниже и подпишетесь на новые сообщения в блоге в будущем.
