Мы посмотрим как создается готовый вордпресс шаблон, готовый для установки на хостинг. Для этого на базе файла index.htm создаются php файлы, каждый из которых отвечает за соответствующую часть вордпресс шаблона. В частности это файлы, управляющие шапкой сайта, внешним видом главной страницы, сайдбаром, архивами, страницей поиска, одиночным постом, одиночной страницей и комментариями. Сразу хочу сказать, что на этой стадии неплохо бы обладать некоторыми базовыми знаниями, в частности понимать что такое теги шаблонов.
Прежде, чем вы начнете изучать этот урок, хочу вас предупредить об одной… хм… хитрости автора урока. Когда я начала переводить этот цикл уроков, то была уверена, что на выходе мы будем иметь готовый собственноручно сделанный шаблон. Но все немного сложнее. В последнем уроке автор дал вордпресс коды не в виде текста, как в предыдущих уроках, а в виде картинок с пояснениями. А весь готовый шаблон предлагается скачать в виде готового архива за символическую плату. Я бы могла купить этот архив и выложить здесь, но я не уверена, что это легально. В общем такая ситуация. Так что c этим уроком скорее придется познакомиться исключительно в ознакомительно-обучающих целях.
Сверстанный макет сайта
Итак, в первых двух уроках мы сначала , а потом с помощью инструментов HTML и CSS . Щелкните по картинке ниже, чтобы посмотреть как выглядит сверстанный макет сайта.
Все файлы вордпресс шаблона
Теперь осталось создать вордпресс шаблон на основании сверстанного макета сайта. На картинке ниже представлен стандартный набор файлов вордпресс шаблона. В предыдущем уроке мы создали папку images
и файл style.css
. Также у нас есть файл index.htm
, из которого будут браться фрагменты кода и копироваться в соответствующие файлы php
. И уже потом в php
файлы вставляются команды вордпресса и тем самым формируются php
файлы вордпресс шаблона. 
Редактируем файл style.css
Сначала следует вставить в начало файла style.css
информацию о шаблоне. Это стандартный код, который редактируется под свои данные (название шаблона, урл, описание, информация об авторе).
Header.php
Этот файл отвечает за вывод шапки сайта. Суть такая, берется кусок кода из файла index.htm
(сверху и включая
), вставляется в файл header.php
и после этого интегрируются в код команды вордпресса. На картинке они отмечены красным. Щелкаем по картинке, чтобы посмотреть в большом размере.
Index.php
Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Аналогичным образом формируется файл index.php
. Копируется кусок кода из index.htm
и наполняется командами вордпресса. Щелкаем по картинке, чтобы посмотреть в большом размере.
Sidebar.php
Этот файл отвечает за вывод элементов в сайдбаре. Также вырезаем код из index.htm
(весь div id=»side»
) и вставляем в файл sidebar.php
. Далее, как и раньше, вставляем команды вордпресса. Щелкаем по картинке, чтобы посмотреть в большом размере.
Archive.php
Отвечает за выдачу архивных записей сайта. Чтобы создать этот файл, полностью копируем содержимое файла index.php
и вставляем в archive.php
, а потом вставляем кусок кода (7 строк) между строками и 
Search.php
Этот файл отвечает за результаты поиска. Чтобы создать этот файл, полностью копируем содержимое файла index.php
и вставляем в search.php
, а потом вставляем кусок кода (1 строка) между строками и . Смотрим как это сделано на картинке ниже. Щелкаем по картинке, чтобы посмотреть в большом размере.
Single.php
Этот файл выводит одиночный пост. Щелкаем по картинке, чтобы посмотреть в большом размере.
На этой стадии тема может быть установлена и протестирована. Можно создать несколько постов, чтобы проверить работу навигации, кнопок и ссылок.
Live Demo шаблона
Если нажать на картинку, то можно посмотреть готовый вордпресс шаблон онлайн.
PS. Постовой. А вы знаете, для того, чтобы начать делать дизайны нужно овладеть инструментами и функциями фотошопа. В этом случае вам помогут курсы фотошопа , которые дадут вам необходимый базовый уровень знаний.
От автора:
на сайте SitePoint уже было полно статей по WordPress фреймворкам, но как вы ниже убедитесь, есть еще множество фреймворков: у всех свои плюсы и минусы, у каждой темы свой стиль разработки.
Знакомство с темами-фреймворками WordPress
Я просто сидел в офисе, чесал голову и думал о фреймворках WordPress. Перед тем, как начать работу над статьей, я потратил дни, недели, даже месяцы на изучение вопроса, думая, что написать: текст должен был отличаться от всего того, что уже писали о фреймворках.
Полностью запутавшись в своих мыслях, ко мне пришло озарение. Мне пришло в голову, что когда люди пишут о фреймворках WordPress, они, как правило, рассматривают только основы… основы, на которых разработчики сообщества WordPress Meetup специализируются: фреймворки типа Genesis, Thesis или WooCommerce.
Почему так происходит? Может быть, разработчики не думают, что там все так сложно или не хотят писать о фреймворках, которые скоро перестанут разрабатываться. Или же у разработчиков жесткий дедлайн, пропустив который, сайт резко упадет в выдаче поисковых систем. Кто знает.
Я хочу сделать все по-другому, так что сядьте поудобнее и сделайте себе кофе. Сегодня мы с вами рассмотрим «полное руководство по темам-фреймворкам WordPress».
Почему же «полное»? Английское слово definition означает законченность чего-либо. Синонимом может послужить «окончательный», «финальный».
Что такое темы-фреймворки WordPress?
Перед тем, как погрузиться с головой в список, необходимо рассказать про некоторые основы фреймворков. В конце концов, может быть, вы читаете первую в своей жизни статью о фреймворках. А мне не хотелось бы напугать вас, чтобы вы ушли, не дочитав мою статью. Если же вы уже ветеран, то можете прокрутить до списка фреймворков.
Темы-фреймворки это родительские темы, в которые команда или один разработчик добавляют свой функционал, облегчающий обновление темы и ее повторное использование без воздействия на дизайн под конкретный сайт. В дочерней теме будут задаваться собственные стили, а функционал будет в основном фреймворке.
Примечание – сказанное выше не означает, что каждая родительская тема это фреймворк. Производители шаблонов предоставляют родительские темы с сотнями вариаций дочерних тем, но в другой родительской теме не используется тот же код (они говорят вам, что это фреймворки, когда чисто технически они таковыми не являются).
В репозитории WordPress со значением Темы-фреймворки связаны три понятия drop-in, stand-alone и шаблон Parent Theme. Я думаю, объяснить еще проще, чем там, в принципе невозможно. Так что советую как-нибудь вам прочитать данную статью.
В рамках нашей статьи больше внимания я уделю последнему термину «Parent Theme Templates» или шаблоны родительских тем. Этот термин известен большей части сообщества разработчиков и широкой общественности.
Различные типы тем-фреймворков
Фреймворки бывают разные, и решают они различные задачи в бизнесе и дизайне. Некоторые из них бесплатные, другие же платные.
Есть так называемые основные, универсальные фреймворки. Они не занимают какую-то конкретную нишу, а решают весь спектр задач, помогая веб-разработчикам и дизайнерам по всему миру создавать продвинутые сайты с быстрым откликом, и разработка которых занимает куда меньше времени при использовании фреймворков.
Некоторые из фреймворков делались многими годами и нескончаемыми часами разработки. Все это было нужно для создания обширного, хорошо документированного фреймворка с отличной поддержкой.
К продвинутым функциям таких фреймворков можно отнести front-end и back-end drag and drop редакторы, шорткоды, разработка под множество устройств и шаблонов.
Не удивительно, почему интернет-бизнес любит использовать фреймворки. На данный момент моим любимым является SEO Design Framework, разработан для продвижения в поисковой выдаче.
Зачем использовать фреймворки?
Хороший вопрос, зачем же используют WordPress фреймворки? Вы можете думать, что вам никогда не понадобится создавать свой фреймворк, но может быть так, что вы уже используете фреймворк, даже не догадываясь об этом. Фреймворки типа Genesis, WooFramework и Thesis сейчас настолько распространены, что вы можете просто забыть о том, что они являются частью WordPress ядра.
Разберем пример. Noel Tock разрабатывал сайты для гостиничного сектора. Создав свой фреймворк, он сильно облегчил себе задачу: теперь он мог создавать крупные сайты для заказчиков и постоянно совершенствовать и оптимизировать фреймворк с точки зрения производительности, не добавляя сторонних функций, которые его клиентам никогда не понадобятся.
Такой подход помог ему ускорить процесс разработки, а также предлагать своим клиентам более длительную поддержку. Сохраненное время можно потратить на поддержку своей команды разработчиков и изучение новых инструментов.
Было множество особенностей, которые ему было необходимо рассмотреть, таких как SEO, а также лучшие практики в разработке. Его преимущество было в том, что ему не нужно было использовать кучу плагинов для добавления необходимых предметов типа фрагментов кода, комментариев из социальных сетей и техники mobile first, так же как и создания форм рассылки email сообщений для определения потенциальных покупателей его работы и т.д.
Пользователи получили возможность с легкостью создавать свой собственный дизайн на основе текущего посредством редактирования новых файлов style.css и functions.php. Разработчику потребовалось прибегнуть к Sass, и позже его фреймворк превратился в сервис Happy Tables .
Преимущества и недостатки
Существует множество преимуществ от использования тем-фреймворков WordPress. При работе с популярными фреймворками не надо далеко ходить, чтобы увидеть активную работу разработчиков и дизайнеров на форумах и в сообществах по помощи запутавшимся пользователям.
Преимущество кода, написанного по стандартам WordPress. Такой код можно легко вставить из одного места в другое для теста плагинов и сервисов типа WP Test , Theme Authenticity Checker (TAC) и Theme Check . Некоторые ключевые особенности, которые можно отнести к преимуществам;
Упрощенная разработка на долгосрочное развитие
Встроенный функционал (меньше зависимости от плагинов)
Качество кода
Обновления
И недостатки;
Обучение
Хуки и фильтры
Чрезмерный код
Ограничения (если фреймворк не ваш)
Обновления и поддержка
Список тем-фреймворков WordPress
Порядок не важен:
WordPress Jump Start
SEO Design Framework
Cherry Framework
Options Framework Theme
UpThemes Framework
Carrington Build
Simon WP Framework
Заключение
Освоить их все практически невозможно, слишком часто выходят все новые и новые фреймворки. Если вы нашли неуказанный в списке фреймворк, в основе которого лежит настоящее определение фреймворка, а не только то, что он подходит под все темы, то укажите его в комментариях ниже.
Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.
1. Frontend блога
До того, как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы (шапка, заголовок поста, форма поиска, навигация, подвал и т. д.).
Стандартный Frontpage (index.php )
Стандартный Single (single.php )
2. Photoshop-макеты
Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем. Скачайте demo.zip , чтобы увидеть готовый файл Photoshop.
3. HTML и CSS
Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы. Следуя шагам этой инструкции, вы можете использовать мои HTML файлы GlossyBlue из demo.zip . Распаковав архив, вы увидите index.html, single.html и page.html . Далее я буду использовать их для превращения в шаблон.
Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.
4. Как работает тема WordPress
Если вы перейдёте к папке стандартной темы (wp-content/themes/default ), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css . Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php ).
Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .
5. Дублирование файлов шаблонов
Скопируйте папку HTML из GlossyBlue в папку wp-content/themes . После этого перейдите в директорию темы default , скопируйте comments.php и searchform.php в папку glossyblue .
6. Style.css
Перейдите в папку темы default
, откройте файл style.css
. Скопируйте закомментированный в начале файла текст и вставьте в style.css
темы GlossyBlue
. Если хотите, можете изменить название и данные об авторе. 
7. Разделение файлов
Теперь нам нужно понять где разделить HTML-файлы на части: header.php , sidebar.php , и footer.php . На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.
8. Header.php
Откройте index.html
. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php
. 
Перейдите в папку темы default
, откройте новый header.php
. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.
Меню навигации (wp_list_pages ) Замените тэги li в ul id=nav на ;
9. Sidebar.php
Вернитесь к index.html , вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar , поместите его в новый php-файл и сохраните как sidebar.php .
- Замените form id=searchform со всем содержимым на .
- Замените теги li категорий на
- Замените теги li архивов на
10. Footer.php
Вернитесь к index.html . Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php .
Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.
«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы)
11. Index.php
Теперь в вашем index.html
должен остаться только div id=content
. Сохраните файл как index.php
. Впишите строки: get_header
, get_sidebar
, и get_footer
в том порядке, как они встречаются в шаблоне. 
12. Разбор цикла
Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found» .
13. Копирование цикла
Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между div id=content../div . После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.
14. Предпросмотр темы
Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design , вы должны увидеть тему GlossyBlue . Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.
15. Single.php
Пришло время создать шаблон single.php . Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php , сохранив его как single.php . Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template . На следующем скриншоте отображены внесенные мною изменения:
16. Page.php
Теперь новый single.php сохраните с названием page.php . Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов .
17. Удаление файлов HTML
Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.
18. Шаблон страницы WordPress
А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:
От автора: если вы сегодня выберите для себя профессию верстальщика и решите работать в веб-студии, тогда будьте готовы к тому, что просто знаний HTML и CSS и непосредственно верстки сайтов на сегодняшний день уже недостаточно. Реалии сегодняшнего дня требуют дополнительных знаний, например верстка под WordPress или другую популярную CMS. В данной статье попробуем узнать, чем отличается верстка сайта под WordPress от просто верстки сайтов и как сделать верстку сайта на WordPress.
Что должен знать современный верстальщик?
Времена, когда верстальщику достаточно было знать только HTML и CSS уже давно прошли. Это раньше для того, чтобы устроиться работать верстальщиком, требовалось лишь умение работать с готовым макетом PSD и сверстать страницу по предоставленному макету. А были даже времена, когда достаточно было лишь знаний HTML… но это, конечно, было уже очень давно, в те времена, когда все верстали таблицами
Сейчас же, если вы откроете сайты вакансий и наберете соответствующий поисковый запрос, то увидите, что зачастую современная должность верстальщика предполагает наличие дополнительных знаний и обязанностей, которые ранее целиком и полностью возлагались на программиста. Например, это знание JavaScript и jQuery, знание основ PHP или даже MySQL, умение сделать верстку под популярные CMS. Просто знания HTML и CSS сегодня уже мало кому интересны.
Ну а поскольку WordPress является сейчас наиболее популярной CMS, то неудивительно, что многие работодатели требуют навыков работы с WordPress и умения сделать верстку WordPress. Хотя, на мой взгляд, верстка сайта под WordPress — это все же работа программиста, а не верстальщика, но, как говорится, время и реалии рынка диктуют нам свои правила, которым остается лишь следовать.
Верстка WordPress
Если вы пока еще не сталкивались с версткой сайта на WordPress, волнуетесь и задаетесь вопросом а получится ли у вас, ведь вы не программист, тогда постараюсь вас успокоить. Верстка на WordPress — не слишком сложна и зачастую потребует от вас знаний лишь основ программирования на PHP.
WordPress имеет замечательную документацию, в том числе и переводную, что значительно упрощает работу с ним и создание сайта на WordPress. Зачастую вам будет достаточно в нужном месте сверстанного вами обычного шаблона HTML вызывать функции WordPress, которые часто можно скопировать прямо из документации. Собственно, в этом и состоит по большому счету все отличие верстки под WordPress от просто верстки шаблона.
Например, перед нами стоит банальная задача — вывести на страницу записи. Согласитесь, совсем несложно загуглить простейший запрос wordpress вывод постов и прочесть в документации о цикле WordPress и использовать пример цикла из той же документации в своей верстке сайта.
Конечно, если вам нужна верстка и создание нестандартного или сложного макета, тогда без уверенных знаний WordPress и программирования все же не обойтись, но все это приходит с практикой. Сделав верстку пары-тройки несложных сайтов WordPress, вы набьете руку и уже сможете ставить для себя и реализовывать проекты посложнее, верстать сложные и нестандартные макеты WordPress.
Ну а если кому-то более удобно воспринимать информацию с экрана, то и здесь есть выбор — множество всевозможных уроков и курсов, как платных, так и бесплатных. Да далеко ходить и не нужно. Если вы ищете уроки верстки под WordPress, тогда вам безусловно пригодится . Изучив курс, вы узнаете, как сделать верстку WordPress и на практике сверстаете три разных темы для 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.
/* Theme Name: myParentTheme Child Theme URI: http://сайт/ Description: Моя первая тема для вордпресс
Поясним каждую строку кода:
- Название шаблона. (обязательно) Название дочернего шаблона.
- URI шаблона. (желательно) Веб-страница дочернего шаблона.
- Описание. (желательно) Что это за шаблон. Например: Мой первый дочерний шаблон. Ура!
- Автор. (желательно) Имя автора.
- Шаблон. (обязательно) имя каталога родительского шаблона с учетом регистра.
Внимание. Вы должны переключиться на другой шаблон, а затем вернуться обратно на дочерний шаблон, после того как внесете изменения в строку кода.
Версия. (желательно) Версия дочернего шаблона. Например: 0.1, 1.0 и т.д.
Заключительный шаг:
Теперь вам нужно лишь экспортировать файл стилей из родительского шаблона в дочерний. Это можно сделать по примеру, указанному ниже:
/* Theme Name: myParentTheme Child Theme URI: http://сайт Description: Моя первая тема для вордпресс
Таким образом, вы создали дочерний шаблон. Теперь активируйте его, перейдя на административной панели WordPress в appearance -> Themes. Надеемся, теперь вы с легкостью сможете создать дочерний шаблон.
Media Queries в CSS3
CSS3 дает много возможностей и простых способов, которыми могут воспользоваться дизайнеры и разработчики. Однако, существуют некоторые проблемы, решаемые с помощью запросов IE8. Они смогут помочь получить следующую информацию:
- Узнать ширину и высоту текущего окна
- Проверить, находится ли телефон в вертикальном или горизонтальном положении
- Получить разрешение устройства, высоту и ширину экрана.
Размеры экранов, которые будут рассмотрены в нашем руководстве
Определим существующие размеры экранов, прежде чем к программированию.
- Смартфоны - Менее 480px (С учетом Google Nexus S и ASUS Galaxy 7)
- Планшеты – от 481px до 1280px (Motorola Xoom с разрешением max 1280)
- Мониторы компьютера – 1281 px и выше
(Примечание: Реальные значения для смартфонов и планшетов могут различаться, в зависимости от того, на какое устройство и экран вы ориентируетесь.)
Ниже перечислены запросы, которые мы будем использовать для создания адаптивного шаблона. Они выглядят не сложно, но важно очень внимательно учитывать синтаксис.
@media screen and (max-width:480px) { 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- Меню навигации
Навигация является следующей проблемой. Без корректировки она может выглядеть неестественно. Если у вас установлены эффекты при наведении на навигацию, проверьте, чтобы все хорошо работало на всех сенсорных устройствах.
Много стилистических решений будет зависеть от сложности и качества вашего шаблона, но как только вы достигнете желаемого стилистического решения, все должно быть проверено на смартфоне и планшете. Ниже показано, как все будет выглядеть после применения всех стилей.
Итоги
Адаптивный дизайн важен, так как в наши дни все в мире быстро меняется, сенсорные устройства находят более широкое распространение, а значит, их пользователи также должны получить отличный доступ к страницам вашего сайта.
Тенденции использования адаптивного дизайна становятся все более популярными, но все равно они остаются на стадии разработки. Разработчики исследуют новые способы, как сделать их более эффективными и мощными. А также они помогают всему миру, делясь своими знаниями и умениями.
