Jak zintegrować Isotope z wordpressem

Isotope to bardzo dobry plugin jQuery który pozwala na tworzenie bardzo fajnych animowanych animacji (masonry) , można je filtrować oraz sortować.  Plugin jest do ściągnięcia ze strony Isotope bezpłatny do własnego wykorzystania. ( do wykorzystania komercyjnego 25 $ , w przypadku organizacji 90 $ ). Do stworzenia tego przewodnika użyłem bardzo dobrego instruktarzu napasanego przez Alicję Ramirez Delikatnie modyfikując na swoje potrzeby.

Edytowany: 17 Kwietnia 2016

1. Ściągamy skrypt ze strony Isotope

Mamy dwa sposoby na podpięcie skryptu do naszego kodu.
1. umieszczamy link bezpośrednio do biblioteki Isotope

2. Ściągamy isotope.pkgd.js un-minified lub isotope.pkgd.min.js minified ( minified – to plik formie skompensowanej z usuniętymi niepotrzebnymi znakami dla programisty nieczytelny ale dla komputera bez znaczenia dzięki kompensacji plik jest szybciej „czytany” )

2.  Wklejam skrypt do sortowania wyświetli kategorie.

• Everything

3. Tworzę niestandardowy loop dla wyświetlanych wpisów. Każdy blok post musi mieć mieć własną „class” w moim przypadku skorzystałem z „item” . Kolejna klasa dla to „filter” ( z listy kagegori z punktu 3.

4. Dobra teraz można sprawdzić czy działa powinieneś mieć listę kategorii oraz poniżej wyświetlone posty. Należy sprawdzić za pomocą kodu źródłowego czy wszystkie „class”- (items) się zgadzają w moim przypadku miałem problem z ustawieniem w Genesis.

5. I teraz przyszła pora na podpięcie właściwego skryptu który da niezbędny efekt. Właściwym sposobem jest stworzenie pliku o nazwie np. isotope.js i umieszczenie w folderze gdzie znajdują się skrypty w szablonu wordpress. w moim przypadku ścieżka wygląda (/js/isotope.js)

jQuery(function ($) {

	var $container = $('#isotope-list'); //The ID for the list with all the blog posts
	$container.isotope({ //Isotope options, 'item' matches the class in the PHP
		itemSelector : '.item', 
  		layoutMode : 'masonry'
	});

	//Add the class selected to the item that is clicked, and remove from the others
	var $optionSets = $('#filters'),
	$optionLinks = $optionSets.find('a');

	$optionLinks.click(function(){
	var $this = $(this);
	// don't proceed if already selected
	if ( $this.hasClass('selected') ) {
	  return false;
	}
	var $optionSet = $this.parents('#filters');
	$optionSets.find('.selected').removeClass('selected');
	$this.addClass('selected');

	//When an item is clicked, sort the items.
	 var selector = $(this).attr('data-filter');
	$container.isotope({ filter: selector });

	return false;
	});

});

W moim przypadku postąpiłem trochę inaczej i zamieściłem skrypt w pliku.

6. Jeszcze zostało nadać odpowiedni wygląd za pomocą CSS

/* Start: Recommended isotope-list styles */


/*kategorie  */

#filters {
	padding: 30px;
	    margin-bottom: 10px;
}

#filters li {
    color: #999;
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
 
#filters li {
    float: left;
}
#filters li:first-child {
  margin-left: 0;
}
 
#filters li a {
    color: #555;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-bottom: none;
    font-size: 1.5rem;
    font-weight: 300;
    border-top: 4px solid #fff;
}
 
#filters li a:hover, #filters li a.selected {
    border-top: 4px solid #ff4800;
}



/* ---- grid ---- */

#isotope-list {

  margin: 0 auto; /* centrujemy */
  margin-top: 5px;
}

/* clear fix */
#isotope-list:after {
  content: '';
  display: block;
  clear: both;
}


.item 
 {
  width: 32%;
}

/* ---- .grid-item ---- */

.item {
  float: left;
  height: auto;
  width: auto
  background: #0D8;
padding: 0.25%;
  margin-left: 1%;
  margin-bottom: 1%;
}

.item img:hover {
	    transform: scale(1.09);
    -moz-transform: scale(1.09);
    -webkit-transform: scale(1.09);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
    opacity: 0.2;
   
}

#isotope-list  div h4 {
	    white-space: pre-wrap;
  
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 10px;
    padding-right: 10px;
}



/* ---- media query dla prawidłowego wyświetlania na różnych urządzeniach ---- */
@media only screen and (max-width: 880px) {
 .item 
 {
  width: 48%;
}
#isotope-list {
 margin-top: 55px;

}


@media screen and (max-width: 450px)  {
 .item 
 {
  width: 100%;
}

#isotope-list {
 margin-top: 55px;
}

6. W pliku function.php zamieszczamy funkcję odpowiedzialną za ładowanie skryptów

 
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/libs/jquery.isotope.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/css/isotope.css' ); /* dodajemy jeśli umieszczamy style  w oddzielnym pliku */

    wp_enqueue_script('isotope-init');
    wp_enqueue_style('isotope-css');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );