Содержание
Адаптивный дизайн медленно, но уверенно становится стандартом для веб-разработчиков. В этом уроке мы покажем Вам, как интегрировать фреймворк для создания адаптивного дизайна в тему для WordPress, созданную Вами.
Что такое адаптивный дизайн?
Раньше нам приходилось беспокоиться лишь о том, чтобы сайт поддерживал все самые популярные браузеры, а сейчас нужно смотреть шире – сайт должен прекрасно просматриваться на разных платформах и устройствах. Ещё недавно компьютер был для нас единственной точкой доступа в интернет, но теперь мы заходим в онлайн с помощью наших мобильных телефонов, телевизоров, планшетов и др. В наши дни сайт должен отлично выглядеть и работать на любом электронном устройстве.
Адаптивный дизайн основан на создании резиновых макетов и подстраиваемых компонентов, которые изменяются в зависимости от размера экрана. Несмотря на то, что WordPress плохо “дружит” с методами адаптивного дизайна, существуют способы это сделать. Насколько адаптированным будет дизайн Вашего сайта? Это напрямую зависит от того, сколько времени Вы готовы потратить на его создание.
Фреймворки для создания адаптивного дизайна
Есть несколько хороших фреймворков на выбор. Вероятно, Вы захотите провести немного времени, изучая каждый из них подробнее, чтобы определить, какой из них подходит для Вашего проекта. Если Вы не знаете с чего начать, то обратите внимание на фреймворки описанные ниже:
BOOTSTRAP
Bootstrap от Twitter основан на 12-колонночной адаптивной модульной сетке. Он включает в себя резиновые и статичные шаблоны. Дополнительно фреймворк поддерживает такие JavaScript-плагины, как: Image Carousel, Typehead, Togglable Tabs и многие другие.
LESS FRAMEWORK
Less Framework основан на 4 шаблонах и 3 наборах типографических пресетов. Less Frameworkиспользует основной шаблон в качестве отправной точки, а затем создаёт “дочерние” с помощьюCSS3 медиа-запросов.
FOUNDATION
Foundation – это модульная система, основанная на 12 колоннках, не имеющих фиксированной ширины. Размеры колонок меняются в зависимости от разрешения экрана или размера окна браузера. В комплект этого фреймворка входит набор кнопок, встроенные стили форм и многое другое.
YAML
YAML имеет многоколоночную разметку, основанную на модульной сетке с шириной, заданной в процентном соотношении. Этот фреймворк также имеет небольшой встроенный функционал и поддерживает несколько jQuery-плагинов, как: Accessible Tabs и SyncHeight.
Список фреймворков вряд ли можно считать оконченным. Однако сейчас мы покажем Вам, как интегрировать фреймворк Foundation в тему WordPress.
Шаг 1-ый: Скачивание и установка фреймворка
Для начала скачайте Foundation и добавьте его файлы в css— и js-папки, находящиеся в директории темы WordPress. Самый простой способ добавить необходимые файлы к Вашей теме – использоватьwp_enqueue_script и wp_enqueue_style.
В этом уроке мы покажем Вам, как нужно отредактировать файл functions.php для корректной работы Foundation. Для получения более подробной информации о добавлении файлов в Вашу тему прочитайте урок how to include JavaScript and CSS in your theme.
Чтобы добавить JavaScript-файлы для корректной работы Foundation, Вам нужно создать функцию, которая вызывает wp_enqueue_script.
function responsive_scripts_basic()
{
//регистрируем скрипты в нашей теме
wp_register_script('foundation-mod', get_template_directory_uri() . '/js/modernizr.foundation.js', array( 'jquery' ), true );
wp_register_script('foundation-main', get_template_directory_uri() . '/js/foundation.js', true );
wp_register_script('foundation-app', get_template_directory_uri() . '/js/app.js', true );
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'foundation-app' );
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic', 5 );
Теперь нужно добавить CSS-файлы фреймворка Foundation, чтобы модульная сетка стала резиновой. Вставьте эту функцию сразу после той, которую Вы только что создали.
function responsive_styles()
{
//регистрируем стили
wp_register_style( 'foundation-style', get_template_directory_uri() . '/css/foundation.css', array(), 'all' );
wp_register_style( 'foundation-appstyle', get_template_directory_uri() . '/css/app.css', array(), 'all');
wp_enqueue_style( 'foundation-style' );
wp_enqueue_style( 'foundation-appstyle' );
}
add_action( 'wp_enqueue_scripts', 'responsive_styles' );
После сохранения изменений вернитесь к странице Вашего сайта и проверьте исходники, чтобы убедиться в том, корректно ли добавлены файлы. Вы должны увидеть примерно следующее:
<link rel='stylesheet' id='foundation-style-css' href='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/foundation.css?ver=all' type='text/css' media='all' /> <link rel='stylesheet' id='foundation-appstyle-css' href='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/app.css?ver=all' type='text/css' media='all' /> <script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script> <script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/modernizr.foundation.js?ver=1'></script> <script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/foundation.js?ver=3.3.1'></script> <script type='text/javascript' src='http://thatonegeek.com/sandbox/wp-content/themes/Starkers/js/app.js?ver=3.3.1'></script>
Шаг 2-ой: Добавление условий IE Only
Все просто обожают прилагать дополнительные усилия для того, чтобы всё работало в Internet Explorer, не так ли? Чтобы быть уверенным в том, что фреймворк Foundation будет корректно работать в Internet Explorer, Вам нужно добавить несколько условных операторов. Этот блок кода нужно поместить в файл header.php перед закрывающим тегом head.
<!--[if lt IE 9]> <link rel="stylesheet" href="/css/ie.css"> <![endif]--> <!--IE Fix for HTML5 Tags--> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->>
Шаг 3-ий: Работа с фреймворком
Теперь, когда Ваша тема настроена под Foundation, Вам нужно создать шаблон, используя модульную сетку этого фреймворка для использования всех его возможностей. Модульная сетка Foundationсостоит из 12 колонок. Этот фреймворк включает пресеты стилей для кнопок, табов, таблиц и многого другого. Подробную инструкцию по работе с фреймворком Вы найдёте в документации Foundation.
Использование готовых тем
Существует множество бесплатных, так и платных тем для WordPress, использующих адаптивный дизайн. Если Вы захотите начать с чего-то готового, то попробуйте вот эти темы:
WORDPRESS BOOTSTRAP, BY 320PRESS
Worpress Bootstrap – это тема разработанная на фреймворке Bootstrap от Twitter. Она имеет 4различных шаблона страниц на выбор и несколько вариантов боковой панели. Дизайн этой темы полностью адаптивный. После установки, Вы можете посетить bootswatch.com и выбрать любую из цветовых схем темы.
ITHEME2
iTheme2 основана на фреймворке Themify. Она использует медиа запросы для адаптации к разным экранам. В комплекте с темой идёт настраиваемый слайдер, виджет для социальных сетей и два разных цветовых решения.
RESPONSIVE TWENTY TEN
Тема Responsive Twenty Ten поддерживает резиновые изображения, отступы и изображения для мобильных устройств. Она была создана на основе темы Twenty Ten.
GOOD MINIMAL (ПЛАТНЫЙ ШАБЛОН)
Good Minimal – чистый, минималистский адаптивный шаблон, который легко приспосабливается ко множеству дисплеев и устройств. Он поставляется с двумя различными стилевыми оформлениями, поддерживает неограниченное количество пользовательских виджетов, несколько выпадающих меню, а также ряд других функций.
MODULO (ПЛАТНЫЙ ШАБЛОН)
Modulo – адаптивный, резиновый шаблон, поддерживающий google fonts, несколько слайдеров, страницу портфолио и настройку цветовой гаммы. Он поставляется с 5 виджетами, один из которых отображает последние посты с миниатюрами.
Выводы
Адаптивный дизайн с каждым днём становится всё популярнее. Умение использовать его будет иметь решающее значение для успеха. Можно использовать фреймворк для своих тем или пользоваться готовыми адаптивными темами. В скором времени адаптивный дизайн для тем WordPress станет стандартом.
А Вы создаёте темы с адаптивным дизайном? Может быть, Вы используете фреймворк, который был упомянут? Сообщите об этом в комментариях.
