Преобразование шаблонов HTML в темы WordPress

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

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

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

Преобразование HTML вручную

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

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

Шаг 1: Создайте папку темы

Во-первых, вам нужно создать папку для хранения ваших новых файлов темы и пометить ее именем вашей новой темы. Затем с помощью редактора кода вы можете создать пять конкретных файлов:

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

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

Шаг 2: Скопируйте и вставьте существующий CSS

Следующим вашим приоритетом является настройка файла каскадной таблицы стилей (CSS). Здесь вы наметите все различные элементы стиля для вашего сайта.

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

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

Шаг 3: Отделите существующий HTML

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

Например, в файле index.html исходного веб-сайта вы можете найти первый тег <div> с классом main. Все, что предшествует этому тегу, можно скопировать и вставить в новый файл header.php .

Затем вы повторите этот процесс для тегов «боковая панель» и «нижний колонтитул». Скопируйте код, содержащийся в каждом из этих элементов, и вставьте его в соответствующие файлы PHP.

Теперь у вас останется основная часть файла index.html . Это то, что составляет основной макет содержимого вашего веб-сайта на основе HTML. Вам нужно будет скопировать оставшийся код и вставить его в новый файл index.php .

Шаг 4: Настройте файл Index.php

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

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

get_header();

Вы поместите это в свой файл шаблона index.php или на последующие страницы, где вы хотите, чтобы заголовок отображался. То же самое относится и к вашему нижнему колонтитулу.

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

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

Теперь, когда ваша новая тема готова к работе, вам нужно поместить ее папку в каталог wp-themes/content/ вашего веб-сайта:

После того, как вы загрузили файлы, вы можете войти в свою панель управления WordPress и перейти в «Внешний вид» > «Темы». Здесь вы должны увидеть свою новую тему в списке и иметь возможность нажать «Активировать» и начать ее использовать.

Импорт содержимого HTML с помощью плагина

Другой способ справиться с этим процессом — использовать плагин для переноса контента со старого сайта на основе HTML. К сожалению, очень мало доступных инструментов, совместимых с последними версиями WordPress. Однако вы можете проверить бесплатную пробную версию WP Site Importer:

Этот плагин может сканировать весь ваш веб-сайт и каталогизировать перемещаемый контент. Это работает лучше всего, если ваш HTML хорошо организован и «чист». Вы также сможете импортировать контент, такой как меню и ссылки.

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

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

Шаг 1: выберите тему

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

Однако вам не нужно активировать эту родительскую тему.

Шаг 2: Создайте папку для вашей дочерней темы

Затем вам нужно получить доступ к своим файлам с помощью FTP-приложения и создать новую папку в вашем каталоге wp-content/themes . Этот файл должен иметь то же имя, что и ваша родительская тема, с добавлением «-child» в конце.

Например, если вы собираетесь создать дочернюю тему для Twenty Nineteen, вы можете создать папку с именем двадцать девятнадцать-ребенок:

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

Шаг 3: Настройте таблицу стилей

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

Шаг 4: Настройте файл Function.php

Теперь, когда у вас есть две темы, с которыми вы работаете, вам нужно сообщить WordPress, что ваша дочерняя тема зависит от родительского CSS. Для этого вы можете использовать PHP-вызов wp_enqueue_style() .

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

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

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

Нажмите «Активировать» на дочерней теме, чтобы установить ее в качестве темы вашего веб-сайта. Теперь вы готовы копировать HTML-контент веб-сайта на новый сайт WordPress.

Купить услугу конвертации сайта

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

1. НанятьWPGeeks

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

2. Решения ФантасТек

FantasTech Solutions — еще одна служба преобразования HTML в WordPress. Он рекламирует высокопрофессиональные преобразования HTML в высококачественные, хорошо закодированные шаблоны тем WordPress. Вы должны иметь в виду, что стоимость начинается с 297 долларов за одну страницу. Стоимость дополнительных страниц начинается от 147 долларов за каждую, точная цена зависит от сложности.

Настройте свой сайт с помощью WP Engine

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

Здесь, в WP Engine, мы считаем, что правильные ресурсы разработчиков могут оказать огромное влияние на ваши проекты. В дополнение к инновационным решениям мы предлагаем планы и ценовые категории для любого бюджета!