Установка Isotope в Wordpress за 5 минут

Isotope — это прекрасное дополнение для адаптивной верстки. С помощью этого бесплатного jQuery плагина, можно при заставить блоки динамически перемещаться по странице, при изменении разрешения экрана (или размера страницы). Также можно добавить плавную CSS3 анимацию. Далее я покажу как сделать это для анонсов в Wordpress.



Установку производил для темы Twenty Twelve. Выбрал ее за адаптивность и качество (минимум ошибок верстки). Но можно использовать другие темы.

Установка:

1. Сначала закачайте файл jquery.isotope.min.js на сайт.
Файл можно скачать c github .(https://raw.github.com/desandro/isotope/master/jquery.isotope.min.js)

2. Добавьте следующий код в header.php выше тега:

<script type="text/javascript" src="http://yandex.st/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://[ваш сайт]/jquery.isotope.min.js"></script>
<script type="text/javascript"> 
  $(function(){ 
      var $container = $('#container'); 
      $container.isotope({ 
        itemSelector: '.item' 
      }); 
    }); 
</script>

В первой строке мы подключаем библиотеку jquery 1.5.2 с Яндекс Хостинга.
! Во второй — подключаем сам плагин. Тут нужно указать путь с вашего сайта (см. 1.).
Далее идет код функции обращения к классу .item

3. Добавление блока #container.

Для работы плагина, должна быть примерно такая структура документа:

<div id="container" > 
	<article class="item">   … </article>
	<article class="item">   … </article>
	<article class="item">   … </article>
	<article class="item">   … </article>
		...
</div> <!-- #container --> 

Т.е внутри блока #container должны лежать блоки с классом .item.

Чтобы этого добиться в Wordpress, нужно в файлах: index.php, archive.php, author.php, category.php, tag.php, обернуть PHP код вывода анонсов в этот див.

Примерно так:

<div id="container" > 
			<?php /* Start the Loop */ ?> 
			<?php while ( have_posts() ) : the_post(); ?> 

				<?php get_template_part( 'content', get_post_format() ); ?> 

			<?php endwhile; ?> 
</div> <!-- #container --> 

4. Далее нужно добавить класс item в блоки, которые должны динамически перемещаться.
(см. структуру в 3.)

Например в теме Twenty Twelve, в файле content.php, меняем код

post_class();

на этот:

post_class('item');

чтобы стало так

<article id="post-<?php the_ID(); ?>" <?php post_class('item'); ?> >

5. Вставьте CSS код в style.css.

#container { 
  position:relative; 
  width:100%; 
  overflow:hidden; 
} 

.item { 
  position:relative; 
  float:left; 
  overflow: hidden; 
  position: relative; 
  width: 182px; 
  height:auto; 
  margin: 0 5px 10px 5px; 

/* Дополнительные стили */ 
border-radius: 7px 7px 7px 7px; 
box-shadow: 0 0 5px #BBB; 
border: 1px solid #c3c3c3 !important; 
padding: 0.5em 0.5em 0.5em;
} 

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

6. Настройка ширины блоков:
В CSS у класса .item (см. 5.) нужно будет заменить ширину width: 195px на вашу.

Например, если ширина контейнера 660px, и мы хотим чтобы поместились 3 блока в строке, тогда подбираем ширину примерно равную 210~220px (с учетом margin'ов). Если нужно 6 блоков в строке, тогда берем примерно 100~110px (с учетом margin'ов).

7. Задание количества выводимых записей на странице.
Чтобы сетка из блоков выглядела красиво, нужно указать правильное количество записей на странице.
Если по ширине будет 3 блока, тогда укажите число, кратное трем. Например 9, 12 и т.д.
Это в меняется в админке Wordpress — пункт Параметры — Чтение.

На этом все.

Что у меня получилось:




Примеры: официальный сайт, сайт на wordpress, тема для Wordpress.

Источник: wordpress.org/support/