Поддержка HTML5 галерей в WordPress 3.9

Дата публикации:Март 13, 2014

В новом релизе WordPress появится возможность задавать поддержку HTML5 разметки в галереях. Как только в теме будет объявлена такая поддержка, все списки определений заменятся на теги figure и figcaption для лучшей семантики.

Если вы хотите не только применить эту новую возможность, но также и обеспечить обратную совместимость, то в таком случае вы можете пойти двумя путями:

1. Задать стили для новых HTML5-элементов, а также добавить CSS-селекторы для традиционных элементов списков определений (DL, DD, DT). Именно такой подход был выбран для темы _s, чтобы обеспечить ее максимальную простоту.

2. Отфильтровать атрибуты шорткодов и переопределить параметры тегов. Поскольку шорткод shortcode_atts_gallery появился в версии 3.6, у вас будет реализована обратная совместимость с двумя предыдущими версиями.

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

/**
 * Заменяет элементы списков определений на их HTML5 альтернативы.
 *
 * получаем исходный массив с атрибутами шорткода
 * затем выводим массив с атрибутами HTML5
 */
function prefix_gallery_atts( $atts ) {
    $atts['itemtag']    = 'figure';
    $atts['icontag']    = 'div';
    $atts['captiontag'] = 'figcaption';
 
    return $atts;
}
add_filter( 'shortcode_atts_gallery', 'prefix_gallery_atts' );

Второй способ добавления обратной совместимости имеет одно дополнительное преимущество – он также добавляет и прямую совместимость, поскольку вы можете использовать HTML5-разметку для галерей уже сегодня, даже учитывая тот факт, что версия WordPress 3.9 выйдет только в апреле.

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

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

Поделиться

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Предыдущая запись:

Следующая запись: