У цьому керівництві ми сконцентруємося на конвертації нашої WordPress теми з XHTML в HTML5. Ми будемо просуватися крок за кроком, вивчаючи зміни в перерахованих нижче файлах (ці файли знаходяться в папці вашої теми, тобто wp-content / themes / ваша-тема /)
Базова розмітка HTML5
Давайте розглянемо базову розмітку HTML5, яку ми збираємося зробити. HTML5 - це набагато більше, ніж значення "doctype" на самому початку вашого коду. Кілька нових елементів допоможуть нам програмувати і описувати стиль набагато більш ефективним способом і з меншою кількістю розмітки (це одна з причин, по якій HTML5 краще).
Тепер нам просто потрібно дізнатися, куди вставити нові теги HTML5 header. footer. nav. section і article. Назви нових тегів говорять самі за себе про функції, на відміну від XHTML. структурування за допомогою div.
Крок 1. Конвертація header.php в HTML5
header.php на XHTML
Тепер я покажу вам код, який зазвичай використовується в header.php в темах WordPress на XHTML.
Хтось запитає: навіщо ми все це робимо? Відповідь проста: для семантичної розмітки HTML5. Це зменшує кількість розмітки, роблячи розуміння і управління набагато простішим.
header.php на HTML5 (перетворений)
Як ви бачите, перетворений код дуже схожий на код XHTML. Давайте обговоримо зміни.
- - у HTML5 дійсно простий doctype, але він включає багато нових семантичних тегів.
- семантичний тег для блоку шапки.
Зверніть увагу. деякі включають тег section в шапку. З приводу цього ведеться багато суперечок. Особисто я проти включення тега section в шапку, оскільки він знищить красу HTML5. Звичайно, ви можете використовувати старий div тут.
Що зі скриптами і таблицями стилів?
Враховуємо старі браузери
Підказка. помістіть теги, які з'являються послідовно, всередину
Зверніть увагу. цей скрипт потрібно розміщувати в самому верху всередині тега