Использование HTML5 для преобразования WordPress' TwentyTen Тема

Теперь, HTML5 делает много вещей, но вы не можете просто <!doctype html> добавить в верхней части документа и получить рады, что вы так 2011. Наметить, как говорится, смысл, и HTML5 приносит целый букет смысла в наших документах.

Дальнейшее чтение на SmashingMag:

В ходе опроса, проведенного журналом Smashing Magazine, только 37% избирателей заявили, что они используют HTML5. Это удручающее чтение. Возможно, разработчики и дизайнеры отпугивают несовместимость кросс-браузера и рутинную работу по изучению новой разметки. Истина заключается в том, что с щепоткой JavaScript, HTML5 может быть безопасно использоваться сегодня во всех браузерах, обратно в IE6.

TwentyTen является прекрасной темой, которая уже проверяется как HTML5; но для того, чтобы удовлетворить пользователей без JavaScript, он должен отбыть большой кусок HTML5 элементов. Причина? Наш старый друг Internet Explorer не поддерживает большинство из них до версии 9.

По умолчанию TwentyTen WordPress Тема.

Например, вы, вероятно, уже слышали <section> о и <article> теги, оба из которых champing на бит, чтобы быть встроены в шаблон WordPress. Но для использования этих элементов HTML5 в IE8 (и его предшественников), вам нужно JavaScript для того, чтобы создать их в DOM. Если у вас нет JavaScript, то элементы не могут быть стилизованы под CSS. Выключите JavaScript и выключите укладку для этих элементов; это неизбежно нарушит форматирование вашей страницы.

Я предполагаю, что WordPress решил исключить эти проблемные теги, так что его тема по умолчанию будет поддерживаться всеми браузерами — не только те, с JavaScript включен.

Хотя я понимаю это решение, я также думаю, что это ошибка. Три основные технологии заставляют Веб работать: HTML, CSS и JavaScript. Все настольные браузеры поддерживают их (в некоторой степени), так что если какой-либо из них отключен, пользователю придется ожидать деградированных опыт. JavaScript в настоящее время имеет основополагающее значение для пользовательского опыта и, хотя мы должны поддерживать пользователей, которые выключают JavaScript, или он выключен для них и не имеют возможности включить его снова, поскольку они не имеют права делать это, я вопрос, насколько далеко мы должны поддерживать М.

Почему использование JavaScript имеет смысл

Yahoo дает убедительные доказательства того, что менее 1,5% своих пользователей выключить JavaScript. Мое собственное исследование в этом, умело помогает Грейг Дайнс на eConversions, ставит цифру ниже 0,5% (на основе миллионов посетителей в Великобритании розничной сайте).

Хотя это правда, что JavaScript должны быть отделены от содержания сайта, дизайн и структура реальность больше не черно-белый. Я твердо верю, что преимущества и возможности HTML5 приносит, вместе с соответствующими технологиями, такими как CSS3 и медиа-запросов (оба из которых иногда полагаются на JavaScript для кросс-браузерсовместимной совместимости), более чем достаточно оснований для использования JavaScript ‘ силу новых элементов для работы в Internet Explorer. Я страстный сторонник стандартного дизайна, который не полагается на JavaScript; HTML5 является единственным структурным исключением.

Да, мы должны уважать решение пользователя отключить JavaScript в своем браузере. Тем не менее, я не считаю, что это достаточно веская причина для не использования современных технологий, которые обеспечат подавляющее большинство пользователей с более богатым пользовательским опытом. В конце концов, в примере TwentyTen, если тема была HTML5 теги в нем, все будет выглядеть хорошо в современных браузерах (последние версии Safari, Firefox, Opera, Chrome и IE9), с или без JavaScript.

Если браузер IE6 — IE8, и JavaScript выключен, то пользователи будут видеть содержимое, но он не будет стиль правильно. Если бы содержимое не отображались вообще, у нас было бы совершенно другое обсуждение. Если вы все еще не уверены, я кратко обсудим другой вариант для тех, кто абсолютно должен поддерживать пользователей с JavaScript выключен.

Чтобы сделать TwentyTen играть честно с IE, я предлагаю РЕМи Шарп в HTML5 оборк или, если вы хотите, чтобы потопить зубы в CSS3, Modernizr. Modernizr не только добавляет поддержку элементов HTML5 в IE, но и сообщает вам, какие свойства CSS3 поддерживаются браузером пользователя, добавляя специальные классы к <html> элементу.

Mordernizr.js

Итак, предположим, что вы справедливо изгнали пользователей, не являющихся JavaScript, с вежливым сообщением в <noscript> теге. Теперь мы можем начать мастерить под капотом TwentyTen, чтобы принести еще несколько HTML5 wordPress.

Обновление до HTML5

TwentyTen получает ряд вещей на месте. Прежде всего, он декларирует правильный документ и включает в себя сокращенный charset мета-тег. Он также использует другие семантические добра, как микроформаты и большие функции доступности, как WAI-ARIA. Но мы можем пойти дальше.

Важные заметки:

Я ссылаясь на HTML порожденных в http://wp-themes.com/twentyten/, а не простой «Hello World» чистая установка WordPress 3.
Для этой статьи я буду редактировать файлы непосредственно в /wp-content/themes/twentyten/ каталоге. Я предоставил все обновленные HTML5 тема исходных файлов для вас скачать из TwentyTen пять.
Номера строк могут меняться с течением времени, поэтому, когда я ссылаюсь на один, я обычно говорю «на или вокруг линии …» Версия WordPress на момент написания составляет 3.0.4.

Статьи

Одна из наиболее запутанных частей спецификации HTML5 является <section> и <article> теги. Что было первым, курица или яйцо? Самый простой способ запомнить это обратиться к спецификации. Спецификация HTML5 может быть сухой в лучшие времена, но его объяснение статей всегда будет указывать вам в правильном направлении:

articleЭлемент представляет собой автономную композицию в документе, странице, приложении или сайте, и это, в принципе, независимо еле-разнолое или многоразовое, например, в синдикации.

Если часть содержания в вопросе может быть, и, скорее всего, будет, синдицированный RSS, то есть хороший шанс, что это <article> . Блог в WordPress подходит законопроект прекрасно.

На главной странице TwentyTen мы получаем следующие HTML:

<div id="post-19">
…
</div>

Семантически это очень мало. Но с помощью простого добавления article тега, мы можем превратить его в наценку со смыслом.

<article id="post-19">
…
</article>

Обратите внимание, что мы id сохраняем, чтобы гарантировать, что это <article> остается уникальным.

Чтобы сделать это изменение в теме TwentyTen, откройте loop.php, который находится в /wp-content/themes/twentyten/ . На строке 61 или вокруг нее следует найти следующий код:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Мы должны изменить это <div> на , так что он <article> читает:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

А потом мы закрываем его снова на или вокруг линии 97, так что …

</div><!-- #post-## -->

… Становится:

</article><!-- #post-## -->

Есть также экземпляры на линиях 32, 101 и 124. Открытие некоторых других страниц в теме, например single.php, и сделать то же самое изменение стоит. Таким образом, линия 22 в single.php будет меняться от …

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

… Кому:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

И линия 55 будет меняться от …

</div><!-- #post-## -->

… Кому:

</article><!-- #post-## -->

Пока все в порядке. Это простые изменения, но они уже служат для капитального ремонта семантики веб-сайта.

Время и дата

Согласно спецификации HTML5:

<time>Элемент либо представляет собой время на 24-часовые часы, или точную дату по пролептический григорианский календарь, по желанию со временем и часовым поясом смещения.

Это означает, что мы можем дать дату и время публикации статьи больше контекста с <time> тегом HTML5. Посмотрите на код, который генерирует WordPress:

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><span>October 17, 2008</span></a>

Мы можем добавить смысл нашей наценки, перестав, передавая это на:

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><time datetime="2008-10-17T04:33Z"
pubdate>October 17, 2008</time></a>

Это время теперь машиночитаемо, и браузер может теперь взаимодействовать с датой в много путей должны мы так пожелать. Я также добавил boolean атрибут pubdate , который обозначает это как дата, на которой статья или содержание было опубликовано.

Время в datetime атрибут неявляется, а потому, что WordPress включает в себя его, когда вы публикуете статью, мы можем тоже. Реализация этого в TwentyTen требует от нас копать немного глубже. В loop.php, следующая функция на или вокруг строки 65 призывает к дате, которая будет включена:

<?php twentyten_posted_on(); ?>

Чтобы внести изменения в HTML5, давайте переедем на /wp-content/themes/twentyten/ и откроем functions.php. На или вокруг строки 441, вы увидите это:

function twentyten_posted_on() {
printf( __( '<span>Posted on</span> %2$s <span>by</span> %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span>%3$s</span></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),

Если вы не знаете, что это значит, не волнуйтесь. Мы фокусируемся на функции sprintf, которая в основном занимает строку и вставляет переменные, которые возвращаются тремя перечисленными функциями: то get_permanlink() есть, get_the_time() и get_the_date() вставляются %1$s в, %2$s %3$s и, соответственно.

Нам нужно изменить способ форматировать дату, поэтому нам придется добавить четвертую функцию: get_the_date(‘c’) . WordPress затем вернуть дату в скоординированном универсальном времени (UTC) формате, который является именно то, что <time> элемент требует. Наш готовый код выглядит следующим образом:

printf( __( 'Posted on %2$s by %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" rel="bookmark"><time datetime="%2$s"
pubdate>%3$s</time></a>',
get_permalink(),
get_the_date('c'),
get_the_date()
),

Я включил get_the_date() дважды, потому что нам нужны два разных формата: один для <time> элемента и тот, который отображается для пользователя. Я также title=”[time published]” удалил, потому что эта информация уже включена в <time> элемент.

Для получения более подробной информации о дате и времени WordPress, проверить:

Цифры

Цифра, по крайней мере, для наших целей – это часть средств массовой информации, которые вы загружаете в WordPress для встраиваемого в публикацию. Наиболее очевидным примером может быть изображение, но это может быть видео, тоже, конечно. WordPress 3 достаточно полезен, чтобы добавить подписи к изображениям при первом импорте изображений, но он не отображает эти подписи с помощью нового HTML5 <figure> и <figcaption> теги.

Спецификация определяет следующее: <figure>

figureЭлемент представляет собой единицу содержимого, по желанию с подписью, которая является автономной, которая обычно упоминается как единая единица из основного потока документа, и которая может быть отодвинута от основного потока документа, не затрагивая значение документа.

И он определяет <figcaption> так:

figcaptionЭлемент представляет заголовок или легенду для остальной части содержимого figcaption родительского figure элемента элемента, если таковые имеется.

В настоящее время изображение с подписью отображается следующим образом:

<div class="wp-caption" style="width: 445px;"><img alt="Boat"
src="http://wpdotorg.files.wordpress.com/2008/11/boat.jpg"
title="Boat" width="435" height="288" />
<p class="wp-caption-text">Boat</p>
</div>

Изображение WordPress с подписью.

Изменение этого HTML для включения элементов HTML5 требует от нас сначала взглянуть на media.php в /wp-includes/ каталоге, где этот код генерируется. На или вокруг строки 739, вы найдете:

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p>' . $caption . '</p></div>';

Чтобы обновить его до HTML5, нам нужно определить новую функцию, которая выводит наш <figure> HTML на основе и назначить эту функцию тому же короткому коду, который img_caption_shortcode() вызывает. Я сделал это, /wp-content/themes/twentyten/functions.php добавив следующее в нижней части файла:

add_shortcode('wp_caption', 'twentyten_img_caption_shortcode');
add_shortcode('caption', 'twentyten_img_caption_shortcode');

function twentyten_img_caption_shortcode($attr, $content = null) {

extract(shortcode_atts(array(
'id'    => ’,
'align'    => 'alignnone',
'width'    => ’,
'caption' => ’
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $idtag = 'id="' . esc_attr($id) . '" ';

  return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px">'
  . do_shortcode( $content ) . '<figcaption id="figcaption_' . $id . '">' . $caption . '</figcaption></figure>';
}

Во-первых, мы указываем короткие коды для wp-caption и к нашей новой caption twentyten_img_caption_shortcode() функции. Затем мы просто скопируем исходную функцию от media.phpи изменим последние несколько строк, чтобы включить наш <figure> элемент. Это теперь делает нашу boat.jpg пример сверху, как так:

<figure id="attachment_64" style="width: 445px;">
<a href="http://localhost/wp-content/uploads/2010/07/boat.jpg">
<img title="boat" src="http://localhost/wp-content/uploads/2010/07/boat.jpg"
alt="Screenshot" width="435" height="288" aria-describedby="figcaption_attachment_64"></a>
<figcaption id="figcaption_attachment_64">Boat</figcaption>
</figure>

Форма комментариев

Одним из самых больших улучшений, внесенных в HTML5, является то, как формируются поля и реагируют на пользовательские вводимые данные. Мы можем воспользоваться этими изменениями, используя элементы формы HTML5 в форме WordPress формы в трех направлениях:

Мы можем установить тип ввода текста email в соответствующие поля и url для нее. Это не только более точно описывает поле ввода, но и добавляет лучшую функциональность клавиатуры для iPhone, например.
Мы можем добавить атрибут boolean required к нашим требуемым полям формы. Это выходит за рамки WAI-ARIA, aria-required='true' поскольку он вызывает собственное поведение браузера. required
Мы можем добавить текст заполнителя в наши поля формы, популярный метод JavaScript, который теперь обрабатывается в браузере. Текст заполнителя позволяет вам вникать более подробно о том, какая информация требуется, чем форма этикетки обычно позволяет.

Перед добавлением HTML типичное поле ввода комментариев может выглядеть следующим образом:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="text" value=""
size="30" aria-required='true' />

После наших изменений HTML5, это будет выглядеть следующим образом:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="email" value=""
size="30" aria-required='true'
placeholder="How can we reach you?" required />

Чтобы внести эти улучшения в код, нам нужно сделать две вещи. Во-первых, нам нужно изменить HTML для полей по умолчанию (имя, адрес электронной почты и URL-адрес веб-сайта), а затем мы должны изменить его для комментария <textarea> . Мы можем достичь обоих этих изменений с помощью дополнительных фильтров и пользовательских функций.

Чтобы изменить HTML для полей формы по умолчанию, нам нужно добавить следующий фильтр в нижней части functions.php:

add_filter('comment_form_default_fields', 'twentytenfive_comments');

И тогда мы должны создать нашу пользовательскую twentytenfive_comments() функцию, чтобы изменить способ отображения этих полей. Мы можем сделать это, создав массив, содержащий наши новые поля формы, а затем вернув его в этот фильтр. Вот функция:

function twentytenfive_comments() {

$req = get_option('require_name_email');

$fields =  array(
'author' => '<p>' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : ’ ) .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder = "What should we call you?"' . ( $req ? ' required' : ’ ) . '/></p>',

'email'  => '<p><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : ’ ) .
'<input id="email" name="email" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' placeholder="How can we reach you?"' . ( $req ? ' required' : ’ ) . ' /></p>',

'url'    => '<p><label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="url" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" placeholder="Have you got a website?" /></p>'

);
return $fields;
}

Вы можете видеть здесь, что каждый элемент в форме имеет имя в array() : автор, электронная почта и URL. Затем мы введем в наш пользовательский код, который содержит новые атрибуты формы HTML5. Мы добавили текст заполнителя к каждому из элементов и, где это необходимо, добавили атрибут boolean required (и мы должны проверить, сделал ли админ эти поля необходимыми, используя get_option() функцию). Мы также добавили правильный тип ввода в входные данные для автора, адреса электронной почты и URL-адреса веб-сайта.

Наконец, мы должны добавить некоторые <textarea> HTML5, который является домом для комментариев пользователя. Мы должны использовать другой фильтр здесь, также в functions.php:

add_filter('comment_form_field_comment', 'twentytenfive_commentfield');

Мы следуем этому с другой пользовательской функцией:

function twentytenfive_commentfield() {

$commentArea = '<p><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" required placeholder="What's on your mind?"    ></textarea></p>';

return $commentArea;

}

Это более или менее то же самое, что по <textarea> умолчанию, за исключением placeholder и required атрибутов.

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

Хотя эти изменения в форме комментариев относительно просты, они предоставляют дополнительные (и полезные!) функции пользователям с браузерами последнего поколения. Посмотрите в опере, Chrome (который еще не required поддерживает) или Firefox 4, чтобы увидеть результаты.

Мы, наконец, обойти для вставки новых <header> , <nav> и <footer> элементы. В настоящее время код в /wp-content/themes/twentyten/header.php выглядит более или менее следующим образом:

<div id="header">
<div id="masthead">
<div id="branding" role="banner">
…
</div><!-- #branding -->

<div id="access" role="navigation">
…
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->

Это не займет гений, чтобы увидеть, что мы можем легко сделать этот HTML5-готов, изменив некоторые из этих divs включить <header> и <nav> .

<header id="header">
<section id="masthead" >
<div id="branding" role="banner">
…
</div><!-- #branding -->

<nav id="access" role="navigation">
…
</nav><!-- #access -->
</section><!-- #masthead -->
</header><!-- #header -->

Вы можете видеть, что мы оставили роль WAI-ARIA, navigation назначенную nav элементу, просто чтобы предложить как можно более широкую поддержку всем браузерам и считывателям.

Я заменил #masthead div с <section> потому, что все элементы в этой области относятся друг к другу и, вероятно, появится в документе наброски. Кажется, вы могли бы удалить этот раздел в целом и просто применить 30 пикселей padding-top к заголовку для поддержания макета. Я поддерживал элементов id в случае, если более одного из каждого из них находятся на странице-несколько заголовков, колонтитулов и navs (и многое другое) все приветствуются в HTML5.

В то время как мы редактируете заголовок, мы можем представить новый элемент lt;hgroup. Этот элемент позволяет нам включать несколько заголовков в раздел нашего документа, в то время как они будут рассматриваться как только один заголовок в описании документа. В настоящее время код на строке 65 или вокруг нее в заголовке.php выглядит следующим образом:

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Мы можем отсеить это, чтобы включить <hgroup> тег, а также изменить <div id=“site-description”> <h2> элемент:

<hgroup>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

В /wp-content/themes/twentyten/footer.php , у нас есть:

<div id="footer" role="contentinfo">
  <div id="colophon">
  …
  <div id="site-info">
    <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <?php bloginfo( 'name' ); ?>
    </a>
  </div><!-- #site-info -->

  <div id="site-generator">
  …
  </div><!-- #site-generator -->

  </div><!-- #colophon -->
</div><!-- #footer -->

Мы можем легко отсеять это, чтобы включить <footer> и другой <section> элемент:

<footer role="contentinfo">
<section id="colophon">
…
<div id="site-info">
<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</div><!-- #site-info -->

<div id="site-generator">
…
</div><!-- #site-generator -->

</section><!-- #colophon -->
</footer><!-- #footer -->

JavaScript и CSS

Как уже упоминалось, мы должны включить HTML5 shim или Modernizr.js, чтобы убедиться, что все наши новые элементы правильно визуализировать в Internet Explorer до версии 9. Я добавил следующую строку в заголовки.php:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/Modernizr-1.6.min.js"></script>

Несколько вещей, чтобы отметить здесь. Во-первых, нам больше не нужно, type=“text/javascript” потому что браузер будет считать, что скрипт JavaScript, если он не сказал разные. Во-вторых, мы должны использовать функцию WordPress, bloginfo() чтобы указать URL-адрес источника на наш каталог тем.

Хотя мы в том числе Modernizr частично, чтобы убедиться, что IE может иметь дело с новыми элементами HTML5, я обслуживаю его для всех браузеров из-за ФУНКЦИОНАЛЬНОсти проверки CSS3 он предоставляет.

В style.css, мы должны убедиться, что наши элементы HTML5 имеют display: block атрибут, потому что некоторые старые браузеры будут относиться к ним как к внимательным элементам. Для наших целей, следующая строка в верхней части файла CSS будет делать:

header, nav, section, article, aside, figure, footer { display: block; }

В то время как мы говорим о CSS, помните, что теперь мы можем удалить type=“text/css” из наших <link> тегов. Упрощенный код выглядит следующим образом:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Этого должно быть достаточно на данный момент. Помните, однако, что изменение структуры страницы путем замены старых элементов HTML на новые могут потребовать некоторых дополнительных CSS.

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

<noscript><strong>JavaScript is required for this website to be displayed correctly. Please enable JavaScript before continuing...</strong></noscript>

Добавить некоторые очень основные укладка в style.css, чтобы сделать это сообщение нельзя пропустить.

если (1 йgt; (int) $width » пусто ($caption) )
возвращение $content;

если ($id) $idtag и «id» . esc’attr ($id) . ‘» ‘;

возвращение ‘Злт;фигура ‘ . $idtag . ‘aria-describedby'»figcaption’. $id . ‘» стиль»ширина: . . (10 (int) $width) . ‘px)
. сделатькороткий код ($content) . ‘Этт;figcaption id'»figcaption‘ . $id . ‘»gt;’ . $caption . ‘Яlt;/figcaption)gt; /рисунок);;;;;;;
}

<figure id="attachment_64" style="width: 445px;">
<a href="http://localhost/wp-content/uploads/2010/07/boat.jpg">
<img title="boat" src="http://localhost/wp-content/uploads/2010/07/boat.jpg"
alt="Screenshot" width="435" height="288" aria-describedby="figcaption_attachment_64"></a>
<figcaption id="figcaption_attachment_64">Boat</figcaption>
</figure>

Форма комментариев

Мы можем установить тип ввода текста email в соответствующие поля и url для нее. Это не только более точно описывает поле ввода, но и добавляет лучшую функциональность клавиатуры для iPhone, например.
Мы можем добавить атрибут boolean required к нашим требуемым полям формы. Это выходит за рамки WAI-ARIA, aria-required='true' поскольку он вызывает собственное поведение браузера. required
Мы можем добавить текст заполнителя в наши поля формы, популярный метод JavaScript, который теперь обрабатывается в браузере. Текст заполнителя позволяет вам вникать более подробно о том, какая информация требуется, чем форма этикетки обычно позволяет.

Перед добавлением HTML типичное поле ввода комментариев может выглядеть следующим образом:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="text" value=""
size="30" aria-required='true' />

После наших изменений HTML5, это будет выглядеть следующим образом:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="email" value=""
size="30" aria-required='true'
placeholder="How can we reach you?" required />

Чтобы изменить HTML для полей формы по умолчанию, нам нужно добавить следующий фильтр в нижней части functions.php:

add_filter('comment_form_default_fields', 'twentytenfive_comments');

function twentytenfive_comments() {

$req = get_option('require_name_email');

$fields =  array(
'author' => '<p>' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : ’ ) .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder = "What should we call you?"' . ( $req ? ' required' : ’ ) . '/></p>',

'email'  => '<p><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : ’ ) .
'<input id="email" name="email" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' placeholder="How can we reach you?"' . ( $req ? ' required' : ’ ) . ' /></p>',

'url'    => '<p><label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="url" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" placeholder="Have you got a website?" /></p>'

);
return $fields;
}

add_filter('comment_form_field_comment', 'twentytenfive_commentfield');

Мы следуем этому с другой пользовательской функцией:

function twentytenfive_commentfield() {

$commentArea = '<p><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" required placeholder="What's on your mind?"    ></textarea></p>';

return $commentArea;

}

Это более или менее то же самое, что по <textarea> умолчанию, за исключением placeholder и required атрибутов.

<div id="header">
<div id="masthead">
<div id="branding" role="banner">
…
</div><!-- #branding -->

<div id="access" role="navigation">
…
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->

<header id="header">
<section id="masthead" >
<div id="branding" role="banner">
…
</div><!-- #branding -->

<nav id="access" role="navigation">
…
</nav><!-- #access -->
</section><!-- #masthead -->
</header><!-- #header -->

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Мы можем отсеить это, чтобы включить <hgroup> тег, а также изменить <div id=“site-description”> <h2> элемент:

<hgroup>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

В /wp-content/themes/twentyten/footer.php , у нас есть:

<div id="footer" role="contentinfo">
  <div id="colophon">
  …
  <div id="site-info">
    <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <?php bloginfo( 'name' ); ?>
    </a>
  </div><!-- #site-info -->

  <div id="site-generator">
  …
  </div><!-- #site-generator -->

  </div><!-- #colophon -->
</div><!-- #footer -->

Мы можем легко отсеять это, чтобы включить <footer> и другой <section> элемент:

<footer role="contentinfo">
<section id="colophon">
…
<div id="site-info">
<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</div><!-- #site-info -->

<div id="site-generator">
…
</div><!-- #site-generator -->

</section><!-- #colophon -->
</footer><!-- #footer -->

JavaScript и CSS

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/Modernizr-1.6.min.js"></script>

header, nav, section, article, aside, figure, footer { display: block; }

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<noscript><strong>JavaScript is required for this website to be displayed correctly. Please enable JavaScript before continuing...</strong></noscript>

Добавить некоторые очень основные укладка в style.css, чтобы сделать это сообщение нельзя пропустить.

/* A message for users with JavaScript turned off */
noscript strong {
display: block;
font-size: 18px;
line-height:1.5em;
padding: 5px 0;
background-color: #ccc;
color: #a00;
text-align: center; }

Все еще не уверен? Альтернатива кросс-браузера

Существует еще один вариант для тех из вас, кто абсолютно должны поддерживать пользователей с JavaScript выключен, как это было предложено Кристиан Хайльманн. Просто оберните элементы HTML5 с divs, которые имеют одно и то же имя ID. Например:

<article id="post-123">
...
</article>

Становится

<div class="article">
<article id="post-123">
...
</article>
</div>

Тогда это просто случай добавления .article к вашей статье CSS определение. Это может выглядеть следующим образом:

.article,
article { display: block; background-color: #f7f7f7; }

Стоит отметить, что это добавляет еще один уровень разметки в код, который не нужен для большинства пользователей. Я бы только рекомендовать, если не JavaScript пользователи являются значительной долей ваших пользователей и / или продаж.

Заключительные мысли

TwentyTen был огромный шаг вперед для WordPress; и как часть HTML, это маяк передовой практики. Включив несколько простых JavaScript, теперь мы можем открыть тему в мире HTML5 и дополнительный смысл и простой семантический код, который он предлагает.

Хотя мы рассмотрели большое количество новых элементов HTML5 в этой статье, это действительно только отправная точка, и вы можете добавить еще много самостоятельно. Например, можно добавить заголовки и колонтитулы к отдельным публикациям, или вы можете добавить новый <aside> элемент. Препятствуйте нам знать ваши идеи и как вы получаете дальше с снабжать их в комментариях ниже!

Скачать TwentyTen с HTML5

В дополнение к этой статье я создал новую версию TwentyTen, с HTML5 элементов, которые мы обсуждали. Скачать эту тему из TwentyTen пять.

Прочие ресурсы

Вас могут заинтересовать следующие статьи и связанные с ними ресурсы:

HTML5: Vocabulary и связанные с ними AAP для HTML и XHTML Спецификация HTML5. Существенная ссылка на закладку.
Новая тема: Инструментарий WordPress объявляет тему песочницы под названием Toolbox, построен полностью в HTML5.
Toolbox Скачать WordPress HTML5 тема Toolbox.
Редизайн с HTML5 и WAI-ARIA Брюс Лоусон принимает раннюю трещину при введении некоторых HTML5 в WordPress.
Кодирование HTML5 Layout From Scratch Новичок в HTML5? Это отличное место для начала.

(al) (vf) (ik)

Источник: smashingmagazine.com

Использование HTML5 для преобразования WordPress’ TwentyTen Тема

Дальнейшее чтение на SmashingMag:

Почему использование JavaScript имеет смысл

Обновление до HTML5

Статьи

Время и дата

Цифры

Форма комментариев

Заголовок, навигация и footer

JavaScript и CSS

Форма комментариев

Заголовок, навигация и footer

JavaScript и CSS

Все еще не уверен? Альтернатива кросс-браузера

Заключительные мысли

Скачать TwentyTen с HTML5

Прочие ресурсы

Понравилось это:

Похожее

Добавить комментарийОтменить ответ

Дальнейшее чтение на SmashingMag:

Почему использование JavaScript имеет смысл

Обновление до HTML5

Статьи

Время и дата

Цифры

Форма комментариев

Заголовок, навигация и footer

JavaScript и CSS

Форма комментариев

Заголовок, навигация и footer

JavaScript и CSS

Все еще не уверен? Альтернатива кросс-браузера

Заключительные мысли

Скачать TwentyTen с HTML5

Прочие ресурсы

Sharing is caring

Понравилось это:

Похожее

Добавить комментарийОтменить ответ