Фреймворк Foundation для создания адаптивных сайтов на WordPress. Фреймворк для вордпресс


Фреймворк Foundation для создания адаптивных сайтов на WordPress

Foundation – это мощный CSS-фреймворк, который продолжительное время пребывал в тени Twitter Bootstrap, и только в последнее время пробивший себе дорогу в мир WordPress-тем. «Необычно усовершенствованный», как про него написано на сайте, обладающий поддержкой любых размеров сетки, начиная с мобильных телефонов и заканчивая телевизорами, этот фреймворк больше не может быть упущен из рассмотрения. Сегодня мы посмотрим на Foundation — издающийся по лицензии MIT фронтэнд-фреймворк, созданный компанией ZURB, Inc.

Обладая некоторыми успешными примерами использования, Foundation быстро завоевал популярность, в частности, для создания широкопрофильных сайтов, таких как Pixar или National Geographic. Этот многофункциональный, адаптивный фреймворк несет в себе ряд преимуществ, которых некоторым разработчикам не хватает в Twitter Bootstrap. Давайте сравним функциональность этих двух фреймворков, и укажем на опции, которые делают Foundation предпочтительным выбором.

Мощный CSS-фреймворк с йети в главной роли

blue-yeti1

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

Быстрое создание сайтов с помощью обновленных фронт-энд инструментов

feature-prototyping

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

Вот быстрый обзор самых примечательных особенностей Foundation:

Как сравнить Foundation с Twitter Bootstrap?

Нельзя сказать, что это война двух фреймворков, да и рассматривать их как конкурентов невозможно, учитывая, что они свободно распространяются: Bootstrap под лицензией Apache, а Foundation под лицензией MIT.

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

stars

Даже учитывая то, что у Bootstrap имеется намного более развитая экосистема, остаются некоторые весомые причины для предпочтения именно Foundation.

Быстрое сравнение:

Таблица показывает некоторые наиболее примечательные различия двух фреймворков:

quickchart

Семантические классы

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

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

Bootstrap: .span1 Foundation: .one.column

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

Классы видимости для мобильных устройств

mobile

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

К примеру, вот адаптивные классы, которые имеются в Bootstrap:

Foundation включает в себя примерно в три раза больше различных классов видимости:

Основанные на размере экрана:

 

Основанные на ориентации:

 

 

Основанные на сенсорных возможностях:

 

Основанные на возможности печати:

 

LESS против Sass

Сравнение LESS с SASS хватило бы для полноценной статьи. Ваши предпочтения в препроцессорах во многом зависят от существующих предпочтений. Sass имеет Compass, CSS-фреймворк с открытым исходным кодом, который помогает писать чистый код, область, в которой Bootstrap несколько проигрывает. Фронт-энд разработчики, обладающие навыками работы с Ruby, не столкнутся с проблемами при работе с Sass и Foundation, хотя всестороннее знание Ruby и не требуется.

Варианты использования Foundation в WordPress

Этот забытый аспект начинает набирать обороты в сообществе разработчиков тем. На самом деле, есть довольно много различных тем WordPress, основанных на Foundation, однако три следующих темы являются безусловными победителями:

Required+

required

Required+ — родительская тема для WordPress, построенная на базе Foundation. Тема очень хорошо сделана, имеет комментарии, обладает обширной документацией и примерами кода, которые позволят вам создать что-либо интересное и уникальное.

Возможности Required+ :

 

Reverie

reverie

Reverie – это универсальный адаптивный WordPress фреймворк, поддерживающий HTML5 и основанный на базе Foundation. Этот фреймворк хранит все файлы Foundation отдельно от других, таким образом, вы можете обновлять их в любое время без каких-либо проблем. Reverie использует структуру шаблонов, навеянную Roots – с циклами, отделенными от шаблонов. Также эта тема поддерживает популярные плагины, такие как bbPress и BuddyPress.

Преимущества Reverie:

WP-Foundation

wp-foundation

Простая стартовая тема, которая включает в себя список базовых возможностей, таких как:

 

Как вы можете видеть, Foundation – это прекрасный многообещающий CSS-фреймворк. Поскольку Foundation предлагает разработчикам инструменты для быстрого создания веб-сайтов, его экосистема, возможно, будет расти точно так же, как и экосистема Bootstrap. Масштабная база пользователей чаще всего влияет на прирост тем и плагинов, что открывает многочисленные варианты использования Foundation и WordPress.

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

Источник: wpmu.org

oddstyle.ru

Themosis: новый объектно-ориентированный фреймворк для разработки в WordPress

Themosis – новый объектно-ориентированный фреймворк для разработки, в данный момент находящийся в бета-версии. Фреймворк нацелен на разработчиков всех уровней квалификации, однако тем, кто обладает хорошими PHP-навыками, будет проще работать с фреймворком.

Themosis был создан Жюльеном Ламбе, разработчиком приложений, который в данный момент находится в Бельгии. Его фреймворк привносит в WordPress объектно-ориентированный подход, предлагая простой и интуитивный синтаксис. Ламбе надеется, что Themosis ускорит разработку для пользователей, исключив повторяющиеся задачи и создав общую структуру управления кодом, которая позволит разработчикам теснее взаимодействовать в команде.

Жюльен описывает свой фреймворк как «смесь лучших практик WordPress и типичного MVC-фреймворка». По существу, это обычная коллекция API. «Фреймворк Themosis был рожден, чтобы предложить разработчикам WordPress все прелести разработки в Laravel», отметил Ламбе. Следовательно, Routes API покажется достаточно простым для разработчиков в Laravel.

routes

Фреймворк включает в себя Views API, который позволяет вам определять разметку и разные секции. Также имеется механизм шаблонов Scout, который предлагает удобные хелперы для создания разных представлений. Scout – это форк механизма Blade в Laravel.

views

Themosis включает в себя класс PostType, который упрощает регистрацию и проектирование произвольных типов записей. Произвольные типы записей могут настраиваться путем передачи аргументов методу set() – по аналогии с функцией register_post_type().

custom-post-types

Ламбе создал сайт Bookstore в качестве демонстрации того, как разработчики могут проектировать веб-сайты и приложения с помощью фреймворка Themosis. Хранилище Bookstore является прекрасным примером того, как следует структурировать код приложения, а также как использовать разные API Themosis.

Если вы хотите поэкспериментировать с фреймворком, вы можете загрузить его, а также сопровождающие его плагин и тему в виде zip-файла с сайта Themosis Beta. Чтобы начать работу с фреймворком, вам нужно сначала установить Composer (для управления зависимостями Themosis) и WP-CLI.

Даже учитывая тот факт, что фреймворк до сих пор находится в бета-версии, он уже обладает хорошей документацией. Могут, конечно, встречаться некоторые неточности, поскольку API пока еще в активной разработке. Использование фреймворка на работающем сайте до его релиза 1.0 не рекомендуется. Бета в данный момент имеет версию 0.8, однако Ламбе на прошлой неделе говорил, что не планирует выпускать версию 0.9. Вместо этого фреймворк сразу получит версию 1.0 и выйдет из беты. Вы можете зарегистрироваться на сайте themosis.com, чтобы получать уведомления о запуске фреймворка.

Источник: wptavern.com

oddstyle.ru

Тема или фреймворк – что лучше?

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

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

Я намеренно использую слово «автономный» в определении темы, чтобы подчеркнуть тот факт, что тема сама по себе является чем-то оригинальным. Она не наследует свои функции ни от какой родительской темы (за исключением базовых функций WordPress). Согласно кодексу, фреймворк имеет два значения:

Фреймворк напоминает инструментарий для разработчиков – набор инструментов, которые используются дизайнерами/девелоперами для создания своей темы. Автономная тема, по сравнению с фреймворком, представляет собой готовое решение, обладающее набором возможностей, но имеющее ограниченную гибкость. Примеры автономных тем вы можете найти на сайтах WordPress.org и на рынках тем, таких как Themeforest. Эти темы могут быть легко обновлены своими разработчиками, но не сторонними дизайнерами или девелоперами. Выяснение того, где и как используется та или иная функция – слишком утомительная работа.

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

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

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

Когда лучше использовать автономную тему?

money-e1377942501720

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

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

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

Когда лучше использовать фреймворк?

Genesis-Framework

Если говорить коротко, то – во всех случаях, противоположных тем, что были указаны выше. Лидирующие на сегодняшний день фреймворки, такие как Genesis и Thesis, превосходны в плане кодирования – они следуют инструкциям по разработке тем WordPress, снабжены многочисленными функциями, отличаются улучшенной безопасностью и SEO. Невзирая на то что большая часть популярных автономных тем WordPress отличается встроенными SEO-опциями, некоторые из них недостаточно хорошо закодированы, некоторые не следуют рекомендациям WordPress и т.д. Все это можно назвать минусами автономных тем.

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

Заключение

Давайте подведем итоги. Фреймворк подойдет вам, если:

Автономная тема подойдет вам, если:

Приводите ваши мысли по этому поводу в комментариях!

Источник: www.wpkube.com

oddstyle.ru


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта