Адаптивный дизайн медленно, но верно становится ожидаемым стандартом для веб-разработчиков. Из этого туториала вы узнаете, как добавить адаптивный фреймворк в вашу следующую тему WordPress.
Что такое адаптивный дизайн?
Раньше вам приходилось беспокоиться только о согласованности веб-сайтов в нескольких браузерах, но теперь нам нужно взглянуть на более общую картину — согласованность между несколькими устройствами. Раньше компьютер был нашим единственным выходом в Интернет, но теперь мы подключаемся к интернету со своих телефонов, телевизоров, планшетов, и кто знает, что еще случится. В этом году одним из главных приоритетов должно стать правильное отображение и работа вашего сайта на любом устройстве.
Адаптивный дизайн — это то, что делает вещи плавными и подстраивается под размер экрана. Хотя WordPress не всегда хорошо сочетается с адаптивными методами проектирования, есть способы, которые могут быть достигнуты. То, насколько быстро вы решите сделать свой сайт, зависит от того, сколько времени вы хотите тратить на это.
Отзывчивые рамки
Есть несколько адаптивных рамок на выбор. Возможно, вы захотите потратить некоторое время на изучение каждого из них, чтобы определить, какие функции включены в ваш проект. Если вы не уверены, с чего начать, вот некоторые из них, чтобы рассмотреть:
начальная загрузка
Bootstrap от Twitter построен на 12-колоночной адаптивной сетке. Он включает в себя макеты с фиксированной шириной и шириной жидкости, основанные на этой системе. Он также поставляется с поддержкой дополнительных плагинов JavaScript, таких как карусель изображений, Typeahead, переключаемые вкладки и многое другое.
Меньше рамок
Less Framework основан на 4 макетах и 3 наборах типографских пресетов. Less Framework использует макет по умолчанию в качестве отправной точки, а затем использует медиазапросы CSS3 для кодирования «дочерних макетов».
Фонд
Основа — это сеточная система, основанная на 12 столбцах, которые не имеют фиксированной ширины; они могут варьироваться в зависимости от разрешения экрана или размера окна. Foundation поставляется с кнопками и встроенными стилями форм, оповещениями и многим другим.
YAML
YAML — это многостолбцовый макет, основанный на сетке с процентной шириной. Он поставляется с несколькими встроенными функциями и поддерживает несколько плагинов jQuery, таких как Accessible Tabs и SyncHeight.
Этот список фреймворков едва ли полон, но ради этого урока я покажу вам, как включить Foundation в вашу следующую тему WordPress.
Шаг 1 Загрузка и применение фреймворка
Для начала загрузите Foundation и добавьте файлы в папки css и js в каталоге вашей темы. Самый простой способ добавить необходимые файлы в вашу тему — использовать wp_enqueue_script и wp_enqueue_style .
В этом уроке я покажу вам, что вы помещаете в файл functions.php, чтобы заставить Foundation работать с нуля, но для получения более подробной информации о добавлении файлов таким способом ознакомьтесь с уроком о том, как включить JavaScript и CSS в твоя тема .
Чтобы добавить необходимый JavaScript для правильной работы Foundation в вашей теме, вам нужно создать функцию, которая вызывает wp_enqueue_script для их обслуживания.
|
01
02
03
04
05
06
07
08
09
10
11
|
function responsive_scripts_basic()
{
//register scripts for our theme
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 );
|
Затем добавьте таблицы стилей Foundation, чтобы сделать сетку гибкой. Вставьте эту функцию после той, которую вы только что создали.
|
1
2
3
4
5
6
7
8
9
|
function responsive_styles()
{
//register styles for our theme
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
Все любят делать все возможное, чтобы все работало в Internet Explorer, верно? Чтобы ваша платформа Foundation работала в Internet Explorer, вам нужно добавить несколько условных выражений. Они должны находиться в вашем файле header.php перед закрывающим тегом head.
<! - [if lt IE 9]> <link rel = "stylesheet" href = "/ css / ie.css"> <[ENDIF] -> <! - IE Fix для HTML5-тегов -> <! - [if lt IE 9]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <[ENDIF] - >>
Шаг 3 Работа с платформой
Теперь, когда ваша тема имеет настройку Foundation, вы можете использовать все ее адаптивные функции, которые вам необходимо разработать с использованием системы сетки Foundation. Как и другие адаптивные платформы, это система, состоящая из 12 столбцов. Другие включенные функции — это предустановленные стили кнопок, вкладки, таблицы и многое другое. Ознакомьтесь с документацией Фонда, чтобы просмотреть все навороты и инструкции о том, как работать с сеткой.
Идем с предварительно упакованной темой
Существует множество бесплатных и премиальных тем WordPress, которые используют адаптивный дизайн. Если вы хотите начать с чего-то из коробки, вы можете попробовать эти темы:
Загрузчик WordPress, По 320Press
WordPress Bootstrap — это тема, разработанная в Twitter Bootstrap v.2.0.1. Он полностью адаптирован к четырем различным шаблонам страниц, шорткодам и нескольким опциям боковой панели. После установки вы можете зайти на bootswatch.com, чтобы загрузить разные цветовые версии темы.
iTheme2
Основанный на платформе Themify, iTheme2 использует медиа-запросы для таргетинга на разные дисплеи, поставляется с настраиваемым ползунком функций, виджетом социальных сетей, двумя различными темами оформления, и вы можете иметь до четырех виджетов нижнего колонтитула.
Отзывчивый Двадцать Десять
Тема Responsive Twenty Ten поддерживает гибкие изображения, поля и мобильные изображения. Он был создан как детская тема для включенной темы «Двадцать десять».
Хороший Минимальный (Премиум)
Good Minimal — это чистый, минималистичный адаптивный макет, который адаптируется к множеству дисплеев и устройств. Good Minimal поставляется с двумя различными стилями, поддерживает неограниченное количество пользовательских боковых панелей, шорткоды, несколько раскрывающихся меню и некоторые другие функции.
Модуло (Премиум)
Modulo — это отзывчивый, гибкий макет, поддерживающий шрифты Google, шорткоды, несколько слайдеров, шаблоны страниц портфолио и настройку цвета. Modulo также поставляется с 5 пользовательскими виджетами, в том числе один для последних сообщений с поддержкой миниатюр.
Вывод
Адаптивный дизайн продолжает расти в популярности, и знание того, как использовать его в рамках вашей будущей тематической конструкции, будет иметь решающее значение для успеха. Независимо от того, добавляете ли вы фреймворк к своей теме или используете предварительно созданную тему, поддерживающую адаптивный дизайн, ваши клиенты будут ожидать поддержки нескольких устройств в качестве базовой услуги.
Являются ли темы, которые вы создаете, отзывчивыми? Используете ли вы адаптивные рамки, которые мы не упомянули? Расскажите нам все об этом в комментариях ниже!
Если вам нужна помощь в создании адаптивного дизайна сайта WordPress, попробуйте заказать одну из простых и экономичных услуг WordPress в Envato Studio . Эти опытные провайдеры быстро и без хлопот примут ваш дизайн и превратят его в отзывчивый сайт WordPress!
