Создание тем WordPress с помощью адаптивных фреймворков. Что такое адаптивная верстка для мобильной версии? Боковая панель и виджеты

От автора: на сайте 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

Заключение

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

Интернет всё больше становиться мобильным. Уже сейчас на некоторых моих сайтах доля мобильного трафика превышает 40%. К тому же Гугл и даже Яндекс заявляли, что в мобильной выдаче предпочтение отдают тем сайтам, которые правильно отображаются на мобильных устройствах. Так что если кто этого ещё не сделал самое время задуматься над удобством пользования вашим сайтом для данной аудитории. Именно поэтому я решил сделать адаптивный шаблон для данного блога — сайт, но при этом не менять его совсем, а просто максимально быстро и просто переделать уже существующий. Заодно и проверим даст ли это рост трафика. Как оказалось это сделать совсем не сложно, достаточно внести мелкие изменения в код и всё доступно прямо из админки WordPress.

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

Приступим…

Секреты адаптивной вёрстки

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

1

Это прописываем в шапке сайта, в нашем случае это файл header.php, найти который мы можем в админке, пункты меню Внешний вид => Редактор.


Дальше практически все основные элементы сайта с конкретно заданной шириной делаем резиновыми, то есть ширину лучше задавать процентах. Хотя, конечно, можно прописывать конкретную ширину блока для конкретной ширины экрана. В этом нам поможет правило @media . Оно позволяет прописывать в css-файле отдельные стили одному и тому же элементу при разной ширине экрана. Я решил совместить: полностью десктопную версию не менять, а для конкретных экранов задать ширину блоков в процентах.
Например, ширина сайта у меня по умолчанию 1180 пикселей. И я в конце css-файла стилей (редактировать который можно также через админку, как и предыдущий) я дописал правило:

1 2 3 4 5 6

@media only screen and (max-width : 1200px ) { #page { margin : 10px auto ; width : 98% ; } }

@media only screen and (max-width: 1200px){ #page { margin: 10px auto; width: 98%; } }

Которое делает, при ширине экрана меньше 1200 пикселей, ширину блога 98%.

Дальше у меня есть две колонки: слева с основным текстом ширина которой 660 пикселей и правая – сайтбар, ширина которого 300 пикселей. Поэтому я тоже добавил правило, которое также делает их резиновыми, но только при ширине монитора меньше 1030 пикселей.

1 2 3 4 5 6 7 8 9

@media only screen and (max-width : 1030px ) { #primary { width : 65% ; } #secondary { width : 32% ; } }

@media only screen and (max-width: 1030px){ #primary { width: 65%; }#secondary { width: 32%; } }

1 2 3 4 5 6 7

@media only screen and (max-width : 760px ) { #primary , #secondary { width : 95% ; float : none ; margin : 10px auto ; } }

@media only screen and (max-width: 760px){ #primary, #secondary { width: 95%; float: none; margin: 10px auto; } }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media only screen and (max-width : 480px ) { .blog .entry-image , .search .entry-image , .archive .entry-image { float : none ; margin : 0px auto ; width : 90% ; } .entry-image img { height : auto ; width : 100% ; } }

@media only screen and (max-width: 480px){.blog .entry-image, .search .entry-image, .archive .entry-image { float: none; margin: 0px auto; width: 90%; }.entry-image img { height: auto; width: 100%; }}

Вот уже практически и всё – мы имеем адаптивный шаблон WordPress, который корректно отображается на всех устройствах, можно, конечно, ещё поиграться со шрифтами и отступами – где-то увеличить, где-то уменьшить. Также у вас могут быть и другие блоки сайта, ширину которых вам нужно изменить. Проверить всё можно просто сидя у себя за компьютером сделав меньше ширину вашего браузера. Также мне в подобной работе очень помогает дополнение к Firefox – Firebug , рекомендую обязательно его освоить, если планируете работать с кодом сайта.

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

Адаптивное меню сайта

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

• Часть скрывать, а часть показывать;
• Делать выпадающий список;
• Ничего не делать.

Скрыть – это не проблема, просто при данной ширине, для данного блока пишем display: none и всё, но вот чтобы потом показать придётся дописать небольшой скрипт. Таких скриптов в Интернете можно найти море и на javascript и на jquery, я покажу тот, который поставил себе. И вставил так же в header.php:

1 2 3 4 5 6 7 8

< script language= "JavaScript" type= "text/JavaScript" > function showmobmenu() { if (document.getElementById ("mobmenu2" ) .style .display == "block" ) { document.getElementById ("mobmenu2" ) .style .display = "none" } else { document.getElementById ("mobmenu2" ) .style .display = "block" } }

function showmobmenu() { if (document.getElementById("mobmenu2").style.display == "block") {document.getElementById("mobmenu2").style.display = "none"} else {document.getElementById("mobmenu2").style.display = "block"} }

То есть мне пришлось в код сайта, перед меню, ещё вставить ссылку с картинкой, которая по умолчанию скрыта, а при ширине 480 и меньше показывается, ну и при клике по ней раскрывается всё меню.

Png" alt="Мобильное меню">

А также изменить свойство float для пунктов меню:

1 2 3 4 5 6 7 8 9 10

@media only screen and (max-width : 480px ) { #mobmenu2 { display : none ; } #mobmenu { display : block ; } .main-navigation li { float : none ; } }

@media only screen and (max-width: 480px){ #mobmenu2{ display: none; } #mobmenu { display: block; } .main-navigation li { float: none; } }

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

1 2 3 4

@media only screen and (min-width : 481px ) { #mobmenu2 { display : block !important; } }

@media only screen and (min-width: 481px){ #mobmenu2{ display: block !important; } }

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

Ну, вот и всё, теперь уже точно имеем удобный адаптивный дизайн WordPress. Конечно же, эти же правила подойдут для адаптации практически любого сайта на любом движке. Гугл теперь говорит, что данный блог имеет 99 из 100 по удобству пользования для мобильных устройств.


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

Если у вас уже был подобный опыт, то делитесь им в комментариях. Ну, и все вопросы также можно задать там…

На сегодня адаптивную верстку имеет доля 10-20% всех сайтов. 21 апреля 2015 года Google «обрадовал» веб-мастеров, занимающихся сайтостроением, и владельцев ресурсов сообщениями на почту, где сервис предупреждал о неудобстве использования для мобильных устройств. И дальше следовало, что поисковая система отказывается от индексирования таких страниц. Для многих это стало частичной потерей потока посетителей из мобильного интернета.

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

Что такое адаптивная верстка для мобильной версии?

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

Работа над созданием адаптивного веб-дизайна начинается с проверки на сервисах Google. Обычно сервис выдает перечень доработок, которые необходимо выполнить для перехода на мобильную версию. При адаптивной верстке на WordPress изменения вносятся в css-файлы, а внутри header.php в части head прописывается мета-тег с атрибутом viewport, позволяющий подстроить содержимое интерфейса под размер экрана.

Удобство этого метода - не нужно создавать новый сайт, следить за наполнением, заново проводить seo-оптимизацию. Однако, возникают проблемы с отображением в разных браузерах, элементы в некоторых из них начинают «ехать». Требуется тонкая настройка css стилей.

Плагины на WordPress для адаптации сайта

Специально для WordPress создатели разработали бесплатные плагины, помогающие перейти, например, MobilePress, Duda Mobile Website Builder. Их можно скачать с официального сайта.

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

Адаптивные шаблоны WordPress

Найти качественные адаптивные шаблоны для веб-мастера не займет много времени, однако потребует знания основ HTML и CSS. Шаблон для работы легко скачивается и переделывается на свое усмотрение.

Достоинства:

• Легко установить и настроить. При желании можно найти даже премиум-шаблоны бесплатно;
• Проверенные шаблоны поддерживают кроссбраузерность;
• Огромное количество в интернете;
• Не потребуется много времени, чтобы перейти на адаптивный дизайн.

Недостатки:

• Придется полностью менять старый на новый;
• Внутри встречаются закодированные ссылки автора или на другие сайты.

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

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

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

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

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

Итоги

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

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

Создавая тему для 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.

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