Как создать WordPress тему из HTML

Если вы начали с веб-сайта HTML (+ CSS) без CMS, вы не должны бросить все это при переходе на WordPress. Вы можете конвертировать HTML в WordPress и запустить (теперь более мощный) сайт на WordPress динамической платформе.

Или, может быть, у вас другая ситуация. Может быть, вам просто интересно, как конвертировать дизайн HTML в полноценную тему WordPress. Или, может быть, вы просто хотели бы узнать основы WordPress (+ PHP) программирования.

Какой бы ни была причина, вы здесь сегодня, а я попытаюсь познакомить вас с основами создания темы WordPress от HTML. Вы можете следовать этому руководству, чтобы создать свою тему с нуля или вы можете скачать WPExplorer тему https://github.com/wpexplorer/wpex-starter-theme, которая обеспечивает "пустой холст", чтобы создать свою тему со всеми необходимыми файлами шаблонов и кода для начала работы. В противном случае, запускайте редактор кода (я использую и рекомендую Notepad ++ или SublimeText ) и браузер, а затем следуйте этому простому руководству до конца.

Название вашей WordPress темы

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

Общие предположения на данный момент:

• У вас есть ваш index.html и CSS-файл для таблицы стилей тоже готов.
• У вас есть рабочая установка WordPress по крайней мере одной темой.
• Вы уже создали папку, в которой вы будете готовить свою новую WordPress тему.

Переведем ваш шаблон HTML в PHP файлы

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

Следующий шаг включает в себя создание четырех PHP файлов. Используя редактор кода, создайте index.php, header.php, sidebar.php и footer.php, и сохраните их в папке темы. Все файлы пусты на данный момент, так что мы не ожидаем, что они будут что-то делать. Для иллюстрации, я использую следующие index.html и CSS файлы таблиц стилей:

CSS STYLESHEET

Вы можете скопировать оба кода, если у вас нет ничего, чтобы работать дальше. Просто скопируйте и вставьте их в редактор кода, сохраните, создайте четыре PHP файла, которые мы только что упомянули и готовьтесь к следующей части. Откройте вновь созданный (и пустой) header.php. Войдя в WordPress, перейдите к внешнему виду - >> Редактор и откройте header.php. Скопируйте весь код между тегами <HEAD> и вставьте его в свой файл header.php. Ниже приведен код, который я получил из файла header.php:

Затем откройте файл index.html и скопируйте код заголовка (т.е. код в <DIV > раздел) к вашему header.php чуть ниже <HEAD> тегами, как показано ниже:

. В любом месте между <HEAD> теги в файле header.php, чтобы связать таблицы стилей. Не забудьте также скопировать <HTML> и <body> открывающие метки в header.php, как показано выше. Сохраните все изменения.

Скопируйте вторую секцию (то есть <DIV > . </DIV> от index.html во вновь созданный index.php, и добавьте .

<pre > <?php get_header(); ?> </pre> . На самом верху, и .

. В самый конец. Эти три строки вставляют header.php, sidebar.php и footer.php (в таком порядке) и отображают их в index.php. Сохраните все изменения. На данный момент, ваш файл index.php должен выглядеть следующим образом:

Затем скопируйте содержимое из разделов боковой панели и нижнего колонтитула в вашем index.html в sidebar.php и footer.php соответственно.

Добавление постов

Ваш шаблон HTML собирается превратиться в тему WordPress, не так ли? Нам просто нужно добавить свои посты. Если у вас есть посты на своем блоге, как они будут отображаться в WordPress? Вы можете использовать специальный тип функции PHP, известной как Loop. Loop - это просто специализированный фрагмент кода, который отображает ваши сообщения и комментарии там, куда вы поместите его.

Теперь, чтобы отобразить свои сообщения в разделе содержимое шаблона index.php, скопируйте и вставьте следующий код между <DIV > и </div>, как показано ниже:

Этот код будет выводить ваши посты. На данном этапе (и используя образцы файлов, приведенные в данном руководстве), ваш header.php должен выглядеть следующим образом:

Ваш sidebar.php должен выглядеть следующим образом:

Ваш footer.php должен выглядеть следующим образом:

Заметили ли вы закрывающие <body /> и </HTML> в конце? Не забудьте включить их тоже.

Ваш style.css должен выглядеть следующим образом:

И ваш index.php должен выглядеть следующим образом:

Все пять файлов должны быть сохранены в папке темы. Назовите папку, как хотите и сожмите её в архив ZIP с помощью WinRar или подобной программой. Загрузите новую тему в WordPress, активируйте её и посмотрите в действии!

Это было легко, не так ли? Вы можете задать стиль вашей теме, какой вы хотите, но большинство функций, которые мы любим в WordPress по-прежнему неактивно. В следующей статье цикла мы поднимемся на ступеньку выше и будем работать с другими аспектами программирования WordPress (например, файлы шаблонов и шаблонов тегов), которые позволят вам превратить ваши HTML - шаблоны в зависимости от того, как вам нравится. Оставайтесь с нами!

Продолжение следует.

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.