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

WordPress

5

В наше время создание адаптивного дизайна становится жизненно важной работой. Каждый день появляются новые мобильные устройства и смартфоны. Эта статья крайне важна для тех, кто еще не достаточно знаком с понятием адаптивного дизайна. В этом уроке мы дадим основы создания адаптивных тем оформления, работающих на медиа запросах 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.

/*
Theme Name: myParentTheme Child
Theme URI: http://great-world.ru/
Description: Моя первая тема для вордпресс
Author: Ваше имя
Template: myparenttheme
Version: 0.1.0
*/

Поясним каждую строку кода:

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

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

Версия. (желательно) Версия дочернего шаблона. Например: 0.1, 1.0 и т.д.

Заключительный шаг:

Теперь вам нужно лишь экспортировать файл стилей из родительского шаблона в дочерний. Это можно сделать по примеру, указанному ниже:

/*
Theme Name: myParentTheme Child
Theme URI: http://great-world.ru
Description: Моя первая тема для вордпресс
Author: Ваше имя
Template: myparenttheme
Version: 0.1.0
*/

@import url("../myparenttheme/style.css");

Таким образом, вы создали дочерний шаблон. Теперь активируйте его, перейдя на административной панели 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 и выше

(Примечание: Реальные значения для смартфонов и планшетов могут различаться, в зависимости от того, на какое устройство и экран вы ориентируетесь.)

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

@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;}}

Тестирование внесенных изменений

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

Стоит также проверить инструментом ScreenFly

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

Важно иметь в виду те проблемы, с которыми вы можете столкнуться при создании адаптивного дизайна. Из-за своего гибкого содержания он отличается от статического сайта. Ниже перечислены проблемы, с которыми вы должны быть готовы столкнуться:

1- Боковая панель и виджеты

Для новичка это может стать первым препятствием. Обычно, боковые панели выровнены и оформлены при помощи свойств float:left или float:right и они могут немного неточно взаимодействовать со средствами media queries. Смещениями float: left; clear: none можно задать для виджетов правильное месторасположение.

2- Меню навигации

Навигация является следующей проблемой. Без корректировки она может выглядеть неестественно. Если у вас установлены эффекты при наведении на навигацию, проверьте, чтобы все хорошо работало на всех сенсорных устройствах.

Много стилистических решений будет зависеть от сложности и качества вашего шаблона, но как только вы достигнете желаемого стилистического решения, все должно быть проверено на смартфоне и планшете. Ниже показано, как все будет выглядеть после применения всех стилей.

Итоги

Адаптивный дизайн важен, так как в наши дни все в мире быстро меняется, сенсорные устройства находят более широкое распространение, а значит, их пользователи также должны получить отличный доступ к страницам вашего сайта.

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

5 комментариев

по хронологии
по рейтингу сначала новые по хронологии

Адаптивная верстка и дизайн это конечно хорошо и современно, но если кто читает из дизайнеров мой комментарий - не рисуйте макеты свыше 1200рх по ширине, если знаете что клиент требует адаптивности.

Илья

Добрый день, подскажите пожалуйста, а как сделать наоборот, из адаптивного шаблона статичный, что-бы на всех устройствах он отображался так же как и на пк? где искать настройки, в style.css?

Здравствуйте! Статья познавательная в особенности для молодых блогов на Wordpress . В шаблонах данного движка действительно много внешних ссылок как в русских версиях, так и в иностранных. Это дело кропотливое и требует от автора внимательности.... Спасибо за статью.

Адаптивный дизайн - это очередное европейское извращение, только в этот раз над сайтами. Нормальные мобильные устройства отображают сайт корректно - тот же планшет, тот же смартфон. Пусть лучше придумают машину, которая будет одновременно и автогоночной, люкс, грузовик, автобус и паровоз.

Статья очень полезная, только вот мне кажется, что не любую тему можно сделать адаптивной. Вот у меня шапка фиксированной ширины. Наверное, проще другой шаблон поставить, более современный и адаптивный.

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Более 6 лет опыта работы

Отвечу в течении 24 часов

Минимальная сумма заказа 1000Р

Ваше сообщения отправлено
Ваше сообщения отправлено успешно