Среди всех новых функций последней версии WordPress 3.4 есть одна «жемчужина». Функция CustomHeaderImage ранее поддерживалась WordPress, однако фиксированные размеры делали её слишком неподвижной для адаптивного дизайна.
Ранее размеры шапки предопределялись и управлялись с помощью констант HEADER_IMAGE_HEIGHT и HEADER_IMAGE_WIDTH, и загруженный файл обрезался в соответствии с ограничениями. Но теперь версия 3.4 поддерживает гибкую ширину и высоту и освобождает нас от этих ужасных констант. Звучит интригующе, правда? Давайте посмотрим, как это делается.
Что мы хотим получить.
Прежде всего, необходимо решить, какие из способов создания адаптивных изображений подходят для наших целей. Мы, конечно, можем применять пользовательские разметки для этих изображений, но, не забывая, что они играют важную роль в продвижении сайта, и не зависят от структуры поста или разметки текста. Исходя из этого, техника “noscript” выглядит многообещающе. На практике, она работает следующим образом:
<noscript data-large='picture-large.jpg' data-small='picture-small.jpg' data-alt='alt text'>
<img src='picture.jpg' alt='alt text' />
</noscript>
Мы определяем альтернативные ссылки на изображения для выбранных контрольных точек в виде атрибутов с тэгом <noscript>. Затем открываем окно с JavaScript на максимальную ширину и заменяем код соответствующего изображения. Если JavaScript не работает, браузер воспроизведёт картинку с тегом <noscript>. Чтобы управлять таким замещением, мы будем использовать плагин jQuery Picture (созданный Абаном Дюнном), который позволяет одновременно поддерживать как минимум 3 контрольные точки. Разметка для этого плагина выглядит следующим образом:
<figure id="header-image" data-media="picture-small.jpg" data-media440="picture-medium.jpg" data-media600="picture-large.jpg" title="alt text">
<noscript>
<img src="picture-large.jpg" alt="alt text">
</noscript>
</figure>
Это должно сопровождаться соответствующим оформлением CSS и скриптом, который заставляет работать jQuery Picture. Кроме этого, нам может понадобиться набор заранее определённых шапок, чтобы было из чего выбрать. Более того, мы можем дать пользователю возможность загружать свои собственные изображения через панель администратора. Если изображение загружено в полном размере, мы создадим необходимые усреднённые размеры с присущей WordPress поддержкой маленьких изображений в сочетании с гибкими шапками. В конечном итоге, шапка сайта для пользователей должна выглядеть так:
Пора приступить к делу - разбираемся с кодом.
Шаг 1: Прописываем заголовок пользователя в своей теме.
$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';
$args = array(
'default-image' => $default_url,
'random-default' => false,
'width' => 1000,
'height' => 300,
'flex-height' => true,
'flex-width' => true,
'header-text' => false,
'default-text-color' => '',
'uploads' => true,
'wp-head-callback' => 'frl_header_image_style',
'admin-head-callback' => 'frl_admin_header_image_style',
'admin-preview-callback' => 'frl_admin_header_image_markup',
);
add_theme_support('custom-header', $args);
Codex - новый код регистрации для WordPress 3.4. На его базе можно увидеть весь набор параметров, но в нашем случае, наиболее важны следующие:
- default-image – url-адрес изображения, установленного по умолчанию в полном размере, который находится в папке темы.
- width, height – максимальные значения параметров, которые поддерживает данная тема.
- flex-height, flex-width –данные параметры, указываемые как «истинные», позволяют изменять размеры изображений.
- header-text – в нашей теме текст над изображением не отображается.
- uploads – разрешить загрузку с панели администратора.
- wp-head-callback – функции, которые могут быть заданы в разделе заголовка темы.
- admin-head-callback – функции, назначаемые в разделе заголовка предварительной страницы.
- admin-preview-callback – функция, позволяющая создавать предварительную разметку на экране в панели администратора.
Если вы ранее уже использовали изображение заголовков в вашей теме, и вам интересно, как эти методы сравнить, ниже представлен список старых и соответствующих им новых параметров:
HEADER_IMAGE_WIDTH -> 'width'
HEADER_IMAGE_HEIGHT -> 'height'
NO_HEADER_TEXT -> 'header-text'
HEADER_TEXTCOLOR -> 'default-text-color'
Шаг 2: Регистрируем изображения по умолчанию, чтобы было из чего выбрать.
В нашем примере мы предоставляем на выбор два определённых варианта изображений для шапки, и каждый из них может иметь три варианта: -large.jpg, -medium.jpg и -thumb.jpg для разной ширины окна соответственно. Самый маленький размер картинки будет использоваться для интерфейса администратора.
register_default_headers(array(
'city' => array(
'url' => '%s/_inc/img/city-large.jpg',
'thumbnail_url' => '%s/_inc/img/city-thumb.jpg',
'description' => 'City'
),
'forest' => array(
'url' => '%s/_inc/img/forest-large.jpg',
'thumbnail_url' => '%s/_inc/img/forest-thumb.jpg',
'description' => 'Forest'
)
));
Запись кода не требует дополнительных пояснений, единственное, на что стоит обратить особое внимание, это правильный url для изображений: large.jpg для полной величины и -thumb.jpg для маленького формата (%s- служит для заполнения заголовка активной темы, который в WordPress будет заменен автоматически).
Шаг 3: Регистрируем дополнительный размер изображений.
add_image_size('header_minimal', 430, 900, false);
Регистрация этих дополнительных размеров с помощью нашей темы будет давать указания WordPress создавать вариант для каждого из них при загрузке изображения для шапки.
Подходящий вариант можно будет получить, используя соответствующее имя. Хитрость в том, чтобы определить достаточно большое значение высоты, таким образом, чтобы изображение пропорционально изменило ширину и высоту.
Шаг 4: Разметка для интерфейса.
function frl_header_image_markup(){
/* get full-size image */
$custom_header = get_custom_header();
$large = esc_url($custom_header->url);
$mininal = $medium = '';
/* get smaller sizes of image */
if(isset($custom_header->attachment_id))
{ //uploaded image
$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);
if(isset($medium_src[0]))
$medium = esc_url($medium_src[0]);
$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);
if(isset($minimal_src[0]))
$mininal = esc_url($minimal_src[0]);
}
else
{ //default image
$medium = esc_url(str_replace('-large', '-small', $custom_header->url));
$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));
}
/* fallback for some unexpected errors */
if(empty($medium))
$medium = $large;
if(empty($mininal))
$mininal = $large;
?>
<figure id="header-image" data-media="<?php echo $mininal;?>" data-media440="<?php echo $medium;?>" data-media600="<?php echo $large;?>">
<noscript>
<img src="<?php echo $large;?>">
</noscript>
</figure>
<?php
}
function frl_header_image_style() {
$src = get_template_directory_uri().'/_inc/js/jquery-picture-min.js';
wp_enqueue_script('jquery-picture', $src, array('jquery'), 0.9, true);
?>
<style type="text/css">
#header-image {
padding: 0.5em 0; }
#header-image img {
vertical-align: bottom;
width: 100%;
height: auto; }
</style>
<script>
jQuery(document).ready(function($){
$('#header-image').picture();
});
</script>
<?php
}
Теперь все очень просто. С помощью функции frl_header_image_markup мы создаем разметку, необходимую для работы нашей адаптивной техники. Самое интересное здесь - это получение URL адресов для больших, средних и маленьких изображений. Функция WordPress 3.4 get_custom_header отображает объект шапки сайта, который содержит требующуюся информацию. Если $custom_header имеет четко заданное attachment_id свойство, мы имеем дело с загруженным изображением и можем получить усредненные размеры, используя wp_get_attachment_image_src. Если же это свойство отсутствует, мы работаем с одним из определённых по умолчанию изображений, и получаем усредненные размеры на основе нашего собственного условия наименования.
При помощи команды frl_header_image_style мы используем CSS и JavaScript, которые и делают наше изображение адаптивным. Эта функция будет работать автоматически, так как мы уже определили как параметр регистрации шапки. Тем не менее, функцию _markup нужно указывать непосредственно в теме - очевидно, где-то внутри header.php
После этого этапа мы получим первое изображение шапки по умолчанию «на адаптивный манер».
Шаг 5: Разметка для предварительного просмотра администратора.
В меню Appearance -> Headerесть экран, который позволяет нам выбирать изображение шапки из указанных вариантов загружать новую картинку. Мы стараемся сделать шапку максимально простой.
function frl_admin_header_image_markup() {
$image = get_header_image();
?>
<div id="header-image">
<?php if($image): ?>
<img src="<?php echo esc_url($image); ?>" alt="" />
<?php endif; ?>
</div>
<?php
}
function frl_admin_header_image_style() {
?>
<style>
#header-image {
max-width: 1000px;
max-height: 400px; }
#header-image img {
vertical-align: bottom;
width: 100%;
height: auto; }
</style>
<?php
}
На панели администратора мы используем только одно изображение в полном размере в нашей разметке и получаем его URL при помощи функции get_header_image (ей соответствует frl_admin_header_image_markup). Но нам необходимо обеспечить соответствующее оформление картинки для предварительного просмотра, поскольку она должна быть в адаптивном виде (для этого используем frl_admin_header_image_style). Обе функции будут работать автоматически, поскольку мы определили их в качестве параметров регистрации шапки сайта.
Вот теперь мы можем наслаждаться абсолютной свободой при настройке изображения шапки.
Кратко о возможных проблемах.
Свобода влечет за собой ответственность. Предоставляя пользователю широкие возможности для загрузки изображений, мы не можем контролировать их размер и формат. Если изображение превышает заданные нами лимиты по ширине и высоте, то его следует обрезать. Но если Вы работаете в новом окне LiveThemeCustomizer вместо Appearance -> Header , этого делать не придется. Live Theme Customizer- это совершенно новая разработка, поэтому она, скорее всего, в будущем будет усовершенствована. Однако на данный момент возможные трудности все же стоит учитывать.
Проблема может возникнуть, если ширина загруженного изображения меньше, чем этого требует дизайн темы. Наш код растянет его на полную ширину окна, поэтому может пострадать качество. Решение такого рода проблем возможно путем установления строгих правил для пользователя, но, по сути, с этим нужно просто смириться.
Заключение.
В заключение можно сказать, что мы применяли новые функции последней версии WordPress 3.4 для поддержки шапки сайта. Мы сделали ее адаптивной, используя технику “noscript”, которая позволяет не только подгонять размер изображений под значение ширины браузера, но также работает с изображениями разных размеров. Мы используем нашу тему с двумя определёнными вариантами, но если загрузить любое изображение, интерфейс админа и наша шапка по-прежнему останутся адаптивными.
Автор: Anna Ladohskina
Оригинал статьи: http://www.webdesignerdepot.com/2012/09/creating-a-responsive-header-in-wordpress-3-4/
Добавить комментарий