Как сделать адаптивным шаблон wordpress. Верстка шаблона Wordpress из HTML макета

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

В этом уроке мы дадим основы создания адаптивных тем оформления, работающих на медиа запросах 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- Меню навигации

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

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

Итоги

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

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

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

Добрый день. Скорее всего Вы уже не один раз слышали о том, что поисковик Google стал обращать внимание на то, как сайт смотрится на мобильных устройствах. И если дизайн не адаптирован, то такой сайт ранжируется хуже. А это не есть хорошо. Поэтому, сегодня я хочу рассказать Вам о том, что такое адаптивная верстка и как её реализовать на WordPress сайте.

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

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

Буквально неделю назад, просидев пару дней за компьютером, я наконец-то сделал правильное и качественное отображение данного блога на всех моб.устройствах. Можете убедиться в этом сами, зайдя на эту статью (либо на любую другую) через, к примеру, смартфон.

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

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

• Отдельный сайт/версия
• Технология RESS
• Адаптивная верстка

Разбирать каждый способ мы не будем, т.к. в этом нет никакой необходимости. Лично для себя я выбрал 4 способ, то есть адаптивную верстку, поэтому именно о ней и пойдет речь в данной статье. Сразу хочется предупредить что для адаптации сайта Вам понадобятся хотя бы минимальные знания html, css и веб-дизайна.

Хотя, в любом случае Вы можете обратиться за помощью к специалистам, в том числе ко мне.

Адаптивная верстка своими руками

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

В чем же вся прелесть адаптивного дизайна?

Нет необходимости создавать новый/отдельный дизайн.

Нет необходимости создавать отдельный сайт.

Относительно простое внедрение.

Google любит адаптивные сайты 🙂

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

Но перед тем, как мы пойдем «ковыряться» в стилях, необходимо зайти в файл header.php и в тег вписать следующий важный мета-тег, позволяющий устройству подстроить ширину сайта под размеры экрана:

Сейчас, для начала, мы сделаем адаптацию контейнера (div"а), в котором отображаются все элементы сайта, шапку и подвал, а остальное оставим на следующую часть статьи.

Так вот, в первую очередь нам нужно сделать анализ шаблона и собрать некоторые данные, а именно определить идентификатор нужного блока и его первоначальную ширину. Для этого я рекомендую использовать функцию «Просмотр кода элемента» в Chrome или «Панель разработчика» в FireFox — очень удобно. Я буду использовать первый вариант и возьму тестовый шаблон, который ещё не адаптирован и буду показывать всё на нем.

Как мы видим из изображения выше, в моем случае контейнер так и называется «#container» и имеет ширину 960px.

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

@media screen and (max-width:960px) { содержание запроса }

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

После этого нам нужно вписать новые показатели блоков, чтобы они подстраивались под разрешения шириной менее 960px. Все очень просто! Для начала вместо текста «содержание запроса» впишите следующее:

Img {max-width: 100%; height: auto;} /*адаптация изображений*/ #container {width: 100%; height: auto;} /*адаптация контейнера*/

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

Так вот, сохраняем файл Style.css, обновляем сайт и видим следующее:

То есть, как мы видим из скриншота выше, сайт автоматически сжался до нужной ширины экрана, в моем случае 662px. Здорово, не так ли? А если ничего не произошло, то рекомендую прописать правило!important для ширины контейнера, то есть получится:

#container {width: 100%!important; height: auto;} /*адаптация контейнера*/

Для проверки адаптация я использую функцию той же панелью «Просмотр кода элемента».

Так же, после адаптация контейнера Ваш сайт может начать отображаться неправильно. Может съехать шапка, сайдбар, подвал и т.д. — это нормально! Потому что необходимо проводить данную операцию практически со всеми элементами сайта.

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

Но об этом мы будем говорить с Вами в следующих статьях из цикла «Адаптивная верстка сайта на WordPress». А сейчас в файле со стилями у Вас должно получится:

@media screen and (max-width:960px) { img {max-width: 100%; height: auto;} /*адаптация изображений*/ #container {width: 100%; height: auto;} /*адаптация контейнера*/ }

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

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

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

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

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

Фреймворки для создания адаптивного дизайна

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

Bootstrap от Twitter основан на 12 -колонночной адаптивной модульной сетке. Он включает в себя резиновые и статичные шаблоны. Дополнительно фреймворк поддерживает такие JavaScript -плагины, как: Image Carousel , Typehead , Togglable Tabs и многие другие.

Less Framework основан на 4 шаблонах и 3 наборах типографических пресетов. Less Framework использует основной шаблон в качестве отправной точки, а затем создаёт “дочерние” с помощью CSS3 медиа-запросов.

Foundation – это модульная система, основанная на 12 колоннках, не имеющих фиксированной ширины. Размеры колонок меняются в зависимости от разрешения экрана или размера окна браузера. В комплект этого фреймворка входит набор кнопок, встроенные стили форм и многое другое.

YAML имеет многоколоночную разметку, основанную на модульной сетке с шириной, заданной в процентном соотношении. Этот фреймворк также имеет небольшой встроенный функционал и поддерживает несколько jQuery -плагинов, как: Accessible Tabs и SyncHeight .

Шаг 1-ый: Скачивание и установка фреймворка

Для начала скачайте Foundation и добавьте его файлы в css — и js -папки, находящиеся в директории темы WordPress . Самый простой способ добавить необходимые файлы к Вашей теме – использовать и .

Чтобы добавить 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" / >

Шаг 2-ой: Добавление условий IE Only

Все просто обожают прилагать дополнительные усилия для того, чтобы всё работало в Internet Explorer , не так ли? Чтобы быть уверенным в том, что фреймворк Foundation будет корректно работать в Internet Explorer , Вам нужно добавить несколько условных операторов. Этот блок кода нужно поместить в файл header.php перед закрывающим тегом head .

< ! -- [ if lt IE 9 ] > < link rel = "stylesheet" href = "/css/ie.css" > < ! [ endif ] -- >>

Шаг 3-ий: Работа с фреймворком

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

Использование готовых тем

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

Worpress Bootstrap – это тема разработанная на фреймворке Bootstrap от Twitter . Она имеет 4 различных шаблона страниц на выбор и несколько вариантов боковой панели. Дизайн этой темы полностью адаптивный. После установки, Вы можете посетить bootswatch.com и выбрать любую из цветовых схем темы.

Основана на фреймворке Themify . Она использует медиа запросы для адаптации к разным экранам. В комплекте с темой идёт настраиваемый слайдер, виджет для социальных сетей и два разных цветовых решения.

Тема Responsive Twenty Ten поддерживает резиновые изображения, отступы и изображения для мобильных устройств. Она была создана на основе темы Twenty Ten .

(Платный шаблон)

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

(Платный шаблон)

Modulo – адаптивный, резиновый шаблон, поддерживающий google fonts , несколько слайдеров, страницу портфолио и настройку цветовой гаммы. Он поставляется с 5 виджетами, один из которых отображает последние посты с миниатюрами.

Выводы

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

А Вы создаёте темы с адаптивным дизайном? Может быть, Вы используете фреймворк, который был упомянут? Сообщите об этом в комментариях.

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

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

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

Cherry Framework от TemplateMonsterНесмотря на свою короткую историю, Cherry Framework успел заслужить много положительных отзывов.

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

Ключевые особенности Cherry:

• Независимая модульная структура позволяет использовать компоненты Cherry в отдельности, как самостоятельные инструменты. Tom J. Nowell из команды Automattic убежден, что подобной возможностью должен обладать каждый приличный фреймворк;
• Редактор и набор шорткодов , позволяющих добавлять различные объекты в любое место страницы;
• Возможность фиксировать положение элемента (логотипа, меню или поисковой строки) относительно верхнего или нижнего колонтитулов;
• Минимизатор CSS - инновационный инструмент, позволяющий объединить CSS из разных файлов в один и минимизировать его для ускорения загрузки;
• Backup Option - очень удобная опция, позволяющая «откатиться» в предыдущее состояние, если вас не устроил результат редактирования;
• Механизм плагинов, обеспечивающий быстрое решение различных задач. Это добавление слайдшоу, боковых панелей и различных типов заметок - для отзывов , портфолио и т.п.;
• Совместимость с инструментами сторонних разработчиков;
• Адаптивность и WPML-совместимость - два жизненно необходимых на сегоднящний день функционала, позволяющих создавать многоязычные сайты, адаптированные к любым устройствам, от смартфонов до ПК.

Hybrid Core от ThemeHybridHybrid Core легкий в установке и настройке фреймворк , который позволяет разрабатывать сложные проекты, не прибегая к большим объемам кодирования. Он совместим со стандартом Schema, что обеспечивает хорошую SEO оптимизацию . Кроме этого, в Hybrid Core присутствует много функций, значительно упрощающих труд разработчика. Среди них такие, как:

• Навигационная цепочка («хлебные крошки»), прекрасно работающая на любых страницах, включая сообщения произвольного типа.
• Исправленная и оптимизированная версия шорткода , предоставляющая полный контроль над галереей изображений
• Media Grabber - функция, позволяющая захватывать любой медиаконтент (в том числе из заметки) и использовать его в любом месте сайта.
• сообщений, позволяющий создавать заготовки для различных типов заметок, не ограничиваясь страницы в целом.
• Расширение стандартной функции постраничной разбивки, позволяющее управлять разбивкой материала на странице результатов поиска, архивированных страниц и пр.
• Автоматическая загрузка средств поддержки многоязычности как для родительских, так и для дочерних тем.

Gantry от RocketThemeGantry - это попытка профессионалов из RocketTheme объединить все их достижения в разработке тем для Wordpress в единый фреймворк. И попытка, надо сказать, весьма удачная. Построенный с использованием динамической сетки, этот весьма легкий фреймворк поддерживает SCSS, CSS и LESS.

Взгляните на перечень основных особенностей Gantry:

• Менеджер разметки предоставляет полную свободу в разработке макета.
• Система управления контентом, позволяющая создавать, редактировать и публиковать материалы.
• Визуальный конструктор меню, поддерживающий многоуровневые меню и создание пунктов меню с иконками.
• Мегаменю позволяет создавать нестандартные выпадающие меню, где в качестве подпунктов могут выступать не только ссылки, но и любой html – таблицы, формы, списки, отформатированный текст
• Интерфейс администратора, созданный с использованием Ajax, и работающий с невероятной быстротой.
• Мощный обработчик шаблонов Twig.
• А еще Gantry может похвастаться YAML-ориентированным конфигуратором, скользящими боковыми панелями, мощными возможностями наследования и набором всевозможных иконок и шрифтов.

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

Основные особенности Runway:

• Генератор тем, предназначенный для создания, копирования и редактирования тем.
• Конструктор тем - предназначен для создания админпанелей и записей нестандартного (пользовательского) типа.
• Модульная структура, позволяющая добавлять требуемую функциональность при помощи плагинов буквально в один клик.

Wonderflux от Jonny AllbutЕще один фреймворк с открытым исходным кодом в нашей подборке - Wonderflux. Качественный продукт, который позволит вам сэкономить время разработки, при этом нисколько не потеряв эффективности.

Ключевые особенности Wonderflux:

• Динамическая разметка , обеспечивающая адаптацию темы к любым размерам экрана.
• Гибкие параметры разметки, которые можно изменять «на лету».
• Коллекция из более чем 100 шорткодов , позволяющая внедрить в тему код или контент любого типа
• Административные настройки, обеспечивающие легкую конфигурацию сайта.
• Совместимость с плагинами Wordpress позволяет решить практически любую поставленную задачу
• Валидатор кода, обеспечивающий соблюдение веб стандартов, что является непременным условием качественной SEO оптимизации.

Unyson от ThemeFuseUnyson - функционально богатый фреймворк, предназначенный как для разработчика, так и для дизайнера. Позволяет редактировать frontend сайта или блога из административной панели, причем имеет окно предварительного просмотра, в котором можно сразу же оценить внесенные изменения.

Ключевые особенности:

• Конструктор страниц с поддержкой технологии drag-and-drop .
• Content Demo Install - Расширение, позволяющее отображать контент именно так, как он выглядит при редактировании.
• Более 20 параметров, упрощающих создание контейнеров, вкладок и форм для админпанели
• Динамические боковые слайд-панели , которые могут настраиваться индивидуально для каждой страницы.
• Автоматическое резервное копирование непосредственно из админпанели. Возможно регулярное копирование по расписанию (ежедневно, еженедельно, ежемесячно и т.д.).
• Навигационные цепочки (a.k.a. «хлебные крошки»), добавляющие простую и понятную навигацию
• Модуль слайд-шоу, поддерживающий как фото- так и видеоконтент.

Конечно же, это не полный перечень всех возможностей Unyson. Следует упомянуть также специальные модули для SEO , контактные формы , портфолио, календарь событий, звездный рейтинг , интеграцию с социальными сетями и Flickr.

PressWorkБесплатный Wordpress фреймворк, созданный с использованием HTML5 и CSS3 и ориентированный на широкий круг пользователей - разработчиков, дизайнеров, блогеров.

Вот некоторые его особенности:

• Редактор Front-End - возможность редактирования frontend при помощи редактора с поддержкой drag-and-drop.
• Набор плагинов, расширяющих базовую функциональность фреймворка для решения конкретной задачи.
• Media Queries - модуль, отвечающий за оптимальный внешний вид на любых устройствах.
• Присутствие в комплекте PSD-файлов для редактирования темы, например, изменения логотипа или графических элементов.

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

Ключевые особенности:

• Фреймворк создан на базе ZURB Foundation и наследует всю его гибкость и мощь.
• HTML5 и hNews microformat обеспечивают ясный, понятный и легко воспринимаемый код. Для HTML5 тэгов можно использовать пользовательские функции Wordpress.
• Имеет механизмы адаптации к размеру экрана, так что выглядит одинаково хорошо и на смартфонах и на ПК.
• Следует концепции минимализма, предлагая только два виджета и два пользовательских меню.
• При необходимости внести изменения в дизайн предлагается непосредственное редактирование SCSS и пользовательского CSS.

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

VafpressС Vafpress создание административной (backend) части Wordpress темы становится легким, как никогда.

Для этого в распоряжении разработчика имеются:

• Скрипт управления загрузкой, позволяющий загружать только необходимые блоки, не перегружая frontend излишним кодом.
• Поддержка различных типов полей: текстовых, списков со множественным выбором, флажков (checkbox), переключателей (radiobutton) и других
• Мощный конструктор многоуровневых меню. Для построения использует XML, который затем можно преобразовать в массив PHP.
• Metabox Builder - позволяет записывать metabox в массивы PHP.
• Поддержка групп повторяющихся полей.

UnderscoresНекоторые разработчики считают Underscore полноценным фреймворком, хотя некоторые, в том числе сами авторы, позиционируют свой продукт как некую тему-прародительницу для создания законченных тем. Как бы там ни было, использование Underscores позволит существенно сэкономить время и усилия, затраченные на разработку тем для Wordpress.

Основные особенности Underscore:

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

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