Как конвертировать HTML-сайт в бизнес-тему WordPress

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

В этом руководстве я научу вас конвертировать HTML в бизнес-тему WordPress. Это сохраняет все элементы HTML нетронутыми и дает вам гибкость WordPress для легкой настройки любого элемента.

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

• Конвертация HTML-сайта в WordPress
• Какие файлы WordPress вам нужны
• Настройка CSS, JavaScript и изображений
• Добавление функций WordPress для добавления функциональности

Преобразование HTML-сайта в тему WordPress

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

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

Заголовок : заголовок будет включать верхнюю часть раздела.

Основная часть : это длинная страница, поэтому я уменьшил масштаб, чтобы сделать снимок экрана, но вся центральная часть включена в основную часть.

Нижний колонтитул : раздел нижнего колонтитула будет включать нижнюю часть.

Шаг 1. Предварительные требования

Я надеюсь, что у вас уже установлен WordPress на вашем локальном хосте, таком как XAMPP (то есть на вашем компьютере). Если нет, мы уже рассмотрели подробное руководство, которое поможет вам установить и настроить WordPress локально.

Шаг 2: Создайте свою папку темы

В этом руководстве я использую XAMPP, а мой сайт WordPress установлен в папке htdocs. Чтобы создать тему WordPress, вам необходимо получить доступ к папке с темами и создать новую папку.
Теперь откройте папку XAMPP > htdocs > папку WordPress (в моем случае это тестирование )> wp-content > themes .

В папке Themes вы увидите все установленные вами темы WordPress. Создайте новую папку и назовите свою тему.

Шаг 3. Создайте файлы PHP

Вновь созданная папка темы пуста, и вам нужно создать несколько файлов, чтобы она работала. Для этого вам нужно запустить редактор кода (VS Code) и открыть всю папку темы WordPress (в моем случае farhan-wordpress-theme).

Теперь создайте следующие важные файлы WordPress, чтобы лучше организовать свою тему.

1. style.css (содержит детали темы и файлы CSS)
2. index.php (обслуживает основное содержимое, если не объявлены другие дополнительные файлы)
3. header.php (содержит элементы заголовка темы)
4. footer.php (содержит элементы нижнего колонтитула темы)
5. functions.php (содержит функции, включенные в тему WordPress)

Шаг 4. Скопируйте папки CSS, изображений и JavaScript (JS)

Из вашей HTML-темы (загруженной выше) скопируйте папку ресурсов (CSS, JS и папки изображений) в новую папку темы WordPress.

После перехода в папку с новой темой WordPress она будет выглядеть так:

Шаг 5: активируйте новую тему WordPress

Теперь вы добавили важные папки, необходимые для любой темы WP. Затем откройте свой сайт WordPress в браузере и войдите в свою панель управления. Перейдите в Внешний вид> Темы, и вы увидите, что ваша новая тема была добавлена ​​в этот раздел.

Эта тема выглядит пустой. Чтобы добавить информацию и баннер для вновь созданной темы, откройте файл style.css (созданный ранее), вставьте следующий код и сохраните его ( ctrl + s ).

 / *

Название темы: WordPress тема Farhan

Автор: Фархан

Описание: Преобразование HTML в тему WordPress.

Версия: 1.0

* /

Для баннера вам нужно добавить файл изображения в папку с новой темой. Размер изображения должен быть 800 на 600, а имя изображения должно быть « Снимок экрана» (формат png).

После добавления файла screenshot.png обновите панель управления wp-admin, и появится баннер с изображением.

Теперь вы можете просмотреть информацию о теме, нажав на баннер.

Затем просто нажмите « Активировать» .

Шаг 6. Преобразование HTML-кода в заголовок, индекс и нижний колонтитул

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

Теперь скопируйте код заголовка из index.html загруженной темы в файл header.php, который вы создали в папке тем WordPress. Вам нужно скопировать из <! DOCTYPE html> в </header> и сохранить.

Точно так же скопируйте элементы нижнего колонтитула и основного текста из index.html в footer.php и index.php соответственно.

Для нижнего колонтитула скопируйте из <footer> (в моем случае имя класса определено в теге нижнего колонтитула, так что не запутайтесь ) до </html> в файл footer.php и сохраните его.

Затем скопируйте весь код после тега </header> и непосредственно перед <footer> в index.php и сохраните его.

Добавьте функцию WordPress get_header () вверху и get_footer () в конец файла index.php.

Get_header () - это встроенная функция, которая вызывает header.php, и аналогично get_footer () - это функция, которая вызывает footer.php .

Добавьте следующий код вверху файла index.php и сохраните его.

 <? php get_header (); ?> 

Чтобы вызвать нижний колонтитул, вставьте следующий код в конец кода index.php и сохраните его.

 <? php get_footer (); ?> 

Теперь посетите свой сайт, и вы увидите что-то вроде этого.

Шаг 7: настройка CSS

Тот факт, что ваша тема выглядит странно, связан с тем, что файлы CSS не применяются к теме.

Вы уже скопировали папку CSS из темы HTML в папку своей темы WordPress. Теперь вам нужно вызвать эти файлы CSS, чтобы завершить оформление темы.

Имейте в виду, что имена ваших файлов CSS могут отличаться - поэтому дважды проверьте, прежде чем проводить этот процесс.

Вы найдете свои таблицы стилей CSS в файле header.php, поэтому вам нужно выполнить поиск « rel =» stylesheet » », нажав CTRL + f .

После этого удалите таблицы стилей шрифтов Google, потому что они нам не нужны. Теперь мне просто нужно зарегистрировать настоящую таблицу стилей CSS, то есть <link rel = ”stylesheet” href = ”assets / css / style-starter.css”> .

WordPress не понимает обычную структуру таблицы стилей CSS; вот почему мне нужно поставить в очередь и зарегистрировать таблицу стилей CSS. Перейдите в файл functions.php и добавьте следующий код.

 <? php

функция add_css ()

{

   wp_register_style ('первый', get_template_directory_uri (). '/assets/css/style-starter.css', false, '1.1', 'все');

   wp_enqueue_style ('первый');

}

add_action ('wp_enqueue_scripts', 'add_css'); 

Wp_register_style поможет вам зарегистрировать вашу таблицу стилей CSS.

Метод get_template_directory_uri (). '/ href' используется для получения текущего пути к каталогу шаблона. Он объединит текущий путь с соответствующим файлом. Итак, здесь вам нужно определить местоположение вашего файла CSS (href). Вы можете видеть, как я определил путь к этому файлу CSS: get_template_directory_uri (). '/ assets / css / style-starter.css '.

Теперь мы можем удалить ссылку на таблицу стилей CSS из файла header.php, заменить ее следующим кодом и сохранить файл.

 <? php wp_head (); ?>

Wp_head () - это важная ловушка WordPress, которая определяется в разделе <head> </head> файла header.php.

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

В header.php у меня есть одна таблица стилей CSS, и я зарегистрировал ее только в functions.php. Но что, если у вас несколько таблиц стилей? В этом случае вам нужно определить wp_register_style () для каждой таблицы стилей. Не волнуйтесь! Вы можете взять пример из следующего шага, где у меня есть несколько сценариев JS. Процесс такой же, поэтому он очистит ваши запросы и поможет вам понять, как вы будете выполнять эту работу.

Шаг 8: настройте JavaScript

Тема HTML, с которой вы работаете, использует JavaScript, а в файле footer.php файлы JavaScript уже вызываются в формате HTML. Чтобы запустить эти JS-файлы, все, что вам нужно сделать, это выполнить те же действия, которые вы выполнили на предыдущем шаге.

Откройте файл footer.php и найдите « <script src = » с помощью « CTRL + f ». Это поможет вам найти все файлы JS, которые у вас есть. В моем случае их пять, и здесь мне нужно их всех зарегистрировать и поставить в очередь.

Затем вам нужно открыть файл functions.php и вставить следующий код:

 функция add_script ()

{

   wp_register_script ('js-script', get_template_directory_uri (). '/assets/js/jquery-3.3.1.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('js-скрипт');

   wp_register_script ('изменить', get_template_directory_uri (). '/assets/js/theme-change.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('изменить');

   wp_register_script ('всплывающее окно', get_template_directory_uri (). '/assets/js/jquery.magnific-popup.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('всплывающее окно');

   wp_register_script ('карусель', get_template_directory_uri (). '/assets/js/owl.carousel.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('карусель');

   wp_register_script ('bootstrap', get_template_directory_uri (). '/assets/js/bootstrap.min.js', array ('jquery'), 1.1, истина);

   wp_enqueue_script ('начальная загрузка');

}

add_action ('wp_enqueue_scripts', 'add_script');

Вы можете видеть, что структура кода такая же, как и ранее в части настройки CSS. Но здесь вы будете использовать wp_register_script вместо style. Вы регистрируете и ставите каждый файл JS в одну и ту же функцию.

Теперь вы можете удалить все ссылки на сценарий JS (у меня их пять) из файла footer.php , затем вставить следующую строку кода в конец кода (над тегом </body>) и сохранить файл.

 <? php wp_footer (); ?> 

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

Шаг 9. Настройте изображения

Этот процесс прост, и здесь вам нужно определить путь к изображениям.

Сначала откройте файл index.php и найдите «< img src = » с помощью « CTRL + f ». Это поможет вам найти все файлы изображений, которые у вас есть. В моем случае у меня восемь, и здесь мне нужен путь для всех из них.

Дать путь изображениям; добавьте следующий код PHP в теги src и сохраните файл.

 <img src = "<? php echo get_template_directory_uri (). '/ assets / images / p1.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p2.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p3.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p4.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p5.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p6.jpg';?>" alt = "" class = "img-fluid radius-image" /> 

Теперь ваша тема будет похожа на тему HTML и извлекать все изображения.

Но в нем не будет функций WordPress, таких как изменение заголовка сайта и меню навигации WordPress.

Шаг 10. Включите настраиваемый заголовок в WordPress

Если вы войдете в административную панель WordPress и измените заголовок веб-сайта, это не повлияет на заголовок сайта. Чтобы включить эту функцию, вы можете использовать встроенную функцию WordPress bloginfo () с параметром « name » между тегами заголовка в файле header.php и сохранить файл.

 <? php bloginfo ('имя'); ?> 

Точно так же вам нужно использовать встроенную функцию WordPress bloginfo () с параметром « name » между тегами h1 в файле header.php и сохранить файл.

 <? php bloginfo ('имя'); ?> 

Теперь ваша тема получит заголовок, который вы установили в Настройках -> Общие-> Заголовок сайта внутри панели администратора WP.

Шаг 11: Добавьте меню навигации WordPress в WordPress

Когда вы заходите в админку WordPress своего сайта и перейдете в раздел «Внешний вид», вы не увидите опцию «Меню».

Сначала вам нужно включить Menu, добавив следующую строку кода в файл functions.php.

 add_theme_support ('меню'); 

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

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

В этой теме header.php содержит меню навигации.

Найдите следующие строки кода:

 <ul class = "navbar-nav mx-lg-auto">

<li class = "nav-item active">

<a class="nav-link" href="index.html"> Домашняя страница <span class = "sr-only"> (текущая) </span> </a>

</li>

<li class = "nav-item @@ about__active">

<a class="nav-link" href="about.html"> О программе </a>

</li>

<li class = "nav-item @@ contact__active">

<a class="nav-link" href="contact.html"> Связаться </a>

</li>

</ul> 

Замените приведенные выше строки на:

 <? php wp_nav_menu (array ('menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul',)); ?>

Ваше меню WordPress теперь будет отображаться в вашей теме и добавит гибкости вашей бизнес-теме WordPress.

Подведение итогов!

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

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