HTML5 надає відмінний набір нових можливостей та простих рішень. Незабаром він повністю підтримуватиметься більшістю браузерів, які сьогодні використовуються. Зрештою всім доведеться конвертувати теми WordPress з XHTML в HTML5. Після оновлення Google PandaДля кращого ранжування в Google вашим сайтам потрібен більш читальний код. Я навчу вас конвертувати вашу тему з XHTML в HTML5. Ми також подбаємо про 2% інтернет-користувачів з вимкненим JavaScript (Для зворотної сумісності).
Наші цілі
У цьому посібнику ми сконцентруємося на конвертуванні нашої WordPress теми з XHTML в HTML5. Ми будемо просуватися крок за кроком, вивчаючи зміни в наведених нижче файлах (ці файли знаходяться в папці вашої теми, тобто wp-content/themes/ваша-тема/ )
- header.php
- index.php
- sidebar.php
- footer.php
- single.php (не обов'язково)
Базова розмітка HTML5
Розгляньмо базову розмітку HTML5, яку ми збираємося зробити. HTML5 - це набагато більше, ніж значення "тип доктНа самому початку вашого коду. Кілька нових елементів допоможуть нам програмувати і описувати стиль набагато більш ефективним способом і з меншою кількістю розмітки (це одна з причин, з якої HTML5 краще).
<!DOCTYPE html> <html lang="en"> <head> <title>TITLE | Slogan!</title> </head> <body> <nav role="navigation"></nav> <!--Ending header.php--> <!--Begin index.php--> <section id="content"> <article role="main"> <h1>Title of the Article</h1> <time datetime="YYYY-MM-DD"></time> <p>Some lorem ispum text of your post goes here.</p> <p>The article's text ends.</p> </article> <aside role="sidebar"> <h2>Some Widget in The Sidebar</h2> </aside> </section> <!--Ending index.php--> <!--begin footer.php--> <footer role="foottext"> <small>Some Copyright info</small> </footer> </body> </html>
Тепер нам потрібно дізнатися, куди вставити нові теги HTML5 заголовок, нижній колонтитул, nav, розділ и стаття. Назви нових тегів говорять самі за себе про функції, на відміну від XHTMLструктурованого за допомогою DIV.
Крок 1. Конвертування header.php в HTML5
header.php на XHTML
Тепер я покажу вам код, який зазвичай використовується в header.php у темах WordPress на XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<div class="header">
<div class="container">
<h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
</div><!-- End Container -->
</div><!-- End Header -->
<!-- Navigation Bar Starts -->
<div class="navbar">
<div class="container">
<ul class="grid nav_bar">
<?php wp_list_categories('navs_li='); ?>
</ul>
</div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">
Хтось спитає: навіщо ми все це робимо? Відповідь проста: для семантичної розмітки HTML5. Це зменшує кількість розмітки, роблячи розуміння та керування набагато простішим.
header.php на HTML5 (перетворений)
Перегляньте код і потім дотримуйтесь наведених нижче інструкцій, щоб конвертувати header.php вашої теми в HTML5.
<!doctype html>
<html>
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
</div>
</header>
<!-- End Header -->
<!-- Navigation Bar Starts-->
<nav>
<div class="navbar">
<ul class="grid nav_bar">
<?php wp_list_categories('title_li='); ?>
</ul>
</div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">
Як ви бачите, перетворений код дуже схожий на код XHTML. Давайте обговоримо зміни.
<!doctype html>- HTML5 дійсно простий doctype, але він включає багато нових семантичних тегів.<header>- Семантичний тег для блоку шапки.<nav>– Ми замінили DIV блок навігації новим семантичним тегом HTML5 для керування блоками навігації.
Зверніть увагу: деякі включають тег розділ у шапку. З цього приводу ведеться багато суперечок. Особисто я проти включення тега розділ у шапку, оскільки він знищить красу HTML5. Звичайно, ви можете використовувати старий DIV тут.
Що зі скриптами та таблицями стилів?
Увімкнення скриптів і таблиць стилів у заголовку при конвертуванні WordPress теми в HTML5 дійсно дуже просте. У HTML5 ми просто використовуємо теги <script> и <link>. Так що видаліть type="text/javascript" – усі браузери розпізнають тег <script> як JavaScriptякщо ви не напишете явно його тип. Також видаліть type="text/css" з вашого <link> тег для таблиць стилів.
Враховуємо старі браузери
HTML shiv вмикається для підтримки старими браузерами. Це простий JavaScript файл. Деякі приклади такого shiv - HTML5 скрипт Ремі Шарпа або скрипт Modernizr. Давайте використовуємо Modernizr. Нам потрібно викликати скприт із нашого файлу functions.php, ось так:
function html5_scripts()
{
// Register the Modernizr script
wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' );
// Enqueue Modernizr
wp_enqueue_script( 'modernizr' );
}
add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );
Підказка: помістіть теги, які з'являються послідовно, всередину
Зверніть увагу: цей скрипт потрібно розміщувати в самому верху всередині тега тому ми привласнили add_action пріоритет рівний 1.
Крок 2. Конвертування index.php в HTML5
Стандартний index.php на XHTML складається з наступних тегів. Я конвертую кожен із них, пояснюючи весь процес після перетворення.
Зверніть увагу: я не пишу тут весь код, оскільки він зробить піст довшим без вагомої на те причини
index.php на XHTML
<div id="container"> <div id="content"> <div id="entries"> <div id="post">...</div> </div><!--Ending Entries--> <?php get_sidebar(); ?> </div><!--Ending content--> </div><!--Ending container--> <?php get_footer(); ?>
index.php на HTML5 (перетворений)
<div id="container"> <div id="content"> <section id="entries"> <article id="post">...</article> </section><!--end entries--> <?php get_sidebar(); ?> </div><!--end content--> </div><!--end wrap--> <?php get_footer(); ?>
Перед тим, як розглянути зроблені нами зміни, ми повинні знати, що HTML5 надає нам 3 основні теги розмітки: розділ, стаття и aside. розділ замінить DIV публікацій, стаття замінить DIV посту, а aside буде використовуватися для нашого сайдбару трохи згодом.
<section>— HTML5 має тег розмітки, який відокремлює блок для коду, який знаходиться всередині нього.<article>- Семантичний тег для частини посту, за типом розділ.<aside>- Семантичний тег для розміщення зображень посту збоку та для сайдбарів.
Хлібні крихти і навігація по сторінках — якщо наша тема має хлібні крихти, то вони будуть використовуватися в шарі типу <div>...</div>, а для навігації ми будемо використовувати <nav id="pgnav">...</nav>
Повний index.php в HTML5
<section class="entries">
<?php if (have_posts()) : while (have_posts()) : the_post();
<article class="post" id="post-<?php the_ID(); ?>">
<aside class="post_image">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
<?php }?>
</aside>
<section class="post_content">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p><?php echo get_the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Read More</a>
</section>
<section class="meta">
<p> <?php the_category(',') ?></p>
<p><?php the_tags(""); ?></p>
</section>
</article>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>
<?php posts_nav_link(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>
Крок 3. Працюємо з sidebar.php
Ми будемо використовувати у нашому сайдбарі <aside> замість div, Наприклад:
sidebar.php на XHTML
<div id="sidebar">...</div>
- після використання <aside> виглядатиме саме так.
sidebar.php на HTML5
<aside id="sidebar">...</aside>
Це було просто!
Крок 4. Зміни footer.php
Ми будемо використовувати семантичний тег <footer> замість звичайного div в нашому footer.php, Наприклад:
footer.php на XHTML
<div id="footer"> <div id="foot_widgets">...</div> <div id="copyright">...</div> </div> <?php wp_footer(); ?> </body> </html>
footer.php на HTML5
<footer id="footer"> <section id="foot_widgets">...</section> <section id="foot_widgets">...</section> <section id="foot_widgets">...</section> <div id="copyright">...</div> </footer> <?php wp_footer(); ?> </body> </html>
Крок 5. Працюємо з single.php
В single.php немає ніяких особливих змін, тому я просто вставлю сюди змінений код, він може допомогти новачками. Я використав тут теги section и article. Ви також можете використовувати тег <time>, якщо хочете.
single.php на XHTML
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
<div class="content">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<div id="entry-content-single">
<?php the_content('<p >Read More</p>'); ?>
</div>
<div class="meta"> Posted by:
<?php the_author() ?>
<?php edit_post_link(__('Edit This')); ?>
<p><?php the_tags(""); ?></p>
</div>
<div class="clearfix"></div>
</div>
<!-- End of post -->
</div></div>
<?php get_footer(); ?>
single.php на HTML5
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
<article class="box">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<section id="entry-content-single">
<?php the_content('<p>Read More</p>'); ?>
</section>
<section class="meta"> Posted by:
<?php the_author() ?>
<?php edit_post_link(__('Edit This')); ?>
<p><?php the_tags(""); ?></p>
</section>
<div class="clearfix"></div>
</article>
<!-- end post -->
</section></div>
<?php get_footer(); ?>
Зверніть увагу: з огляду на SEOдеякі використовують <header> перед заголовками постів, що теж є добрим підходом.
Крок 6. Нарешті, style.css
Все, що нас цікавить наприкінці – питання зворотної сумісності. Перестрахування для старих браузерів, елементи HTML потрібно показувати як блоки, використовуючи стиль дисплей: блок. Просто вставте наведений нижче код на початок вашого style.css:
header, nav, section, article, aside, figure, footer { display: block; }
Примітка
Якщо ви використовуєте аудіо або відео, вбудоване у файл шаблону, вам потрібно використовувати аудіо и відео елементи HTML5. Ви можете переглянути деякі теги в пам'ятці нижче. Коли ви додасте новий функціонал, пошукайте, як додати його на HTML5, використовуючи його семантичні теги.
HTML5 ресурси
- HTML5 пам'ятка
Безкоштовні шаблони на HTML5
- Двадцять одинадцять
- Yoko
- 15 тем та фреймворків
Ви збираєтеся використовувати HTML5? Ви вже перейшли на HTML5 та зміни вплинули на ваші SEO показники? Розкажіть про це у коментарях!
Джерело: WP.tutsplus.com
Коментарі до запису: 3
Є питання: у наведеному single.php section містить у собі article. Чи не коректніший варіант виду:
(Заголовок посту)
(сам піст)
(теги, дата і т.д.)
Хто порадить?
Блок section призначений для загального вмісту.
Article сприймається пошуковими системами, як пост сайту, тобто основний, головний контент.
Header, якщо розташований одному рівні з іншими семантичними блоками, сприймається, як шапка сайту. Якщо цей блок вкладено в article, footer або інший семантичний блок, не обов'язково виконує роль заголовка, а може містити допоміжну інформацію. Те саме і footer.
Правильніше було б написати так:
Заголовок
Дата, автор та ін.
Власне пост
Теги, рубрики та ін.
В даному випадку блок section може містити декілька блоків article.
Пише помилка syntax error, unexpected '<' у рядку