Bagaimana cara menambahkan filter ke portofolio WordPress Anda

Bulan lalu, saya menunjukkan cara membuat situs portofolio di WordPress menggunakan jenis posting khusus, kueri "proyek" baru, dan beberapa templat baru.

Dalam posting ini, saya akan menunjukkan cara menambahkan filter ke halaman portofolio Anda menggunakan perpustakaan Isotop.js.

Jika Anda belum melakukannya, masuk ke situs WordPress Anda, buat beberapa kategori, dan tetapkan ke item dalam portofolio Anda. Jika Anda membaca artikel pertama, saya menggunakan CPT yang disebut 'Proyek' lagi, jadi untuk setiap proyek yang ditambahkan ke situs WordPress saya, saya perlu memastikan bahwa sebuah kategori telah ditetapkan. Di situs saya, proyek saya akan dikategorikan sebagai "Konstruksi Baru" atau "Renovasi."

Setelah Anda menetapkan kategori untuk setiap proyek Anda, sekarang saatnya untuk menambahkan JavaScript yang akan melakukan pekerjaan penyaringan untuk Anda.

Isotop.js adalah pustaka tata letak yang dikembangkan oleh David DeSandro. Ini gratis untuk penggunaan sumber terbuka dan pribadi, namun, untuk penggunaan komersial, Anda harus membeli lisensi. Harap tinjau halaman lisensi untuk informasi lebih lanjut dan harga.

Jadi, mari tambahkan file isotope.js ke situs Anda. Idealnya, Anda akan menambahkan ini ke direktori bernama /js/ di tema anak Anda untuk memastikan bahwa pembaruan tidak pernah menghapusnya.

Anda juga perlu membuat satu file lagi dan menambahkannya ke direktori /js/ Anda. File ini akan berisi jQuery yang diperlukan untuk menargetkan proyek Anda. Dalam contoh saya, saya menamai file ini projects.js .

Rekatkan kode berikut ke dalam file itu dan simpan. Hal utama yang perlu diperhatikan dalam file ini adalah #projects , .project-item , dan #filters . Ini adalah file tempat Anda juga dapat mengubah layoutMode: menjadi masonry, packery, cellsByColumn, dan banyak lagi. Dalam tutorial ini, saya menggunakan mode grid.

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;

});

});

Setelah Anda menambahkan kode ini ke situs Anda, sekarang saatnya untuk mengantrekan file. Jika functions.php tema anak Anda sudah memiliki fungsi yang dideklarasikan untuk melakukan ini, Anda hanya perlu menambahkan sebaris kode ke dalamnya seperti di bawah ini.

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

Catatan, get_stylesheet_directory_uri() selalu mengacu pada tema aktif saat ini.
Dalam kasus tema khusus, atau skenario di mana Anda mengubah tema tanpa tema anak, Anda mungkin akan menggunakan get_template_directory_uri() sebagai ganti get_stylesheet_directory_uri()
Jika tema anak Anda belum memiliki fungsi untuk mengantrekan skrip Anda, Anda perlu menambahkannya. Gunakan yang berikut ini untuk mengantrekan file isotope.js Anda.

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

}

Satu catatan terakhir di sini, Anda harus memastikan bahwa tema Anda telah memasukkan jQuery. Jika belum, Anda perlu menambahkan wp_enqueue_script('jquery'); tetapi pada WordPress 3.8, jQuery dikemas dengan inti WordPress di /wp-includes/js/jquery/jquery.js .

Terakhir, simpan file functions.php Anda.

Sekarang, kembali ke file projects-page.php Anda dan tambahkan kode yang akan menampilkan filter Anda, serta dapatkan jumlah kategori dan nama kategori setiap proyek.

Tempelkan kode berikut tepat di atas tempat portofolio Anda dimulai. Seperti tutorial terakhir, saya menggunakan Bootstrap dan dalam HTML di bawah ini, saya mengatur baris filter saya menjadi lebar penuh wadah. Secara default, filter saya akan sejajar di sebelah kiri kolom. Jika Anda tidak menggunakan Bootstrap, Anda mungkin ingin memulai dan mengakhiri dengan tag <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>

Langkah selanjutnya adalah mendapatkan kategori untuk setiap proyek dan menempatkannya ke dalam wadah proyek sebagai kelas.

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

Dalam kode di atas, all , project-item , dan $tax ditambahkan ke setiap wadah proyek. $tax akan menjadi kategori yang Anda tetapkan di wp-admin . Menambahkan "semua" memungkinkan Anda untuk mengatur ulang halaman portofolio setiap kali pengguna mengklik filter "semua".

Pada akhirnya, setiap proyek harus memiliki kelas yang disebut "semua" dan dalam kasus saya, setiap proyek juga akan memiliki "konstruksi baru" atau "renovasi." Sekarang, ketika pengguna mengklik salah satu kategori, halaman akan diformat ulang secara elegan untuk menampilkan hanya kategori yang telah dipilih, sambil mempertahankan tata letak kisi portofolio.

Kesimpulannya, Isotop.js adalah plugin jQuery yang sangat kuat yang dapat diimplementasikan di situs WordPress mana pun. Setelah diinstal, dapat digunakan untuk mengurutkan dan memfilter katalog, galeri, atau tata letak portofolio. Selain itu, ada beberapa opsi tata letak yang dapat Anda gunakan. Lihat semua opsi di sini.

Pada akhirnya, inilah tampilan projects-page.php saya setelah selesai:

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

Dan dengan itu, Anda akan memiliki halaman portofolio pemfilteran konten yang berfungsi penuh!

Plugin WordPress yang akan Anda sukai

Unduh ebook ini untuk daftar plugin yang paling direkomendasikan untuk pengembang! Kami menemukan semua plugin ini mudah digunakan, tidak terlalu berat kinerjanya di situs Anda, dan benar-benar andal.