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

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


Адаптивный дизайн сайта - способы реализации для блогов на WordPress.

Адаптивный дизайн современного сайта является одним из основных показателей его качества.

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

К тому же и поисковые системы ранжируют сайты, адаптированные для мобильных устройств более лояльно. Особенно это относится к ПС Google, которая прямо предъявляет к сайтам такие требования.

Что такое адаптивный дизайн сайта

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

Основными критериями оценки удобства просмотра являются:

  1. Зона просмотра.
  2. Ширина контента.
  3. Размер шрифтов, картинок, окон для видео.
  4. Активные элементы.

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

Как сделать Ваш сайт адаптивным

Для обеспечения адаптивности сайта к просмотру на устройствах с различным разрешением экрана есть несколько способов. Основными их них являются:

Как показывает опыт, наиболее оптимальным решением является создание адаптивного шаблона. Два других способа тоже решают эту проблему, но заметно уступают первому способу.

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

Но при эксплуатации добавляются действия для поддержания актуальности мобильной версии сайта, синхронизации информации с основным сайтом. Да и для СЕО продвижения добавляются дополнительные вопросы с дублями и т.п.

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

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

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

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

Адаптивная верстка сайта

Для создания адаптивного дизайна придется прибегнуть к технологии адаптивной верстки. Ее суть состоит в следующем:Сделать шаблон «резиновым»

То есть, не привязываться жестко к ширине страницы, а использовать относительные единицы. То есть сделать свой шаблон пропорционально сжимаемым, то есть «резиновым».

Для этого ширина страницы задается свойством css max-width вместо width, а уже относительно этой величины, ширину других элементов подбирают в процентах (%).

Определить «контрольные точки» ширины экрана

Определиться с контрольными точками (КТ) ширины экрана необходимо для планирования дальнейших действий.

Например.Максимальная ширина экрана 1000 пикселей. Ширина экрана планшета – 800 пикселей, смартфона – 420 пикселей.

Эти контрольные точки (КТ) могут быть разными для различных типов сайтов. Иногда достаточно одной, к примеру 600 пикселей, а качество просмотра на более мелких разрешениях обеспечивается за счет «резиновости» шаблона.

Планирование компоновки экрана для каждой КТ

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

Для этого некоторые блоки, сайдбар, например, придется разместить ниже блока основного контента, а от второстепенных блоков, таких как реклама, слайдеры, заставки можно и вовсе отказаться.

Более подробную информацию о решении таких проблем Вы можете получить, познакомившись с бесплатным курсом по адаптивному дизайну команды WebFormMySelf.

Медиа запросы

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

 

@media only screen and (max-width:520px){ .art-Header-jpeg{ height: 80%; display: none; } .art-Logo{ position: fixed; top: 10px; } .art-Logo-text{ display: none; } ........... операторы css ..... }

Адаптивный шаблон для блогов на WordPress

Адаптивный шаблон для своего блога на WordPress можно обеспечить несколькими способами.

  1. Установить соответствующий плагин.
  2. Купить готовый адаптивный шаблон.
  3. Адаптировать существующий шаблон самостоятельно или заказать услугу специалисту.

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

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

Короче я остановился на третьем варианте и решил адаптировать свой шаблон самостоятельно.

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

Ознакомившись с принципами адаптации дизайна для мобильных устройств, я бодро приступил к делу, но почувствовал, что моих знаний по html, css, php недостаточно.

И уже начал склоняться к покупке готового шаблона, но в этот момент получил информацию о курсе двух Андреев Бернацкого и Кудлая «WordPress-Мастер от Личного блога до Премиум шаблона». Один из блоков этого курса содержал уроки по адаптации готового шаблона для мобильных устройств.

Цена на курс была сопоставима с ценой нового современного адаптивного шаблона. И я решил потратить эту сумму на приобретение курса и получить вместо готового шаблона – знания. Считаю. Что вложение было правильным и себя полностью оправдало.

Кому интересно этот курс – пройдите по этой ссылке. Но сначала начните с бесплатного, тоже много полезных материалов.

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

Если сжато описать проделанную работу, то я сделал следующее:

  1. Отказался от фиксированной ширины страницы. Использовал max-width вместо width.
  2. Определил ширину отдельных элементов – основного контента, сайдбара, шапки, меню, подвала в % относительно ширины страницы.
  3. Оставил только правый сайдбар. А информацию с левого сайдбара перенес в правый. В предыдущей версии у меня на блоге было два сайдбара – слева и справа от блока контента.
  4. Создал контрольную точку 520 пикселей и прописал в ней необходимые изменения.

Проверил результаты адаптации на Google и получил от него положительную оценку и даже похвалу.Проверка сервиса Google

Правда для этого пришлось добавить в файл header.php описание метатега viewport. Иначе никак. Вот как выглядит описание:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Сервисы проверки отображения сайта на мобильных устройствах

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

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

Перечислю те, которые использовал сам в своей работе.

Сервис Google по проверки удобства отображения для мобильных устройств — https://www.google.com/webmasters/tools/mobile-friendly/

Сервис Google по проверки скорости загрузки сайта для мобильных и стационарных устройств — https://developers.google.com/speed/pagespeed/insights/Здесь же нам дают рекомендации по мероприятиям для ускорения загрузки Вашего сайта.

Хотел кратко описать еще несколько сервисов. но наткнулся на толковую подробную статью и решил не напрягаться, а дать Вам ссылку на нее — http://habrahabr.ru/post/189726/.

Если эта публикация Вам пришлась по душе, то поделитесь ею с Вашими друзьями в социальных сетях.Можете дополнить статью своими комментариями.

 

Полезные Материалы:

inetmkt.ru

Как адаптировать шаблоны для WordPress. Адаптивные шаблоны WordPress

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

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

Для начала, пожалуй, стоит остановиться на самом понятии адаптивный сайт, адаптивный шаблон и выяснить, почему сегодня важно делать адаптивные шаблоны. Здесь на самом деле все крайне просто. Мы живем в такое время, когда настольная стационарная аппаратура уверенным и стремительным шагом переходит в планшеты и смартфоны. Время, когда даже ноутбуки смещаются на второй план… А значит, растет спрос на сайты под планшетные и мобильные устройства.

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

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

Думаю, вопрос адаптивной верстки для WordPress — вопрос вполне очевидный. При этом не только для веб-мастеров, но и для владельцев сайтов. Уже часто одним из требований при заказе темы WordPress можно услышать пожелание иметь адаптивную тему WordPress. Если речь идет о премиум шаблоне, то здесь точно без вариантов. Современная премиум тема WordPress фактически априори должна быть адаптирована для просмотра с различных типов устройств.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Как же адаптировать шаблоны для WordPress? Все очень просто — нам нужны медиа-запросы. Медиа-запросы — это основной механизм и способ сделать адаптивную верстку. Принцип их работы достаточно прост: тот или иной медиа-запрос сработает ровно для той ширины (или, точнее, диапазона ширины) экрана, для которой он написан. Ну а внутри медизапроса мы пишем необходимые нам стилевые правила, которые будут оформлять тот или иной элемент сайта для соответствующей ширины.

Простейший пример. У нас есть двухколоночный сайт, который на мобильных устройствах должен превращаться в одноколоночный. Решить задачу крайне просто. Для получения двух колонок для десктопных устройств мы, как обычно, используем свойство float, задавая обтекание колонок. Ну а на нужной нам ширине окна браузера мы просто сбросим float, используя значение none. Примерно так:

@media only screen and (max-width : 767px) { .sidebar{ float: none; } }

Как видим, мы просто поместили обычное стилевое правило внутрь конструкции медиа-запроса. Теперь это правило сработает только для ширины окна браузера меньше 768 пикселей.

Как вы понимаете, все медиа-запросы и правила для них помещаются в файл стилей темы или в отдельный файл стилей, который необходимо подключить к шаблону WordPress. Да, и самое главное. Чтобы медиа-запросы работали и шаблон получился адаптивным, нужно не забыть поместить в шапку сайта (как правило, это шаблон header.php темы) следующую строку кода:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

На этом у меня все. Удачи!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

webformyself.com

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

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

В данной статье мы рассмотрим создание адаптивного шаблона для WordPress. К преимуществам описанного метода верстки относится его легкость и SEO-оптимизированность. Данный дизайн используется и на сайте SEO-PRAKTIKA.COM.

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

Создаем адаптированный шаблон

Самый простой способ сделать адаптированный дизайн для WordPress и любого другого движка – это создание шаблона из одной колонки, ширина которой определяется в процентах. В этом случае сайт будет состоять из трех последовательно идущих друг за другом DIV-ов, расположенных сверху («шапка»), в середине («основной контент») и внизу экрана («футер»).

Однако такой способ верстки подходит далеко не всем, так как он имеет массу недостатков, главный из которых – невозможность разместить в сайдбаре (который попросту отсутствует, лол) рекламные блоки и прочую служебную информацию. Поэтому мы будем делать шаблон для WordPress, состоящий из двух колонок.

Код шаблона будет состоять из основных четырех блоков (DIV) – один в «шапке» сайта (header), второй – для основного контента (conternt), третий – для сайдбара (sidebar) и четвертый (footer) – для футера. Основная сложность состоит в том, чтобы при открытии на мобильных устройствах с маленькими экранами сайдбар не отнимал место у основного контента, делая его прочтение невозможным, а съезжал вниз, под него.

Поместим на страницу DIV, который будет служить контейнером для всего остального контента. В его свойствах пропишем:

#container { max-width: 1200px; margin: 0 auto; position: relative; }

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

Добавляем внутрь «контейнера» остальные блоки. В итоге у вас должно получиться следующее:

<div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Блок clear необходим для того, чтобы прижать футер к низу.

В файле CSS пропишем

#header { width:100%; //«шапка» занимает всю ширину экрана; больше 1200 пикселей она не займет, так как блок header помещен внутри DIV container с max-width 1200px. height:90px; //высота равна 90 пикселям } #content { float: left; //обтекание по левому краю width:75%; //ширина блока } #sidebar { float: right; // обтекаем блок content справа width:25%; // ширина } #clear{ // блок, необходимый для прижатия «футера» к низу clear: both; //запрет обтекания справа и слева; запрет блокам content и sidebar обтекать блок справа и слева float: none; // запрет обтекания height: 10px; } #footer { position: absolute;  //абсолютное позиционирование bottom: 0; //расстояние снизу равно нулю left: 0; // расстояние слева равно нулю width: 100%; // как и header занимает всю ширину экрана height: 80px; // высота }

Итак, верстка «дивами» выполнена, однако остался еще одна проблема. При просмотре на маленьких экранах мобильных устройств, содержащий не особо важную информацию блок sidebar будет отнимать место основного контента. Это очень неудобно для пользователей: читать итак приходится на небольшом дисплее, так еще и основной контент занимает не весь экран. А инструмент от Google PageSpeed Insights найдет в мобильной версии сайта множество ошибок.

Поэтому добавляем вниз файла CSS

@media screen and (max-width: 600px) { #content { width:100%; } #sidebar { width:100%; }

Таким образом, при ширине устройства менее 600 пикселей блоки content и sidebar будут размещаться другом за другом, занимая 100% от ширины экрана. Это стало возможным, благодаря появлению в CSS3 поддержки технических свойств гаджетов, на которых отображается сайт.

Подобный адаптированный дизайн можно использовать для верстки шаблонов различных CMS, включая не только WordPress. Посмотреть на то, как будет выглядеть шаблон можно по ссылке. В примере есть некоторые отличия от приведенного кода: во-первых, для наглядности у блоков content и sidebar добавлена высота, во-вторых, у каждого отображаемого DIV прописан background (фон). Вы можете попробовать поменять размеры ширины бразуера, чтобы увидеть, как меняется верстка страницы, в зависимости от разрешения.

seo-praktika.com

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

Как сделать адаптивный шаблон для сайта на 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.

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

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

Версия. (желательно) Версия дочернего шаблона. Например: 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- Меню навигации

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

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

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

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

как скопировать дизайн сайта

как обучиться веб дизайну

как сделать дизайн квартиры студии

apldes.ru

Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта