В первой части этой серии я показал вам, как подготовить файлы HTML и CSS для WordPress, чтобы убедиться, что структура будет работать, код действителен и что используются правильные классы.
В этом руководстве вы узнаете, как взять файл index.html и разбить его на набор файлов шаблонов для использования в WordPress.
Что вам нужно
Для этого урока все, что вам нужно, это самый простой инструмент для редактирования HTML и PHP:
- Редактор кода на ваш выбор.
Что такое файлы шаблонов?
Тема WordPress состоит из нескольких файлов шаблонов. По крайней мере, тема должна содержать два файла для работы, это index.php и style.css .
Однако в хорошо написанной теме содержимое файла index.php будет разделено на основной файл шаблона ( index.php ) и набор включаемых файлов . Это файлы, содержащие код для верхнего, бокового и нижнего колонтитула.
В некоторых темах для Loop используется дополнительный включаемый файл; Я подойду к этому в четвертой части этой серии. Файлы называются включаемыми файлами, потому что вы добавляете код в свой файл index.php, чтобы сообщить WordPress о включении их содержимого.
Наш файл index.html будет разделен на четыре файла PHP:
- index.php , который будет содержать основное содержимое плюс код для включения других файлов
-
header.php , который будет включать раздел
<head>плюс все в заголовке и навигации - sidebar.php , который будет содержать область виджета боковой панели
- footer.php, который будет содержать (как вы уже догадались!) нижний колонтитул, а также закрывающий
</body>
В ходе этой серии вы добавите в эти файлы, чтобы ваша тема могла включать в себя виджеты, меню и цикл, а также добавили хуки, которые будут использоваться плагинами. Вы также добавите дополнительные файлы шаблонов для отображения различных типов контента. Если вы хотите начать с этого, взгляните на страницу Кодекса в Иерархии шаблонов WordPress .
Но пока все, что вам нужно сделать, это создать набор файлов PHP и разделить на них содержимое вашего файла index.php .
Создание файлов PHP
Первый шаг — создать пустые файлы. Создайте четыре пустых файла со следующими именами и откройте их в редакторе кода:
- index.php
- header.php
- sidebar.php
- footer.php
Убедитесь, что все они находятся в папке с названием вашей темы — в моем случае я назову папку « wptutsplus-demo-theme ».
Скопируйте таблицу стилей в эту папку. Вы не будете редактировать его в этом уроке, но вы будете делать это в следующей части серии.
Заполнение заголовочного файла
Далее вы скопируете верхнюю часть index.html в свой файл header.php .
Откройте index.html и выберите все, от начального объявления DOCTYPE до открывающего тега div class="main" :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!— add a class to the html tag if the site is being viewed in IE, to allow for any big fixes —>
<!—[if lt IE 8]><html class=»ie7″><![endif]—>
<!—[if IE 8]><html class=»ie8″><![endif]—>
<!—[if IE 9]><html class=»ie9″><![endif]—>
<!—[if gt IE 9]><html><![endif]—>
<!—[if !IE]><html><![endif]—>
<meta charset=»utf-8″ />
<meta name=»viewport» content=»width=device-width» />
<title>WordPress Theme Building — Creating a WordPress theme from static HTML</title>
<link href=»style.css» rel=»stylesheet» media=»all» type=»text/css» />
<header role=»banner»>
<div class=»site-name half left»><!— site name and description —></div>
<div class=»site-name half left»>
<h1 class=»one-half-left» id=»site-title»><a title=»Creating a WordPress theme from static html — home» rel=»home»>WordPress Theme Building</a></h1>
<h2 id=»site-description»>Creating a WordPress theme from static html</h2>
</div>
<!— an aside in the header — this will be populated via a widget area later —>
<aside class=»header widget-area half right» role=»complementary»>
<div class=»widget-container»>This will be a widget area in the header — address details (or anything else you like) goes here</div><!— .widget-container —>
</aside><!— .half right —>
</header><!— header —>
<!— full width navigation menu — delete nav element if using top navigation —>
<nav class=»menu main»><?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class=»skip-link screen-reader-text»><a title=»Skip to content» href=»#content»>Skip to content</a></div>
<ul>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>Latest news</a></li>
<li><a href=»#»>Featured articles</a></li>
</ul>
</nav><!— .main —>
<div class=»main»>
|
Скопируйте этот код и вставьте его в файл header.php .
Сохраните ваш новый заголовочный файл.
Заполнение файла боковой панели
Теперь повторите это для боковой панели.
В вашем файле index.html выберите элемент aside class="sidebar" и все внутри него:
|
01
02
03
04
05
06
07
08
09
10
11
|
<!— the sidebar — in WordPress this will be populated with widgets —>
<aside class=»sidebar widget-area one-third right» role=»complementary»>
<div class=»widget-container»>
<h3 class=»widget-title»>A sidebar widget</h3>
<p>This is a sidebar widget, in your WordPress theme you can set these up to display across your site.</p>
</div><!— .widget-container —>
<div class=»widget-container»>
<h3 class=»widget-title»>Another sidebar widget</h3>
<p>A second sidebar widget, maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p>
</div><!— .widget-container —>
</aside>
|
Теперь скопируйте это в файл sidebar.php и сохраните.
Заполнение файла нижнего колонтитула
Процесс заполнения файла footer.php идентичен заголовку и боковой панели.
Выберите все после боковой панели в файле index.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
</div><!— .main —>
<footer>
<!— the .fatfooter aside — I use this to enable a screen-wide background on the footer while still keeping the footer contents in line with the layout —>
<aside class=»fatfooter» role=»complementary»>
<div class=»first quarter left widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>First footer widget area</h3>
<p>A widget area in the footer — use plugins and widgets to populate this.</p>
</div><!— .widget-container —>
</div><!— .first .widget-area —>
<div class=»second quarter widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Second footer widget area</h3>
<p>A widget area in the footer — use plugins and widgets to populate this.</p>
</div><!— .widget-container —>
</div><!— .second .widget-area —>
<div class=»third quarter widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Third footer widget area</h3>
<p>A widget area in the footer — use plugins and widgets to populate this.</p>
</div><!— .widget-container —>
</div><!— .third .widget-area —>
<div class=»fourth quarter right widget-area»>
<div class=»widget-container»>
<h3 class=»widget-title»>Fourth footer widget area</h3>
<p>A widget area in the footer — use plugins and widgets to populate this.</p>
</div><!— .widget-container —>
</div><!— .fourth .widget-area —>
</aside><!— #fatfooter —>
</footer>
|
Скопируйте его и вставьте в файл footer.php .
Сохраните файл нижнего колонтитула.
.main div закрывается в файле .main колонтитула, а не на боковой панели. Это так, что если вы позже настроите файл шаблона для страниц, которые не имеют боковой панели, вы пропустите включение боковой панели в этот шаблон и .main нижний колонтитул .main , а div .main будет закрыт правильно. Заполнение индексного файла
Последний шаг — настроить файл index.php . Это немного сложнее, вам придется добавить некоторые функции PHP, которые WordPress использует для включения заголовка, боковой панели и нижнего колонтитула.
Откройте пустой файл index.php и добавьте код, показанный ниже:
|
1
2
3
4
|
<?php get_header();
<?php get_sidebar();
<?php get_footer();
|
Обязательно оставьте пробел между открывающим заголовком include и боковой панелью include, именно здесь вы добавите содержимое индексного файла, которого нет в заголовке, боковой панели или нижнем колонтитуле.
Теперь откройте файл index.html еще раз и выберите весь код между открывающим элементом div class="main" и боковой панелью:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<div class=»two-thirds» id=»content»>
<article class=»post» id=»01″>
<h2 class=»entry-title»>This is the title of a post or page</h2>
<img class=»size-large» alt=»» src=»images/featured-image.jpg» />
<section class=»entry-meta»>
<p>Posted on 5 November by Rachel McCollin</p>
</section><!— .entry-meta —>
<section class=»entry-content»>
<p>This is the content of the post.
<h3>Images in WordPress</h3>
<img class=»alignright» alt=»» src=»images/another-image.jpg» />
<p>This post has some images included — once you’ve converted this html to a WordPress theme you’ll be able to get WordPress to handle images for you and life will be so much easier!</p>
<p>It also has a featured image — again, WordPress will handle these for you and you’ll never go back to static html again.
</section><!— .entry-content —>
<section class=»entry-meta»>
<h3>Post Categories and Tags</h3>
<p>In this section you can display information about the categories and tags associated with your post, you’ll learn how to do this using WordPress template tags in Part 4 of this series.</p>
</section><!— .entry-meta —>
</article><!— #01—>
</div><!— #content—>
|
Скопируйте его и вставьте в файл index.php под get_header() .
Сохраните ваш файл index.php .
Резюме
Теперь у вас есть начало темы WordPress. Вы преобразовали свой HTML-файл в набор PHP-файлов и настроили их для совместной работы.
В следующей части этой серии я покажу вам, как отредактировать таблицу стилей, чтобы ваша тема работала, и загрузить ее в WordPress.
Ресурсы
- Иерархия шаблонов WordPress (страница Кодекса)
- Вступление в шаблоны (страница Кодекса)
- Анатомия WordPress Theme (сообщение в блоге Yoast)
- Руководство для начинающих по разработке темы WordPress от Тессы Блейкли Силвер и Рэйчел Макколлин (да, я!)