WordPress portföyünüze nasıl filtre eklenir?

Geçen ay size özel bir gönderi türü, yeni bir “projeler” sorgusu ve birkaç yeni şablon kullanarak WordPress'te nasıl portföy sitesi oluşturacağınızı gösterdim.

Bu yazımda size Isotope.js kütüphanesini kullanarak portföy sayfanıza nasıl filtre ekleyeceğinizi göstereceğim.

Henüz yapmadıysanız, WordPress sitenize gidin, birkaç kategori oluşturun ve bunları portföyünüzdeki öğelere atayın. İlk makaleyi okursanız, yine 'Projeler' adında bir CPT kullanıyorum, bu nedenle WordPress siteme eklenen her proje için bir kategorinin atandığından emin olmam gerekecek. Sitemde projelerim “Yeni İnşaat” veya “Tadilat” olarak kategorize edilecek.

Projelerinizin her birine bir kategori atadıktan sonra, sizin için süslü filtreleme işini yapacak JavaScript'i eklemenin zamanı geldi.

Isotope.js, David DeSandro tarafından geliştirilen bir düzen kitaplığıdır. Açık kaynak ve kişisel kullanım için ücretsizdir, ancak ticari kullanım için bir lisans satın almanız gerekir. Daha fazla bilgi ve fiyatlandırma için lütfen lisans sayfasını inceleyin.

O halde isotope.js dosyasını sitenize ekleyelim. İdeal olarak, güncellemelerin asla silmemesini sağlamak için bunu alt /js/ adlı bir dizine eklersiniz.

Ayrıca bir dosya daha oluşturup /js/ dizininize eklemeniz gerekiyor. Bu dosya, projelerinizi hedeflemek için gereken jQuery'yi içerecektir. projects.js , bu dosyaya project.js adını verdim.

Aşağıdaki kodu bu dosyaya yapıştırın ve kaydedin. Bu dosyada dikkat edilmesi gereken en önemli şeyler #projects , .project-item ve #filters . Bu, layoutMode: duvarcılık, paketleme, cellByColumn ve daha fazlası olarak değiştirebileceğiniz dosyadır. Bu eğitimde ızgara modunu kullanıyorum.

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;

});

});

Bu kodu sitenize ekledikten sonra, dosyaları sıraya koymanın zamanı geldi. Eğer alt temanızın functions.php dosyasında bunu yapmak için önceden tanımlanmış bir fonksiyon varsa, ona aşağıdaki gibi bir kod satırı eklemeniz yeterli olacaktır.

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() her zaman mevcut aktif temaya atıfta bulunur.
Özel bir tema söz konusu olduğunda veya bir temayı alt tema olmadan değiştirdiğiniz senaryoda, büyük olasılıkla get_template_directory_uri() yerine get_stylesheet_directory_uri() kullanırsınız.
Alt temanız, betiğinizi kuyruğa almak için bir işleve sahip değilse, bir tane eklemeniz gerekir. isotope.js dosyanızı kuyruğa almak için aşağıdakileri kullanın.

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

}

Burada son bir not, temanızın zaten jQuery'yi kuyruğa aldığından emin olmalısınız. Değilse, wp_enqueue_script('jquery'); eklemeniz gerekir. ancak WordPress 3.8'den itibaren jQuery, WordPress çekirdeğiyle /wp-includes/js/jquery/jquery.js içinde paketlenmiştir.

Son olarak, functions.php dosyanızı kaydedin.

Şimdi, projects-page.php dosyanıza geri dönün ve filtrelerinizi gösterecek kodu ekleyin, ayrıca kategori sayısını ve her projenin kategori adını alın.

Portföyünüzün başladığı yerin hemen üstüne aşağıdaki kodu yapıştırın. Son öğretici gibi, Bootstrap kullanıyorum ve aşağıdaki HTML'de filtre satırımı kabın tam genişliği olacak şekilde ayarlıyorum. Varsayılan olarak filtrelerim sütunun soluna hizalanır. Bootstrap kullanmıyorsanız, <ul> etiketleriyle başlayıp bitirmek isteyebilirsiniz.

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

Bir sonraki adım, her proje için kategoriyi almak ve onu bir sınıf olarak proje konteynerine yerleştirmektir.

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

Yukarıdaki kodda, all , project-item ve $tax her proje kapsayıcısına eklenir. $tax , wp-admin içinde ona atadığınız kategori olacaktır. "Tümü" eklemek, bir kullanıcı "tümü" filtresini her tıkladığında portföy sayfasını sıfırlamanıza olanak tanır.

Sonunda, her projenin “all” adında bir sınıfı olmalı ve benim durumumda her projede ayrıca “yeni inşaat” veya “tadilat” olacak. Şimdi, bir kullanıcı kategorilerden birine tıkladığında, sayfa, portföyün ızgara düzenini korurken, yalnızca seçilen kategoriyi görüntülemek için zarif bir şekilde yeniden biçimlendirilir.

Sonuç olarak, Isotope.js, herhangi bir WordPress sitesinde uygulanabilen çok güçlü bir jQuery eklentisidir. Kurulduktan sonra katalog, galeri veya portföy düzenlerini sıralamak ve filtrelemek için kullanılabilir. Ayrıca, kullanabileceğiniz birden fazla düzen seçeneği vardır. Buradaki tüm seçeneklere göz atın.

Sonunda, projects-page.php bittiğinde şöyle görünüyor:

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

Ve bununla, tamamen işlevsel, içerik filtreleme portföy sayfanız olacak!

Seveceğiniz WordPress eklentileri

Geliştiriciler için en çok önerilen eklentilerimizin bir listesi için bu e-kitabı indirin! Tüm bu eklentilerin kullanımının basit olduğunu, sitenizde çok fazla performans gerektirmediğini ve tamamen güvenilir olduğunu gördük.