За последние несколько лет популярность отзывчивого веб – дизайна значительно возросла. И все больше веб – сайтов в настоящее время разрабатывается с учетом принципов отзывчивого веб – дизайна.
Однако, как и у любого подхода у отзывчивого веб-дизайна есть свои трудности, с которыми приходиться сталкиваться разработчикам в процессе своей работы. Одна из самых распространенных проблем – это уменьшение размера файлов, при написании сайта или приложения для мобильного устройства.
В этой статье мы рассмотрим, как использовать встроенную в WordPress функцию, которая дает возможность вставлять изображения любого размера, что особенно удобно при использовании сайта с мобильных устройств. Избранные изображения, которые иногда называют миниатюрами, функция WordPress, была значительно улучшена, начиная с версии 3. Она позволяет указать признаки изображений для каждой должности и показать, как оно будет выглядеть вмести с другим контентом. Тот факт, что изображение хранится в мета к записанным данным, а не вкладывается в содержание поста, значит, у нас есть множество новых возможностей для использования этого изображения.
Почему стоит беспокоиться о размере изображений?
Множество людей, используют свое мобильное устройство для серфинга в интернете, сидя на диване, и подключившись к Wi-Fi, при этом одним глазом они смотрят в телевизор, а другим на экран мобильного телефона. Многие ищут информацию о том, что недавно услышали от друзей или знакомых. И пользователей такого типа все больше. Даже вы, возможно, сейчас таким же образом читаете эту статью.
Но есть и другой тип пользователей, который использует интернет с мобильного устройства посредством 3G, при чем даже если сигнал нечеткий и пропадает, или если у них невыгодный тарифный план. И хотя в настоящее время покрытие сети становится лучше, тарифные планы дешевеют и большое появляется мобильных устройств с поддержкой Wi-Fi, пользователей этого типа все еще достаточно много, чтобы их игнорировать. Наоборот, с ними приходиться считаться.
Эти пользователи не будут благодарны вам за создание сайта с изображениями огромных размеров, которые будут медленно загружаться на их телефоны, постепенно съедая их деньги. В большинстве случаев такие пользователи не дожидаются медленной загрузки, они просто закрывают ваш сайт. А это может оказать значительное влияние на рейтинг вашего сайта в поисковых системах. Все вышесказанные факторы являются вескими причинами для уменьшения размера изображений на вашем мобильном сайте.
Отзывчивые изображения, что это такое?
Если у вас есть опыт в разработке сайтов, и оптимизации их под мобильные устройства, то вы представляете себе принципы работы отзывчивого веб- дизайна.
В начале использования отзывчивого веб-дизайна, нужно воспользоваться CSS с этим кодом:
img {
max-width: 100%;
}
Это позволяет вашим снимкам выглядеть аккуратно, а их размер сократить в соответствии с макетом. Но в действительности с размерами файлов ничего не происходит, что может привести к появлению файлов большого размера на вашем мобильном сайте. И как результат ваш сайт будет медленнее работать. Отображение изображений больших размеров, которые сократились при помощи CSS не рекомендуется W3C, особенно на мобильных устройствах.
Когда разработчики создают отзывчивый веб-дизайн сайта, то, как правило, они используют некий способ, чтобы сделать фактический размер изображения меньше.
Если у вас есть опыт в разработке веб – сайтов, то вы знаете, что на сегодняшний момент существует несколько способов отображения картинок. Вот некоторые из этих методов:
Первый способ звучит следующим образом. Заменить изображения в разметке с фоновыми изображениями, используя изображения различных размеров в зависимости от мобильного устройства. Этот метод имеет серьезные SEO недостатки, потому что изображения не имеют alt теги для чтения с экрана. Также при использовании подобного метода создаются определенные трудности для поисковых систем для индексации вашего сайта.
Второй способ предлагает нам использование меньшего изображения в разметке и более крупного изображения в качестве фона для отображения сайта со стационарного компьютера. Также же в этом методе используется CSS, чтобы скрыть меньшее изображение на больших экранах. Этот метод, подробно описывается Гарри Робертс на сайте CSS Wizardry. Он лучше чем первый, но требует ручного создания изображений, а также определение фонового изображения для каждого основного изображения в таблице стилей. Не знаю, как вы, но у меня нет, ни времени, ни терпения на это.
Третий вариант предлагает JavaScript-решение, которое использует URL параметры или атрибуты данных. Это позволяет избежать монотонной работы, описанной выше во втором способе, но этот способ включает в себя больше обработки и может замедлить загрузку сайта. А это не входит в наши цели.
Еще один вариант, это использование отзывчивых изображений, которые сделают все работу за вас. Это самый удобный вариант, который я видел, но он требует, отделить изображения, которые вы хотите изменить от тех, которые вы хотите оставить. А это в свою очередь, потенциальные проблемы при передаче управления сайтом клиенту или редактору.
Тот факт, что отзывчивые изображения используют PHP, заставило меня задуматься о том, как это может поместиться в WordPress, который, в конце концов, написан на PHP. Есть ли способ использовать встроенные функции WordPress для доставки изображений таким образом, что клиент не сможет своими действиями помешать этому процессу?
Да, оказывается, это возможно. Вы сможете это сделать, добавив всего один плагин.
Отзывчивые изображения и WordPress
Ниже я расскажу технику, которую я недавно разработал для одного клиента. Его сайт является отзывчивым, и основная доля посещений приходится на мобильных пользователей. На данный момент, для изменения размера на нем используется max-widt, но этот способ не учитывает различные размеры экранов мобильных устройств.
Это то, как сайт выглядит в браузерах стационарных компьютеров и мобильных браузерах:
Фактический размер изображения остается прежним, как вы уже успели заметить. И мы должны это изменить.
Для этого мы будем использовать следующие элементы:
- Бесплатный плагин, который нам необходим, называется Mobble. Он обнаруживает устройства и предоставляет условные функции PHP, которые можно использовать для доставки разного содержания для различных мобильных устройств;
- single.php и page.php файлы мы будем редактировать, чтобы отобразить сообщение или избранные изображения страницы, или изменение размера изображения в соответствии с типом мобильного устройства;
- Рекомендуемые функциональные изображения в панели управления WordPress, который мы будем использовать, чтобы определить изображение, используемое для каждой страницы.
Итак, давайте начнем.
Скачать Mobble
Во-первых, для начала нам необходимо скачать плагин Mobble. Это позволит проверить строку агента пользовательского браузера, чтобы определить, какое мобильное устройство использует пользователь. Итак, все что вам нужно на начальном этапе работы, это скачать и активировать плагин.
Редактировать single.php и page.php файлы для вызова Thumbnail.
Используя текстовый редактор или редактор WordPress, вам необходимо открыть single.php файл. Найдите следующий код:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<section class="entry-content">
В нашем примере, изображение должно отображаться сразу после заголовка и перед содержанием, поэтому наш код должен быть вставлен между h1 и section тегами. Если в вашем сайте не использует HTML5, вы можете добавить div там вместо section.
Вот код, который отображает изображение:
<?php the_post_thumbnail(); ?>
Функция имеет несколько параметров, которые мы можем использовать. Вы можете использовать любой из размеров, которые определяются WordPress:
- Thumbnail миниатюра: по умолчанию должны быть не более 150 × 150 пикселей;
- Medium среднее разрешение: по умолчанию максимум 300 × 300 пикселей;
- Large большое разрешение: по умолчанию, максимум 640 × 640 пикселей;
- Full Полное разрешение: изображение с оригинальным загруженным размером.
Вот где наша условная функция отображается с размером изображения. Ниже полный код, который нам понадобятся:
<?php
if (is_mobile()) {
the_post_thumbnail('medium');
} else {
the_post_thumbnail('large');
} ?>
Этот код выполняет следующие действия:
- Проверяет просматривается ли в настоящие время веб — сайт с мобильных устройств: if (is mobile());
- Если это так, выводит среднее разрешение избранные изображений: {the_post_thumbnail(‘medium’)},
- Если нет, выводит изображения с большим разрешением.
Создав single.php файл, давайте сделаем то же самое для page.php. Затем, мы должны изменить любые вложенные изображения на избранные изображения с помощью WordPress dashboard.
Добавление избранных изображений в WordPress всегда было очень простой функцией, поскольку она была включен в пользовательский интерфейс в версии 3.0. Чтобы ею воспользоваться, просто следуйте этим трем этапам:
- В панели управления WordPress, вам нужно открыть экран редактирования для каждой страницы.
- Далее вам нужно удалить существующее изображение (оно останется в галерее к этому посту или странице)
- Нажмите кнопку «Установить избранные изображения» в нижней правой части экрана.
- Далее нажмите кнопку «Галерея» на вкладке. Изображение, которое вы только что удалили, будет отображаться. Все, что нужно сейчас сделать, это нажать кнопку «Использовать, как основное изображение», а затем нажать на крестик в правом верхнем углу окна. Не вставляйте изображение в пост или страницу, иначе оно будет отображаться дважды.
Наконец, нажмите кнопку «Обновить», чтобы сохранить изменения, которые вы только что сделали.
Заключение
Как вы поняли, использование избранных изображений с помощью функционала WordPress, помогает увеличить работоспособность вашего сайта на мобильном устройстве. Вся эта работа занимает три этапа:
- Установить плагин.
- Добавить условные теги к single.php и page.php для вызова различных версий изображения в зависимости от мобильного устройства.
- Заменить изображения в теле содержания.
Конечно, этот метод не является совершенным для всех возможных ситуаций. Он работает только если изображения, которое должно появиться выше (или ниже), остального контента, и он требует, чтобы каждый, кто добавляет пост или страницу, использовал функции изображений, а не просто вставлял изображение в пост или страницу сайта. Поэтому все, что вам сейчас нужно, это просто научить редактора вашего сайта добавлять избранные изображения.
(AL)
