Остаточний результат: Що ми створюємо.
Завантажити ВИХІДНИЙ ФАЙЛ
Дана стаття є 1 з 3 частин циклу «Створюємо тему WordPress на базі статичного HTML»:
Торік я провела невелике (і на загальну думку дуже ненауковий) опитування серед розробників WordPress.
Головні питання, які я задавала їм: Коли вони створювали свою першу тему WordPress, як же вони це робили? Переробляли існуючу тему або ж починали з власного статичного HTML-коду і перетворювали його в тему?
Більшість респондентів, з якими я поспілкувалася, говорили, що використовують другий підхід — всі вони були досвідченими розробниками зовнішніх інтерфейсів, які використовують у роботі HTML і CSS.
І всі вони відповідали, що найпростіше взяти власні HTML файли і конвертувати їх в тему.
Двоє з людей, яких я опитала, були викладачами, і вони сказали мені, що такий підхід вони використовуються при навчанні студентів.
Таким чином, у цьому циклі статей я збираюся розповісти вам, як зробити саме це.
Ви почнете з одного HTML-файла (з окремою таблицею стилів) і перетворіть його в тему WordPress з декількома файлами шаблонів і з різними взаємозв’язками, функціями і тегами шаблонів, що дозволяють створювати цикли, меню, віджети і багато іншого.
У цій першій статті я покажу вам, як підготувати HTML-файл до перетворення в PHP для створення теми. Про перетворенні я розповім в наступних частинах серії.
Що вам потрібно
Для виконання цього уроку вам будуть потрібні основні інструменти для редагування HTML-коду:
Редактор за вашим вибором;
Браузер, щоб перевіряти результати роботи.
1. Навіщо готувати HTML?
В теорії, ви могли б взяти будь-який дійсний HTML-код, додати коректні теги шаблонів і цикли і перетворити його в тему. Але я рекомендувала б підійти до цього питання ретельніше.
Причина полягає в тому, що, коли ви починаєте додавати нові функції, такі як меню і віджети, WordPress додасть ще й елементи HTML і класи.
Так що має сенс попрацювати в першу чергу з цими елементами і класами. Я описала класи і ідентифікатори, які генерує WordPress в попередній статті, так що, перш ніж продовжити, ви можете ознайомитися з нею.
Ще одна причина це те, що нам потрібно забезпечити відповідність розмітки стандартам і синтаксису HTML5. Якщо ви конвертуєте старий статичний сайт на WordPress, ви можете працювати і зі старим кодом більш ранньої версії HTML, який, відверто кажучи, потребує серйозної чистки.
Я не можу сказати точно, як вам привести в порядок конкретну розмітку, але я можу дати вам кілька порад з використання HTML5 з WordPress і структурування документа.
2. HTML5 і WordPress — структурування розмітки
Є ряд елементів HTML5, таких як і які повинні використовуватися в темі WordPress.
Розуміння того, як кожен з них слід застосовувати, постійно розвивається, так що тут вам слід керуватися і власними міркуваннями.
HTML-файл, який я збираюся використовувати для цього уроку, має наступну структуру:
Як бачите, в ньому використовується ряд елементів HTML5, а також декілька з попередніх версій. У наступній частині цього уроку, я покажу вам, як рознести цю структуру файлів шаблонів, але зараз просто зведіть все це в одному файлі index.html.
Якщо ваша розмітка ще не структурована таким чином і не відформатована відповідно до стандартів HTML5, потрібен деякий час, щоб провести всі необхідні зміни.
Важливо, щоб у вашій сторінці були чітко визначені наступні розділи:
- заголовок – в ;
- контент – для нього я використовую
. Я навмисно використовую тут ідентифікатор замість класу, щоб мати можливість задіяти його, як анкор для екранних дикторів, пропускаючи меню; - бічна панель (якщо такі у вас є) – для неї я використовую . Я також додала додаткові класи стилів — всі вони об’єктно-орієнтовані, тому можуть використовуватися в рамках однієї теми для всіх інших сторінок, які я додам у WordPress пізніше;
- підвал – в . Як правило, я вставляю в футер ще один елемент, який містить поле віджетів — я називаю його
. Це означає, що я можу застосувати до елементів footer повну гаму кольорів фону, не змінюючи при цьому елемент .fatfooter, розташований по центру сторінки.
3. Додавання класів та ідентифікаторів, що генеруються WordPress
Наступним кроком є робота над розміткою і додавання деякі класів та ідентифікаторів, які будуть виводитися завершеною темою.
Фактично цей етап не впливає на кінцеву тему, так як ці класи і ідентифікатори все одно будуть автоматично додані через функції PHP, які ви додасте пізніше.
Тим не менше, якщо ви правильно додасте класи і ідентифікатори зараз, ви зможете використовувати їх у таблиці стилів, і ваші стилі активуються, як тільки ви конвертуєте ваш HTML-файл в тему WordPress.
Тепер нам слід обробити кожен з елементів структури.
Заголовок
WordPress автоматично не додає класи і ідентифікатори з назвою і описом сайту, однак зараз мало б сенс створити деякі з них, ті, що узгоджуються з термінологією WordPress.
З лівого боку шапки виводиться елемент з назвою і опис сайту:
WordPress Theme Building
Creating a WordPress theme from static html
Справа в моєму макеті виводиться поле, де відображається адресу або номер телефону, або ж можна вставити форму пошуку. Ви можете надати користувачам вашої теми повну свободу дій щодо того, що розмістити в цьому полі.
Для цього його можна задати за допомогою віджета. Я розповім вам, як створити поле віджета в наступних статтях серії, а зараз просто додамо відповідні класи:
Тут буде поле віджета в шапці сайту
Тут будуть виводити контактні дані, адресу (або що завгодно на ваш розсуд)
Зображення
Найголовніше — це додати в розділ контенту класи зображень. WordPress генерує класи для зображень, коли вони додаються через менеджер медіа-файлів, і ви повинні включити в вашу тему всі необхідні класи.
У коді моєї умовної сторінки є два зображення — одне велике, друге середня, з вирівнюванням по правому краю.
Для першого я додаю наступний код:
Для другого:
Зверніть увагу, що в остаточному варіанті теми, ви видалите коди для цих зображень, так як вони будуть автоматично додаватися WordPress, але це допоможе вам правильно налаштувати стилі.
Додавши класи для розмітки, ви повинні переконатися, що у вашої таблиці стилів створені класи для зображень.
Для цього додамо такий код:
/* Зображення */
img {
max-width: 100%;
}
#content img {
margin: 0;
height: auto;
width: auto;
}
#content .alignleft,
#content img.alignleft {
float: left;
margin: 4px 4% 4px 0;
}
#content .alignright,
#content img.alignright {
float: right;
margin: 4px 0 4px 4%;
}
#content .aligncenter,
#content img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
margin-bottom: 12px;
}
Якщо ви подивіться на мій приклад сторінки, то побачите, що перше зображення розтягнуто на 100% ширини області контенту, а друге зміщене вправо і має по краях поля відступу:
Сайдбар і підвал
Бічна панель і підвал будуть містити області віджетів, так що вам потрібно додати відповідні класи в розмітку і використовувати стилі, прописані в таблиці стилів.
Розмітка сайдбара буде виглядати наступним чином:
A sidebar widget
This is a sidebar widget — in your WordPress theme you can set up to these display across your site.
Another sidebar widget
A second sidebar widget — maybe you could use a plugin to display a social media feed, or simply list your most recent posts.
Розмітка підвалу містить чотири області віджетів, в кожній з яких може міститися більше одного віджета. Як ви можете бачити, я додала в кожну область клас, який повідомляє браузеру, якого плану елемент тут буде розміщено.
Пізніше я поставлю конкретні стилі для кожної з цих областей:
First footer widget area
A widget area in the footer — use plugins and widgets to populate this.
Second footer widget area
A widget area in the footer — use plugins and widgets to populate this.
Third footer widget area
A widget area in the footer — use plugins and widgets to populate this.
Fourth footer widget area
A widget area in the footer — use plugins and widgets to populate this.
Висновок
Підготовка нашого HTML-файлу завершена, тепер він готовий до конвертації в набір файлів теми. У наступній статті я покажу вам, як розділити його і додати деякі базові функції PHP.
Переклад статті «Creating a WordPress Theme From Static HTML: Preparing the Markup» був підготовлений дружною командою проекту Сайтостроение від А до Я.
