В прошлом году, WordPress, возможно, начал свое большое обновление когда-либо: WordPress 3.0.В дополнение к этой версии было новой темой по умолчанию, TwentyTen, и обещание новая тема по умолчанию с каждым годом.Немного удивительно, что TwentyTen заявляет, тип документа HTML5, но не воспользоваться многие новые элементы и атрибуты, HTML5 brings.
Сейчас, HTML5 делает многие вещи, но вы не можете просто добавить <!doctype html> в начало документа и получите рады, что Вы so 2011.Mark-вверх, как говорят, есть смысл, и HTML5 приносит целый букет смысл нашей documents.
В последние survey Крис Coyier по меньшей CSS-Tricks, почти две трети респондентов заявили, что они не будут использовать HTML5 в новых проектах.В похожий опрос, Smashing Magazine результаты были почти идентичны: только 37% избирателей заявили, что использование HTML5.Это угнетает чтении.Возможно, разработчики и дизайнеры отпугивает кросс-браузерные несовместимости и рутинной работы по изучению новых разметки.Правда в том, что с щепоткой JavaScript, HTML5 может безопасно использоваться сегодня во всех браузерах, вернемся к IE6.
WordPress, кажется, сочувствует большинство читателей CSS-Tricks “.TwentyTen тонкая тема, которую уже проверяет, как HTML5, а для того, чтобы удовлетворить пользователей без JavaScript, он должен отказаться от большой кусок элементы HTML5.В чем причина?Наш старый друг обозреватель Internet Explorer не поддерживает большинство из них до версии 9.
По умолчанию TwentyTen WordPress Theme.
Например, вы, наверное, уже слышали о <section> и <article> теги, оба из которых чавканье на немного, чтобы быть встроенным в шаблон WordPress.Но использовать эти элементы HTML5 в IE8 (и его предшественники), необходимо наличие для того, чтобы создать их в DOM.Если у вас нет JavaScript, то элементы не могут быть стилизованы с помощью CSS.Отключить JavaScript, и вы выключите стили для этих элементов, неизменно, это нарушит форматирование вашего page.
Я предполагаю, что WordPress решили исключить эти проблемные теги так, чтобы его тема по умолчанию будет поддерживаться всеми браузерами — Не только тех, с JavaScriptОказалось on.
Хотя я понимаю это решение, я также думаю, что это ошибка.Три основные технологии делают работу Web: HTML, CSS и JavaScript.Все настольных браузеров поддерживают их (до некоторой степени), так что если любой из них от отключено пользователю придется ожидать деградировали опыта.Наличие в настоящее время фундаментальное значение для пользователей и в то время как мы должны поддерживать пользователей, отключить JavaScript, или он выключен для них, и нет никаких шансов, чтобы включить его снова, как они don’ T имеют права это делать, я спрашиваю просто Как far мы должны поддерживать them.
Почему Использование JavaScript Делает Sense
Yahoo дает убедительные evidence, что менее 1,5% своих пользователей отключить JavaScript.Мои собственные исследования в этом, умело помогали Грейга Daines на eConversions, ставит на рисунке ниже 0,5% (на основе миллионов посетителей в Великобритании розничный сайт)
Несмотря на то, it’ правда, что наличие should быть отделены от site’ с содержанием, дизайном и структурой реальности больше не является черным и белым.Я твердо верю, что преимущества и возможности HTML5 приносит, вместе с соответствующими технологиями, такими как CSS3 и запросы средств массовой информации (оба из которых иногда полагаться на JavaScript для кросс-совместимость браузера), более чем достаточно причин для использования JavaScript для ‘ force’ новыеэлементы для работы в Internet Explorer.Я страстный защитник на базе стандартов дизайна, который doesn’ т полагаться на JavaScript; HTML5 является одним структурным exception.
Да, мы должны уважать user’ с решение отключить JavaScript в браузере.Тем не менее, я don’ T считаю, что это достаточно хорошая причина не использовать современные технологии, которые обеспечивали бы подавляющее большинство пользователей с более богатым опытом пользователей.В конце концов, в TwentyTen Например, если тема была HTML5 теги в нем, все будет выглядеть отлично в современных браузерах (последние версии Safari, Firefox, Opera, Chrome и IE9), с или без JavaScript.
Если браузер IE6 — IE8, и JavaScript выключен, то пользователи будут видеть содержание, но оно не будет стиль правильно.Если содержимое не будет отображаться на всех, we’ D имеют совершенно другой дискуссии.Если вы все еще не уверены, я кратко расскажу еще один вариант для тех, кто абсолютно must поддержка пользователей с JavaScript оказалось off.
Чтобы TwentyTen играть честно с IE, я предлагаю HTML5 Remy Sharp, shim или, если вы хотите, чтобы погрузить Ваши зубы в CSS3, Modernizr.Modernizr не только добавляет поддержку HTML5 элементов в IE, но также говорит вам, какие свойства CSS3 поддерживаются браузером пользователя путем добавления специальных классов в <html> element.
Mordernizr.js
Итак, давайте предположим, что вы справедливо изгнан без JavaScript пользователей с вежливым сообщение в <noscript> тег.Теперь мы можем начать мастерить под капотом TwentyTen, чтобы принести больше HTML5, чтобы WordPress.
Обновление до HTML5
TwentyTen получает ряд вещей на месте.Прежде всего, она заявляет права тип документа и включает сокращенное мета charset тег.Он также использует другие семантические добра, как Микроформаты и большие возможности доступа как WAI-ARIA.Но мы можем пойти further.
Важное примечание:
- Я ссылаюсь HTML сгенерировано http://wp-themes.com/twentyten/, а не простого “Hello World” чистой установки WordPress 3.
- В этой статье я буду редактирования файлов непосредственно в
/wp-content/themes/twentyten/каталог.Я предоставил все обновленные файлы HTML5 тему источник для загрузки из TwentyTen Five. - Линия цифры могут меняться с течением времени, поэтому, когда я эталонной, я обычно говорю “на или вокруг линии …” версию WordPress на момент написания статьи это 3.0.4.
Articles
Один из наиболее запутанных части спецификации HTML5 является <section> и <article> теги.Что было раньше, курица или яйцо?Самый простой способ помнить, чтобы обратиться к спецификации. HTML5 spec может быть сухим и в лучшие времена, но ее объяснение articles всегда будет указывать вам в правильном направлении:
article элемент представляет собой автономный состава в документе, страницы, приложения или сайта, и это, в принципе, независимо распространяемые или многоразовые, например,В syndication.
Если часть содержания под вопросом может быть, и, скорее всего, будет, синдицированные по RSS, то есть хороший шанс, что это <article>.Сообщение в блоге WordPress отвечает всем требованиям perfectly.
На TwentyTen страницу, мы получаем следующие HTML:
<div id="post-19"> … </div>
Семантически это означает очень мало.Но с простым добавлением article теги, мы можем превратить его в наценке с meaning.
<article id="post-19"> … </article>
Обратите внимание, что мы оставляем за собой id чтобы это <article> остатки unique.
Чтобы сделать эти изменения в 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-## -->
Пока все хорошо.Эти простые изменения, но они уже служат для капитального ремонта семантики website.
Время и Date
Согласно спецификации HTML5:
<time> элемента либо представляет собой время в 24-часовом формате, или точную дату преждевренный григорианского календаря, необязательно с указанием времени и часового пояса offset.
Это означает, что мы можем дать Дата и время публикации более широкий контекст статьи с ~ HTML5 автора 56 | тег.Посмотрите на код, который генерирует 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>
Это время сейчас машиночитаемые, и браузер теперь может взаимодействовать с датой во многих отношениях мы должны так хочется.Я также добавил логический атрибут pubdate, который обозначает это как дата, на которую статью или содержание было published.
Время в 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, respectively.
Нам нужно изменить дату отформатирован, поэтому мы должны добавить четвертую функцию: 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> element.
Для более подробной информации о дате WordPress и функции времени, проверьте:
Figures
Фигуры для наших целей, по крайней мере, это часть средств массовой информации, которые вы загружаете в WordPress для внедрения в сообщении.Наиболее очевидным примером может служить образ, но это может быть видео, тоже, конечно.WordPress 3 является полезным достаточно, чтобы добавить подписи к картинкам, когда вы сначала импортировать изображения, но он не отображает те подписи с использованием новых HTML5 <figure> и <figcaption> tags.
Спец defines <figure> следующим образом:
figure элемент представляет собой единицу содержания, необязательно с заголовком, который является самодостаточным, который обычно ссылаются как на единое целое с основным потоком документов, и которые могут быть удалены от основного потокадокумента, не затрагивая meaning.
И оно определяет <figcaption> следующим образом:
figcaption элемент представляет собой заголовка или легенды для остального содержимого figcaption родительского элемента figure элемента, если any.
В настоящее время изображения с подписью оказывается так:
<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 с caption.
Изменение этого 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 и назначить эту функцию на тот же короткий …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров