Теперь мы есть в Telegram! Самое свежее на нашем канале
Тенденции очень изменчивы. Все сайты с громкими именами, ориентированы на работу через мобильные устройства. Итак, давайте ознакомимся с тем, что такое адаптивные шаблоны.
Что такое адаптивные шаблоны и почему они так важны?
Тенденции использования адаптивных шаблонов становятся популярными как никогда. И это неспроста. Широкое распространение смартфонов и планшетов для доступа в интернет влияет на важность использования адаптивных шаблонов. Что же такое адаптивный шаблон? Отзывчивость шаблона позволяет дизайну сайта адаптироваться в разных по размерам экранах. Он автоматически подбирает разрешение и определяет, на каком устройстве отображается сайт, на мониторе компьютера, планшете или смартфоне. Разработчики всеми силами стараются сделать шаблоны адаптивными, чтобы улучшить его пользовательский интерфейс и время загрузки. Это означает, что используется серия определенных запросов CSS3, которые магическим образом оптимизируют страницу вашего сайта. Фиксированная ширина не всегда сможет отображаться правильно. А значит, надо будет использовать адаптивность. Перед началом работ необходима подготовка. Не все настолько сложно, сначала нужно проработать элементы дизайна и учесть специфику работы адаптивного шаблона. Если быть честным, вы должны неплохо знать основы создания шаблонов wordpress. Создание первого дочернего шаблона Будет хорошо, если вы в первую очередь создадите дочерний шаблон, пускай это и не обязательно, однако рекомендовано. Если вы не знаете, что такое дочерний шаблон, вы можете прочитать о нем здесь. Дочерние шаблоны – это не очень распространенный, но замечательный функционал WordPress. Это способ сохранять настройки вашего шаблона, даже если ваш родительский шаблон будет изменен. Каждый, даже с очень поверхностными знаниями HTML и CSS сможет изменить цвета в шаблоне. Здесь мы дадим небольшой урок на тему, как сделать дочерний шаблон для вашего текущего шаблона WordPress. Шаг первый: Создайте новую папку mythemechild в директории wp-content/themes. Предположим, что ваш шаблон называется myparenttheme. Конечно, вы можете назвать дочерний шаблон так, как пожелаете. Это не имеет значения, но желательно использовать название, которое будет похожим на название основного шаблона, например, если у вас шаблон назван abc, назовите дочерний шаблон abc-child. Шаг второй: Добавление styles.css является обязательным условием при создании дочернего шаблона. Создайте файл styles.css в папке с дочерним шаблоном. Кроме того, вы можете добавить в эту папку файл functions.php другие файлы шаблона. Шаг третий: В файле styles.css дочернего шаблона mythemechild одним из основных условий является добавление заголовка. Ниже приведен пример заголовка, который делает дочерний шаблон рабочим для WordPress./* Theme Name: myParentTheme Child Theme URI: http://partneroff.pro/ Description: Моя первая тема для вордпресс Author: Ваше имя Template: myparenttheme Version: 0.1.0 */
- Название шаблона. (обязательно) Название дочернего шаблона.
- URI шаблона. (желательно) Веб-страница дочернего шаблона.
- Описание. (желательно) Что это за шаблон. Например: Мой первый дочерний шаблон. Ура!
- Автор. (желательно) Имя автора.
- Шаблон. (обязательно) имя каталога родительского шаблона с учетом регистра.
/*
Theme Name: myParentTheme Child
Theme URI: http://partneroff.pro
Description: Моя первая тема для вордпресс
Author: Ваше имя
Template: myparenttheme
Version: 0.1.0
*/
@import url("../myparenttheme/style.css");
- Узнать ширину и высоту текущего окна
- Проверить, находится ли телефон в вертикальном или горизонтальном положении
- Получить разрешение устройства, высоту и ширину экрана.
- Смартфоны — Менее 480px (С учетом Google Nexus S и ASUS Galaxy 7)
- Планшеты – от 481px до 1280px (Motorola Xoom с разрешением max 1280)
- Мониторы компьютера – 1281 px и выше
@media screen and (max-width:480px) { /* Making the headings red for smartphone users */ h1 { color: red; } } @media screen and (min-width:481px) and (max-width:1280px) { /* Making the headings Black targeting PC Users */ h1 { color:green; } } @media screen and (min-width:1281px) { /* Making the headings red for smartphone users */ h1 { color: black; } }
Проблемы и их решения
Важно иметь в виду те проблемы, с которыми вы можете столкнуться при создании адаптивного дизайна. Из-за своего гибкого содержания он отличается от статического сайта. Ниже перечислены проблемы, с которыми вы должны быть готовы столкнуться: 1- Боковая панель и виджеты Для новичка это может стать первым препятствием. Обычно, боковые панели выровнены и оформлены при помощи свойств float:left или float:right и они могут немного неточно взаимодействовать со средствами media queries. Смещениями float: left; clear: none можно задать для виджетов правильное месторасположение. 2- Меню навигации Навигация является следующей проблемой. Без корректировки она может выглядеть неестественно. Если у вас установлены эффекты при наведении на навигацию, проверьте, чтобы все хорошо работало на всех сенсорных устройствах.
Много стилистических решений будет зависеть от сложности и качества вашего шаблона, но как только вы достигнете желаемого стилистического решения, все должно быть проверено на смартфоне и планшете. Ниже показано, как все будет выглядеть после применения всех стилей.
Итоги
Адаптивный дизайн важен, так как в наши дни все в мире быстро меняется, сенсорные устройства находят более широкое распространение, а значит, их пользователи также должны получить отличный доступ к страницам вашего сайта.
Тенденции использования адаптивного дизайна становятся все более популярными, но все равно они остаются на стадии разработки. Разработчики исследуют новые способы, как сделать их более эффективными и мощными. А также они помогают всему миру, делясь своими знаниями и умениями. 
0 комментариев
Добавить комментарий
