So fügen Sie Ihrem WordPress-Portfolio Filter hinzu

Letzten Monat habe ich Ihnen gezeigt, wie Sie eine Portfolio-Site auf WordPress erstellen, indem Sie einen benutzerdefinierten Beitragstyp, eine neue „Projekte“-Abfrage und einige neue Vorlagen verwenden.

In diesem Beitrag zeige ich Ihnen, wie Sie mithilfe der Isotope.js-Bibliothek Filter zu Ihrer Portfolio-Seite hinzufügen.

Wenn Sie es noch nicht getan haben, gehen Sie auf Ihre WordPress-Site, erstellen Sie einige Kategorien und weisen Sie sie den Artikeln in Ihrem Portfolio zu. Wenn Sie den ersten Artikel lesen, verwende ich wieder ein CPT namens „Projekte“, also muss ich für jedes Projekt, das meiner WordPress-Site hinzugefügt wird, sicherstellen, dass eine Kategorie zugewiesen wird. Auf meiner Website werden meine Projekte entweder als „Neubau“ oder „Renovierung“ kategorisiert.

Sobald Sie jedem Ihrer Projekte eine Kategorie zugewiesen haben, ist es an der Zeit, das JavaScript hinzuzufügen, das die ausgefallene Filterarbeit für Sie erledigt.

Isotope.js ist eine von David DeSandro entwickelte Layout-Bibliothek. Es ist kostenlos für Open Source und den persönlichen Gebrauch, für die kommerzielle Nutzung müssen Sie jedoch eine Lizenz erwerben. Weitere Informationen und Preise finden Sie auf der Lizenzseite.

Lassen Sie uns also die Datei isotope.js zu Ihrer Website hinzufügen. Idealerweise würden Sie dies zu einem Verzeichnis namens /js/ in Ihrem untergeordneten Design hinzufügen, um sicherzustellen, dass Aktualisierungen es niemals löschen.

Sie müssen außerdem eine weitere Datei erstellen und sie Ihrem /js/ hinzufügen. Diese Datei enthält die jQuery, die für die Ausrichtung Ihrer Projekte erforderlich ist. In meinem Beispiel habe ich diese Datei projects.js genannt.

Fügen Sie den folgenden Code in diese Datei ein und speichern Sie ihn. Die wichtigsten Dinge, die in dieser Datei zu beachten sind, sind #projects , .project-item und #filters . Dies ist die Datei, in der Sie auch layoutMode: in Mauerwerk, Packerei, ZellenBySpalte und mehr. In diesem Tutorial verwende ich den Grid-Modus.

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;

});

});

Sobald Sie diesen Code zu Ihrer Website hinzugefügt haben, ist es an der Zeit, die Dateien in die Warteschlange einzureihen. Wenn die functions.php deines untergeordneten Themes bereits eine Funktion dafür deklariert hat, musst du ihr nur eine Codezeile wie die folgende hinzufügen.

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

Beachten Sie, dass sich get_stylesheet_directory_uri() immer auf das aktuell aktive Design bezieht.
Im Fall eines benutzerdefinierten Designs oder des Szenarios, in dem Sie ein Design ohne untergeordnetes Design ändern, würden Sie wahrscheinlich get_template_directory_uri() anstelle von get_stylesheet_directory_uri()
Wenn Ihr untergeordnetes Thema nicht bereits über eine Funktion zum Einreihen Ihres Skripts verfügt, müssen Sie eine hinzufügen. Verwenden Sie Folgendes, um Ihre isotope.js -Datei einzureihen.

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

}

Eine letzte Anmerkung hier, Sie sollten sicherstellen, dass Ihr Design jQuery bereits in die Warteschlange gestellt hat. Wenn dies nicht der Fall ist, müssen Sie wp_enqueue_script('jquery'); aber ab WordPress 3.8 ist jQuery mit dem WordPress-Kern in /wp-includes/js/jquery/jquery.js .

Speichern Sie abschließend Ihre Datei functions.php .

Gehen Sie nun zurück zu Ihrer Datei projects-page.php und fügen Sie den Code hinzu, der Ihre Filter anzeigt, sowie die Anzahl der Kategorien und den Kategorienamen jedes Projekts.

Fügen Sie den folgenden Code direkt über der Stelle ein, an der Ihr Portfolio beginnt. Wie im letzten Tutorial verwende ich Bootstrap und im folgenden HTML stelle ich meine Filterzeile auf die volle Breite des Containers ein. Standardmäßig werden meine Filter links von der Spalte ausgerichtet. Wenn Sie Bootstrap nicht verwenden, möchten Sie vielleicht mit den <ul> -Tags beginnen und enden.

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

Der nächste Schritt besteht darin, die Kategorie für jedes Projekt abzurufen und sie als Klasse in den Projektcontainer einzufügen.

<?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 .'">';?>

Im obigen Code werden all , project-item und $tax jedem Projektcontainer hinzugefügt. $tax ist die Kategorie, die du ihr im wp-admin zugewiesen hast. Wenn Sie „alle“ hinzufügen, können Sie die Portfolioseite jedes Mal zurücksetzen, wenn ein Benutzer auf den Filter „alle“ klickt.

Am Ende sollte jedes Projekt eine Klasse namens „Alle“ haben und in meinem Fall wird jedes Projekt auch entweder „Neubau“ oder „Renovationen“ haben. Wenn ein Benutzer jetzt auf eine der Kategorien klickt, wird die Seite elegant neu formatiert, um nur die ausgewählte Kategorie anzuzeigen, während das Rasterlayout des Portfolios beibehalten wird.

Zusammenfassend ist Isotope.js ein sehr leistungsfähiges jQuery-Plugin, das auf jeder WordPress-Seite implementiert werden kann. Einmal installiert, kann es zum Sortieren und Filtern von Katalog-, Galerie- oder Portfolio-Layouts verwendet werden. Darüber hinaus gibt es mehrere Layoutoptionen, die Sie verwenden können. Sehen Sie sich hier alle Optionen an.

Am Ende sieht meine projects-page.php so aus, wenn sie fertig ist:

<?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(); ?>

Und damit haben Sie eine voll funktionsfähige Portfolio-Seite mit Inhaltsfilterung!

WordPress-Plugins, die Sie lieben werden

Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten! Wir haben festgestellt, dass all diese Plugins einfach zu bedienen, nicht zu leistungsintensiv auf Ihrer Website und einfach absolut zuverlässig sind.