Jak dodać filtry do swojego portfolio WordPress?

W zeszłym miesiącu pokazałem ci, jak stworzyć witrynę portfolio na WordPressie, używając niestandardowego typu posta, nowego zapytania „projekty” i kilku nowych szablonów.

W tym poście pokażę, jak dodawać filtry do strony portfolio za pomocą biblioteki Isotope.js.

Jeśli jeszcze tego nie zrobiłeś, przejdź do swojej witryny WordPress, utwórz kilka kategorii i przypisz je do elementów w swoim portfolio. Jeśli przeczytałeś pierwszy artykuł, ponownie używam CPT o nazwie „Projekty”, więc dla każdego projektu dodanego do mojej witryny WordPress muszę się upewnić, że przypisana zostanie kategoria. Na mojej stronie moje projekty będą sklasyfikowane jako „Nowa budowa” lub „Remonty”.

Gdy już przypiszesz kategorię do każdego ze swoich projektów, nadszedł czas, aby dodać JavaScript, który wykona za Ciebie fantazyjne filtrowanie.

Isotope.js to biblioteka układów opracowana przez Davida DeSandro. Jest bezpłatny do użytku otwartego i osobistego, jednak do użytku komercyjnego należy zakupić licencję. Zapoznaj się ze stroną dotyczącą licencji, aby uzyskać więcej informacji i cen.

Dodajmy więc plik isotope.js do Twojej witryny. Najlepiej byłoby dodać to do katalogu o nazwie /js/ w motywie potomnym, aby upewnić się, że aktualizacje nigdy go nie usuną.

Musisz także utworzyć jeszcze jeden plik i dodać go do katalogu /js/ . Ten plik będzie zawierał jQuery potrzebne do kierowania projektów. W moim przykładzie nazwałem ten plik projects.js .

Wklej następujący kod do tego pliku i zapisz go. Kluczowe rzeczy, o których należy pamiętać w tym pliku, to #projects , .project-item i #filters . Jest to plik, w którym możesz również zmienić layoutMode: na masonry, packery, cellByColumn i inne. W tym samouczku używam trybu siatki.

jQuery(function ($) {

// initialize Isotope after all images have loaded

var $container = $('#projects').imagesLoaded( function() { //The ID for the list with all the blog posts

$container.isotope({ //Isotope options, 'item' matches the class in the PHP

itemSelector : '.project-item',

grid: {

columnWidth: 200

}

});

});

 
//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;

});

});

Po dodaniu tego kodu do witryny nadszedł czas na umieszczenie plików w kolejce. Jeśli w pliku functions.php Twojego motywu potomnego została już zadeklarowana funkcja, która to robi, wystarczy dodać do niego wiersz kodu, taki jak ten poniżej.

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

Uwaga, get_stylesheet_directory_uri() zawsze odnosi się do bieżącego aktywnego motywu.
W przypadku niestandardowego motywu lub scenariusza, w którym zmieniasz motyw bez motywu podrzędnego, prawdopodobnie użyjesz get_template_directory_uri() zamiast get_stylesheet_directory_uri()
Jeśli Twój motyw potomny nie ma jeszcze funkcji kolejkowania skryptu, musisz ją dodać. Użyj poniższych instrukcji, aby umieścić plik isotope.js w kolejce.

add_action( 'wp_enqueue_scripts', 'child_scripts');

function child_scripts(){

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

}

Ostatnia uwaga: upewnij się, że Twój motyw ma już w kolejce jQuery. Jeśli nie, musisz dodać wp_enqueue_script('jquery'); ale od WordPress 3.8, jQuery jest spakowane z rdzeniem WordPress w /wp-includes/js/jquery/jquery.js .

Na koniec zapisz plik functions.php .

Teraz wróć do pliku projects-page.php i dodaj kod, który będzie wyświetlał Twoje filtry, a także uzyskaj liczbę kategorii i nazwę kategorii każdego projektu.

Wklej następujący kod tuż powyżej miejsca, w którym zaczyna się Twoje portfolio. Podobnie jak w poprzednim samouczku, używam Bootstrap i w poniższym kodzie HTML ustawiam wiersz filtra na pełną szerokość kontenera. Domyślnie moje filtry zostaną wyrównane do lewej strony kolumny. Jeśli nie używasz Bootstrapa, możesz zacząć i zakończyć tagami <ul> .

<div id="filter-row" class="row">
<div id="project-page" class="col-lg-12">
		<ul class="nav navbar-nav navbar-left" id="filters">
			<?php
				$terms2 = get_terms("project_categories"); // This will go get all the categories
				$count = count($terms2); //This counts the number of categories
				echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">Show All</a></li>';
				if ( $count > 0 ){
				foreach ( $terms2 as $term ) {
												$termname = strtolower($term->name);								$termname = str_replace(' ', '-', $termname);
	echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
	}
}
// in the above foreach loop, the code will return all the values stored in $terms2 array.

 ?>
		</ul>
	</div>
</div>

Następnym krokiem jest pobranie kategorii dla każdego projektu i umieszczenie jej w kontenerze projektu jako klasy.

<?php
/*
Get the category for each unique post using the post ID
*/
$terms = get_the_terms( $post->ID, 'project_categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
	foreach ( $terms as $term ) {
	$links[] = $term->name;
	}
	$tax_links = join( " ", str_replace(' ', '-', $links));
	$tax = strtolower($tax_links);
	else :
	$tax = '';
	endif;

	$terms = get_the_terms( $post->ID, 'project_categories' );
?>

<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>

W powyższym kodzie all , project-item i $tax są dodawane do każdego kontenera projektu. $tax będzie kategorią, którą przypisałeś do niego w wp-admin . Dodanie „wszystkie” pozwala zresetować stronę portfolio za każdym razem, gdy użytkownik kliknie filtr „wszystkie”.

W końcu każdy projekt powinien mieć klasę o nazwie „wszystkie”, a w moim przypadku każdy projekt będzie miał również „nową konstrukcję” lub „remonty”. Teraz, gdy użytkownik kliknie jedną z kategorii, strona zostanie elegancko przeformatowana, aby wyświetlić tylko wybraną kategorię, przy zachowaniu układu siatki portfolio.

Podsumowując, Isotope.js to bardzo potężna wtyczka jQuery, którą można zaimplementować na dowolnej witrynie WordPress. Po zainstalowaniu można go używać do sortowania i filtrowania układów katalogów, galerii lub portfolio. Ponadto istnieje wiele opcji układu, których można użyć. Sprawdź wszystkie opcje tutaj.

Na koniec, oto jak wygląda mój projects-page.php po zakończeniu:

<?php
/* This is my Projects Portfolio page */

get_header(); 

?>
<div id="content-full-width" class="page-wrap">
    <div class="container content-wrapper">
        <div class="row">
            <div id="content-projects" class="page-wrap2">
	    <div class="container content-wrapper">
	<!-- ============ CONTENT START ============ -->
	        <section id="project-content">
		<div id="intro" class="row">
		    <div class="col-sm-12 text-center">
			<?php while ( have_posts() ) : the_post(); ?>
			<?php the_content() ?>
			<?php endwhile; // end of the loop. ?>
		    </div>
		</div>
	            <div id="filters-row" class="row">
		    <div id="project-page" class="col-lg-12">
		        <ul class="nav navbar-nav navbar-left" id="filters">
			<?php
			$terms2 = get_terms("project_categories");
			$count = count($terms2);
			echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
			if ( $count > 0 ){
			    foreach ( $terms2 as $term ) {									    $termname = strtolower($term->name);
			    $termname = str_replace(' ', '-', $termname);
			echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
			}
		} ?>
		    </ul>
		</div>
	        </div>
	    <div id="projects" class="row">
	<!-- Start projects Loop -->
		<?php  /* Query the post   */
	$args = array( 'post_type' => 'projects', 'posts_per_page' => -1, 'orderby'=>'menu_order','order'=>'ASC' );
	$loop = new WP_Query( $args );
	while ( $loop->have_posts() ) : $loop->the_post();
/* Pull category for each unique post using the ID */
	$terms = get_the_terms( $post->ID, 'project_categories' );
	if ( $terms && ! is_wp_error( $terms ) ) :
	   $links = array();
	       foreach ( $terms as $term ) {
	       $links[] = $term->name;
		}
	       $tax_links = join( " ", str_replace(' ', '-', $links));
	       $tax = strtolower($tax_links);
		else :
		$tax = '';
	endif;
	<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
              <a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?>
    </div><!-- End Projects Row -->
</div><!-- End Container -->
<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

A dzięki temu będziesz mieć w pełni działającą, filtrującą zawartość stronę portfolio!

Wtyczki WordPress, które pokochasz

Pobierz ten ebook, aby zobaczyć listę naszych najbardziej polecanych wtyczek dla programistów! Odkryliśmy, że wszystkie te wtyczki są proste w użyciu, nie mają zbyt dużej wydajności w Twojej witrynie i są po prostu niezawodne.