Как сделать адаптивный шаблон для сайта на WordPress

В наше время создание адаптивного дизайна становится жизненно важной работой. Каждый день появляются новые мобильные устройства и смартфоны. Эта статья крайне важна для тех, кто еще не достаточно знаком с понятием адаптивного дизайна. В этом уроке мы дадим основы создания адаптивных тем оформления, работающих на медиа запросах CSS3. Эта статья поможет вам лучше понять суть адаптивного дизайна и как он работает. Тенденции очень изменчивы. Все сайты с громкими именами, ориентированы на работу через мобильные устройства. Итак, давайте ознакомимся с тем, что такое адаптивные шаблоны.

Что такое адаптивные шаблоны и почему они так важны?

Тенденции использования адаптивных шаблонов становятся популярными как никогда. И это неспроста. Широкое распространение смартфонов и планшетов для доступа в интернет влияет на важность использования адаптивных шаблонов. Что же такое адаптивный шаблон? Отзывчивость шаблона позволяет дизайну сайта адаптироваться в разных по размерам экранах. Он автоматически подбирает разрешение и определяет, на каком устройстве отображается сайт, на мониторе компьютера, планшете или смартфоне. Разработчики всеми силами стараются сделать шаблоны адаптивными, чтобы улучшить его пользовательский интерфейс и время загрузки. Это означает, что используется серия определенных запросов CSS3, которые магическим образом оптимизируют страницу вашего сайта. Фиксированная ширина не всегда сможет отображаться правильно. А значит, надо будет использовать адаптивность. Перед началом работ необходима подготовка. Не все настолько сложно, сначала нужно проработать элементы дизайна и учесть специфику работы адаптивного шаблона. Если быть честным, вы должны неплохо знать основы создания шаблонов wordpress. Создание первого дочернего шаблона Будет хорошо, если вы в первую очередь создадите дочерний шаблон, пускай это и не обязательно, однако рекомендовано. Если вы не знаете, что такое дочерний шаблон, вы можете прочитать о нем здесь. Дочерние шаблоны – это не очень распространенный, но замечательный функционал WordPress. Это способ сохранять настройки вашего шаблона, даже если ваш родительский шаблон будет изменен. Каждый, даже с очень поверхностными знаниями HTML и CSS сможет изменить цвета в шаблоне. Здесь мы дадим небольшой урок на тему, как сделать дочерний шаблон для вашего текущего шаблона WordPress. Шаг первый: Создайте новую папку mythemechild в директории wp-content/themes. Предположим, что ваш шаблон называется myparenttheme. Конечно, вы можете назвать дочерний шаблон так, как пожелаете. Это не имеет значения, но желательно использовать название, которое будет похожим на название основного шаблона, например, если у вас шаблон назван abc, назовите дочерний шаблон abc-child. Шаг второй: Добавление styles.css является обязательным условием при создании дочернего шаблона. Создайте файл styles.css в папке с дочерним шаблоном. Кроме того, вы можете добавить в эту папку файл functions.php другие файлы шаблона. Шаг третий: В файле styles.css дочернего шаблона mythemechild одним из основных условий является добавление заголовка. Ниже приведен пример заголовка, который делает дочерний шаблон рабочим для WordPress. Поясним каждую строку кода:

• Название шаблона. (обязательно) Название дочернего шаблона.
• URI шаблона. (желательно) Веб-страница дочернего шаблона.
• Описание. (желательно) Что это за шаблон. Например: Мой первый дочерний шаблон. Ура!
• Автор. (желательно) Имя автора.
• Шаблон. (обязательно) имя каталога родительского шаблона с учетом регистра.

Внимание. Вы должны переключиться на другой шаблон, а затем вернуться обратно на дочерний шаблон, после того как внесете изменения в строку кода. Версия. (желательно) Версия дочернего шаблона. Например: 0.1, 1.0 и т.д. Заключительный шаг: Теперь вам нужно лишь экспортировать файл стилей из родительского шаблона в дочерний. Это можно сделать по примеру, указанному ниже: Таким образом, вы создали дочерний шаблон. Теперь активируйте его, перейдя на административной панели WordPress в appearance -> Themes. Надеемся, теперь вы с легкостью сможете создать дочерний шаблон. Media Queries в CSS3 CSS3 дает много возможностей и простых способов, которыми могут воспользоваться дизайнеры и разработчики. Однако, существуют некоторые проблемы, решаемые с помощью запросов IE8. Они смогут помочь получить следующую информацию:

1. Узнать ширину и высоту текущего окна
2. Проверить, находится ли телефон в вертикальном или горизонтальном положении
3. Получить разрешение устройства, высоту и ширину экрана.

Размеры экранов, которые будут рассмотрены в нашем руководстве Определим существующие размеры экранов, прежде чем к программированию.

1. Смартфоны — Менее 480px (С учетом Google Nexus S и ASUS Galaxy 7)
2. Планшеты – от 481px до 1280px (Motorola Xoom с разрешением max 1280)
3. Мониторы компьютера – 1281 px и выше

(Примечание: Реальные значения для смартфонов и планшетов могут различаться, в зависимости от того, на какое устройство и экран вы ориентируетесь.) Ниже перечислены запросы, которые мы будем использовать для создания адаптивного шаблона. Они выглядят не сложно, но важно очень внимательно учитывать синтаксис. Тестирование внесенных изменений Очень важно то, что после добавления каждого запроса query, вы сможете проверить результаты. Для тех, у кого есть смартфон и планшет, тестирование проводить гораздо удобнее. Но есть и другой удобный инструмент для тестирования — ScreenFly от quirktools. Мне нравиться этот инструмент за его точность и простоту использования. С помощью него можно проверить отображение сайта практически на любых основных устройствах и экранах. Стоит также проверить инструментом ScreenFly

Проблемы и их решения

Важно иметь в виду те проблемы, с которыми вы можете столкнуться при создании адаптивного дизайна. Из-за своего гибкого содержания он отличается от статического сайта. Ниже перечислены проблемы, с которыми вы должны быть готовы столкнуться: 1- Боковая панель и виджеты Для новичка это может стать первым препятствием. Обычно, боковые панели выровнены и оформлены при помощи свойств float:left или float:right и они могут немного неточно взаимодействовать со средствами media queries. Смещениями float: left; clear: none можно задать для виджетов правильное месторасположение. 2- Меню навигации Навигация является следующей проблемой. Без корректировки она может выглядеть неестественно. Если у вас установлены эффекты при наведении на навигацию, проверьте, чтобы все хорошо работало на всех сенсорных устройствах. Много стилистических решений будет зависеть от сложности и качества вашего шаблона, но как только вы достигнете желаемого стилистического решения, все должно быть проверено на смартфоне и планшете. Ниже показано, как все будет выглядеть после применения всех стилей. Итоги Адаптивный дизайн важен, так как в наши дни все в мире быстро меняется, сенсорные устройства находят более широкое распространение, а значит, их пользователи также должны получить отличный доступ к страницам вашего сайта. Тенденции использования адаптивного дизайна становятся все более популярными, но все равно они остаются на стадии разработки. Разработчики исследуют новые способы, как сделать их более эффективными и мощными. А также они помогают всему миру, делясь своими знаниями и умениями.