Конвертируйте HTML в WordPress как профессионал

Когда Интернет только появился, веб-сайты были довольно глупыми. То есть они представляли собой не что иное, как текст и статический HTML-код, без причудливых эффектов и очень мало интерактивности.

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

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

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

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

Продолжайте читать, чтобы узнать больше.

Почему вы должны конвертировать HTML в WordPress?

Причины, по которым человеку следует конвертировать HTML в WordPress, весьма разнообразны. Вот подборка наиболее важных из них:

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

Переход от статического HTML к WordPress: методы

Теперь, когда у вас есть все основания для преобразования HTML в WordPress, вы можете приступить к изучению того, как это сделать.

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

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

Ручной метод

1 Создайте новую папку темы

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

• стиль.css
• index.php
• заголовок.php
• боковая панель.php
• нижний колонтитул.php

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

После того, как вы создали файлы, вы можете перейти к копированию кода CSS. Тем, кто хочет продублировать свои сайты и перенести их на WordPress, придется экспортировать и импортировать код 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, и все готово. Не забудьте сохранить файл. Теперь вы можете закрыть style.css.

3 Получите текущий HTML-код

Перейдите к файлу index.html вашего сайта и выделите все содержимое от начала документа до тега div class="main". Этот раздел необходимо вставить в файл header.php, который вы создали на шаге 1.

Вернитесь к файлу index.html и выделите все внутри элемента class="sidebar". Скопируйте содержимое и вставьте его в созданный вами файл sidebar.php. Сделайте то же самое для нижнего колонтитула, со всем содержимым после элемента боковой панели.

Для файла index.php выберите все содержимое, оставшееся после выделения, и вставьте его в новый файл, сохраните и оставьте его открытым для следующего шага.

4 Отредактируйте файл index.php

Чтобы завершить работу над файлом index.php, скопируйте эти строки кода и вставьте их вверху документа:

Затем в самом низу вашего файла index.php поместите эти строки PHP.

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

После этого сохраните файл, закройте его и перейдите к следующему шагу.

5 Загрузите новую тему

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

Перейдите на страницу администратора WP, выберите «Внешний вид», а затем «Темы», чтобы увидеть, отображается ли название темы в списке или нет. Если это так, вы все сделали правильно, и вы можете активировать его. Если это не так, внимательно прочитайте все шаги о том, как снова преобразовать HTML в WordPress.

Также есть полезное видео-руководство от Traversy Media, которое вам стоит посмотреть:

Использование дочерней темы WordPress

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

Чтобы быстрее преобразовать HTML в WordPress, вы можете использовать дочернюю тему из существующей темы. Дочерние темы названы так, потому что они построены на второй теме, которая является родительской.

1 Выберите тему

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

Вы должны выбрать стартовую тему, потому что они основаны на очень простых строках кода.

2 Создайте новую папку темы

Как и в предыдущем случае, вам нужно будет создать новую папку темы. Единственное отличие состоит в том, что вы назовете папку так же, как родительскую тему, на которой основана ваша дочерняя тема, и добавите к ней суффикс «-child».

Например, если ваша тема называется Twenty Nine, вы назовете папку «twentynine-child». Убедитесь, что вы не добавляете пробелов в имени.

3 Настройте новую таблицу стилей

Затем создайте файл style.css внутри папки и добавьте следующие строки кода:

/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Имейте в виду, что это пример. Вам придется заменить информацию на свою. Сохраните файл после завершения.

4 Создайте файл functions.php

Получив файл style.css, вы можете активировать тему как есть. Однако, чтобы веб-сайт выглядел и работал лучше, вам придется использовать функции и стили родительской темы. Для этого вам нужно создать файл functions.php.

Используйте эти строки кода и сохраните файл:

/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Активируйте дочернюю тему

Наконец, вам нужно активировать тему. Заархивируйте папку и добавьте ее в WordPress, перейдя в меню «Внешний вид», «Темы», а затем нажмите «Добавить новую». Загрузите туда заархивированный файл. Другой вариант — перетащить папку в wp-content/themes.

В заключение

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

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

Если вам понравилось читать эту статью о преобразовании HTML в WordPress, вы должны прочитать эту статью о зарплате разработчиков WordPress.

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