Cum să adăugați filtre în portofoliul dvs. WordPress

Luna trecută, v-am arătat cum să creați un site de portofoliu pe WordPress folosind un tip de postare personalizat, o nouă interogare „proiecte” și câteva șabloane noi.

În această postare, vă voi arăta cum să adăugați filtre la pagina dvs. de portofoliu folosind biblioteca Isotope.js.

Dacă nu ați făcut-o deja, accesați site-ul dvs. WordPress, creați câteva categorii și atribuiți-le articolelor din portofoliu. Dacă citiți primul articol, folosesc din nou un CPT numit „Proiecte”, așa că pentru fiecare proiect adăugat pe site-ul meu WordPress, va trebui să mă asigur că o categorie este atribuită. Pe site-ul meu, proiectele mele vor fi clasificate fie ca „Construcții noi”, fie „Renovari”.

Odată ce ați atribuit o categorie fiecăruia dintre proiectele dvs., este timpul să adăugați JavaScript care va face munca de filtrare elegantă pentru dvs.

Isotope.js este o bibliotecă de layout dezvoltată de David DeSandro. Este gratuit pentru sursă deschisă și uz personal, cu toate acestea, pentru uz comercial, trebuie să achiziționați o licență. Vă rugăm să consultați pagina de licență pentru mai multe informații și prețuri.

Deci, să adăugăm fișierul isotope.js pe site-ul dvs. În mod ideal, ați adăuga acest lucru într-un director numit /js/ în tema copilului pentru a vă asigura că actualizările nu îl șterg niciodată.

De asemenea, trebuie să creați încă un fișier și să-l adăugați în directorul dvs. /js/ . Acest fișier va conține jQuery necesar pentru a viza proiectele dvs. În exemplul meu, am numit acest fișier projects.js .

Lipiți următorul cod în acel fișier și salvați-l. Lucrurile cheie de remarcat în acest fișier sunt #projects , .project-item și #filters . Acesta este fișierul în care puteți schimba și layoutMode: la zidărie, ambalare, cellsByColumn și multe altele. În acest tutorial, folosesc modul grilă.

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;

});

});

Odată ce ați adăugat acest cod pe site-ul dvs., este timpul să puneți fișierele în coadă. Dacă functions.php ale temei copilului dumneavoastră are deja o funcție declarată pentru a face acest lucru, va trebui doar să adăugați o linie de cod ca cea de mai jos.

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

Notă, get_stylesheet_directory_uri() se referă întotdeauna la tema activă curentă.
În cazul unei teme personalizate sau al scenariului în care modificați o temă fără o temă secundară, probabil că ați folosi get_template_directory_uri() în loc de get_stylesheet_directory_uri()
Dacă tema copilului nu are deja o funcție pentru a pune în coadă scriptul, va trebui să adăugați una. Utilizați următoarele pentru a pune în coadă fișierul isotope.js .

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

}

O ultimă notă aici, ar trebui să vă asigurați că tema dvs. a pus deja în coada jQuery. Dacă nu, va trebui să adăugați wp_enqueue_script('jquery'); dar începând cu WordPress 3.8, jQuery este împachetat cu nucleul WordPress în /wp-includes/js/jquery/jquery.js .

În cele din urmă, salvați fișierul functions.php .

Acum, reveniți la fișierul projects-page.php și adăugați codul care va afișa filtrele dvs., precum și obțineți numărul de categorii și numele categoriei fiecărui proiect.

Lipiți următorul cod chiar mai sus de unde începe portofoliul dvs. La fel ca și ultimul tutorial, folosesc Bootstrap și, în HTML de mai jos, îmi setez rândul de filtru să aibă lățimea completă a containerului. În mod implicit, filtrele mele se vor alinia la stânga coloanei. Dacă nu utilizați Bootstrap, poate doriți să începeți și să încheiați cu etichetele <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>

Următorul pas este să obțineți categoria pentru fiecare proiect și să o plasați în containerul de proiect ca o clasă.

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

În codul de mai sus, all , project-item și $tax sunt adăugate la fiecare container de proiect. $tax va fi categoria pe care i-ați atribuit-o în wp-admin . Adăugarea „toate” vă permite să resetați pagina de portofoliu oricând un utilizator face clic pe filtrul „toate”.

În cele din urmă, fiecare proiect ar trebui să aibă o clasă numită „toate”, iar în cazul meu, fiecare proiect va avea, de asemenea, fie „construcții noi”, fie „renovări”. Acum, atunci când un utilizator dă clic pe una dintre categorii, pagina se va reformata elegant pentru a afișa doar categoria care a fost selectată, totul păstrând aspectul grilei portofoliului.

În concluzie, Isotope.js este un plugin jQuery foarte puternic care poate fi implementat pe orice site WordPress. Odată instalat, poate fi folosit pentru a sorta și filtra machetele de catalog, galerie sau portofoliu. În plus, există mai multe opțiuni de aspect pe care le puteți utiliza. Consultați toate opțiunile aici.

În cele din urmă, iată cum arată projects-page.php ul meu când am terminat:

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

Și cu asta, veți avea o pagină de portofoliu complet funcțională, cu filtrare a conținutului!

Pluginuri WordPress pe care le veți iubi

Descărcați această carte electronică pentru o listă cu cele mai recomandate plugin-uri pentru dezvoltatori! Am descoperit că toate aceste plugin-uri sunt ușor de utilizat, nu sunt prea grele de performanță pe site-ul dvs. și sunt de-a dreptul de încredere.