С выходом Windows 8 в Microsoft выпустили новую дизайн-концепцию Metro UI. С момента ее появления в 2012 году этот подход в дизайне приобрел очень большую популярность благодаря своей простоте и красивому интерфейсу. В этом посте вы узнаете, как создать домашнюю страницу блога на WordPress с помощью дизайн-концепта Metro.

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

Что из себя представляет дизайн Metro?

Metro — это кодовое название последнего гида по стилю Microsoft или «языка дизайна». Хоть это и просто, минималистичный подход был представлен в некоторых программных продуктах Майкрософт (как например, Windows Phone 7 и Windows 8), а веб- и графические дизайнеры быстро внедрили это все в дизайн последней версии.

Бесспорно, наряду концептами дизайна от Google, Metro помог создать тенденцию плоского дизайна.

Хоть Wikipedia и определяет Metro как «типографский язык дизайна», можно выделить три очень важные особенности этого стиля:

  • Простота: благодаря простой площади с прямоугольными боксами и правильному использованию свободного пространства, основной особенностью Metro является простота. Большинство графических и веб-дизайнеров сейчас отдают предпочтение простому дизайну, поэтому сверх-минималистичность Metro привлекла их внимание.
  • Типография: эта особенность стала очень важным элементом в веб-дизайне, особенно после 2010 года. Сообщества дизайнеров с радостью одобрили очень смелый шаг Microsoft, когда те сделали ставку на плоский шрифт и простую типографию в противовес скевоморфизму дизайна Apple, что принесло Metro успех.
  • Красочность: одним из самых больших достижений можно считать использование "матовых" цветов. Если раньше веб-дизайн был переполнен серебряными/хром градиентами, эффектами стекла и очень яркими цветами, то с появлением Metro дизайнеры стали отдавать предпочтение более спокойным оттенкам.

Кроме этих особенностей, Microsoft выделяет еще пять основных принципов Metro-дизайна:

  1. Качество
  2. Быстрота и легкость
  3. Исключительно цифровой дизайн
  4. Быстрота создания дизайна с меньшими усилиями
  5. Неповторимость и уникальность

Небольшое примечание к названию "Metro": из-за авторских прав, Microsoft пришлось сменить название языка дизайна на «Microsoft Design Language» или «Modern Design», а приложения называются «Modern Apps» вместо «Metro Apps». Тем не менее, название прижилось среди дизайнеров. И хоть в этой статье используется, и будет использоваться определение «Metro», этот язык дизайна официально называется Modern Design.

Isotope: плагин JavaScript для создания волшебных макетов

Для создания макета домашней страницы для блога на WordPress мы используем отличный плагин от JavaScript под названием Isotope. Его опции помогут нам создать привлекательную домашнюю страницу в стиле Metro. Плагин также работает как плагин jQuery, но мы будем использовать Vanilla JavaScript.

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

Код PHP и HTML

Если бы это руководство было посвящено HTML, то мы бы использовали следующий код:

<div class="container js-isotope" data-isotope-options="{ "itemSelector": ".item", "layoutMod": "fitRows" }">
<div class="item item-blue"><a class="post-title" href="#link#">A Post About Isotope, Maybe?</a></div>
<div class="item item-double item-purple"><a class="post-title" href="#link#">WordPress is the Best!</a></div>
<div class="item item-teal"><a class="post-title" href="#link#">What Do You Think About Me?</a></div>
<div class="item item-red"><a class="post-title" href="#link#">About the Sochi Olympics Event</a></div>
<div class="item item-green"><a class="post-title" href="#link#">Help!</a></div>
<div class="item item-double item-orange"><a class="post-title" href="#link#">I Can't Come Up with Many Post Titles!</a></div>
<div class="item item-teal"><a class="post-title" href="#link#">HTML5 Rocks, I Tell Ya!</a></div>
<div class="item item-darkpurple"><a class="post-title" href="#link#">Anybody Remember Caesar 3?</a></div>
<div class="item item-skyblue"><a class="post-title" href="#link#">I Love Table.</a></div>
<div class="item item-blue"><a class="post-title" href="#link#">I Love Lamp.</a></div>
<div class="item item-double item-orange"><a class="post-title" href="#link#">I Don't Always Make Demos on CodePen...</a></div>
<div class="item item-double item-red"><a class="post-title" href="#link#">...But When I Do, They're Just Beautiful!</a></div>
</div>

Но нам нужен php-код для WordPress! Поэтому он выглядит так:

<?php
if( have_posts() ) : while( have_posts() ) :
  the_post();
  $item_class = "item";
  $double_meta = get_post_meta( get_the_ID(), 'metro-double', true );
  if( 'yes' == $double_meta ) {
    $item_class .= ' item-double';
  } $item_colors = array( 'teal', 'blue', 'purple', 'darkpurple', 'red', 'orange', 'green', 'skyblue' );
  $item_class .= ' item-' . array_rand( $item_colors ); ?>
  <div class="container js-isotope" data-isotope-options="{ "itemSelector": ".item", "layoutMode": "fitRows" }">
  <div class="<?php echo $item_class; ?>"></div>
</div>
<?php endwhile; else : ?>
<div class="container">
  <div class="item item-double item-green">
  <?php _e('Sorry, no posts matched your criteria.'); ?></div>
</div>
<?php endif; ?>

Несколько слов об этом коде:

  • Видите класс js-isotope и атрибут data-isotope-options в 10-ой строке кода? Они помогают нам инициировать плагин без использования кода JavaScript.
  • Если вы хотите выделить одну из ваших записей, тогда вы можете удвоить ее ширину, добавив ключ мета-записи metro-double и значение yes.
  • Можно добавить больше цветов в соответствующую строку кода.

Добавляем оформление CSS

*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body {background:#EEE;font-family:Segoe UI,Arial,sans-serif;}

.container {width:50em;margin:1em auto;padding:.1999em;}

.item {width:12em;height:12em;background-color:white;float:left;margin:.2em;background-size:cover;padding:1em;}
.item-double {width:24.4em;}

.item-teal {background-color:#008299;}
.item-blue {background-color:#2672EC;}
.item-purple {background-color:#8C0095;}
.item-darkpurple {background-color:#5133AB;}
.item-red {background-color:#AC193D;}
.item-orange {background-color:#D24726;}
.item-green {background-color:#008A00;}
.item-skyblue {background-color:#094AB2;}

.item-teal:hover {background-color:#00A0B1;}
.item-blue:hover {background-color:#2E8DEF;}
.item-purple:hover {background-color:#A700AE;}
.item-darkpurple:hover {background-color:#643EBF;}
.item-red:hover {background-color:#BF1E4B;}
.item-orange:hover {background-color:#DC572E;}
.item-green:hover {background-color:#00A600;}
.item-skyblue:hover {background-color:#0A5BC4;}

.item a, .item .not-found {color:#FFF;font-size:2em;line-height:1.3;text-decoration:none;display:inline-block;width:100%;height:100%;}

@media only screen and (max-width:50em) {
.container {width:100%;margin:0;}
}

Имейте ввиду: этот урок содержит основные строки кода CSS для создания макета в стиле Metro, но они могут не работать для вашего дизайна. Если вы видите, что что-то не так, тогда поэкспериментируйте немного с кодом, чтоб он работал для используемой вами темы.

JavaScript

Вы, наверное, удивитесь, но вам не нужно использовать код JavaScript! Так как мы добавили класс .js-isotope и атрибут data-isotope-options в опции плагина Isotope, то больше ничего не нужно делать. Isotope находит класс .js-isotope, получает нужные опции и работает самостоятельно.

Результат

Пример, указанный выше, является результатом применения HTML-кода, но если вы добавите PHP-код WordPress из этого урока в вашу тему (functions.php), будет то же самое.

Источник: code.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

7 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Здравствуйте! Я взял выше HTML код и CSS. Все работает. Но у меня вопрос. В заголовке написано с помощью плагина. Мне еще что то дополнительно нужно устанавливать или как? я не понимаю. Перешел в страницу isotope но не нашел там плагина. Где этот плагин? И как установить этот плагин? и еще в статье есть Vanilla java script. Объясните пожалуйста новичку.

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

Спасибо! т.е. этот код является вариантом без использования плагина. Все понятно.

Robert Garibashvili

А как сделать чтобы на фоне были миниатюры постов ( тоесть чтобы в замен цветных квадратов были картинки-миниатюры постов ) ?

firefly_can_fly

20 баксов и я раскрою этот секрет.

А бесплатно не пойдет? ;) Я тоже хочу ответ знать :)

Robert Garibashvili

Переводя на рубли это сколько будет?