วิธีเพิ่มตัวกรองให้กับพอร์ตโฟลิโอ WordPress ของคุณ

เมื่อเดือนที่แล้ว ฉันได้แสดงวิธีสร้างไซต์พอร์ตโฟลิโอบน WordPress โดยใช้ประเภทโพสต์ที่กำหนดเอง แบบสอบถาม "โครงการ" ใหม่และเทมเพลตใหม่บางส่วน

ในโพสต์นี้ ฉันจะแสดงวิธีเพิ่มตัวกรองในหน้าพอร์ตโฟลิโอของคุณโดยใช้ไลบรารี Isotope.js

หากคุณยังไม่ได้ทำ ให้ไปที่ไซต์ WordPress ของคุณ สร้างหมวดหมู่สองสามหมวดหมู่ และกำหนดหมวดหมู่ให้กับรายการในพอร์ตของคุณ หากคุณอ่านบทความแรก ฉันกำลังใช้ CPT ที่เรียกว่า 'Projects' อีกครั้ง ดังนั้นสำหรับแต่ละโครงการที่เพิ่มในไซต์ WordPress ฉันจะต้องตรวจสอบให้แน่ใจว่ามีการกำหนดหมวดหมู่ บนไซต์ของฉัน โครงการของฉันจะถูกจัดประเภทเป็น "การก่อสร้างใหม่" หรือ "การปรับปรุงใหม่"

เมื่อคุณกำหนดหมวดหมู่ให้กับแต่ละโครงการของคุณแล้ว ก็ถึงเวลาเพิ่ม JavaScript ที่จะทำการกรองแบบแฟนซีให้กับคุณ

Isotope.js เป็นไลบรารีเลย์เอาต์ที่พัฒนาโดย David DeSandro ฟรีสำหรับโอเพ่นซอร์สและการใช้งานส่วนตัว อย่างไรก็ตาม สำหรับการใช้งานเชิงพาณิชย์ คุณต้องซื้อใบอนุญาต โปรดตรวจสอบหน้าใบอนุญาตสำหรับข้อมูลเพิ่มเติมและราคา

มาเพิ่มไฟล์ isotope.js ให้กับเว็บไซต์ของคุณกัน ตามหลักการแล้ว คุณจะต้องเพิ่มสิ่งนี้ในไดเร็กทอรีชื่อ /js/ ในธีมลูกของคุณ เพื่อให้แน่ใจว่าการอัปเดตจะไม่ถูกลบทิ้ง

คุณต้องสร้างไฟล์เพิ่มอีกหนึ่งไฟล์และเพิ่มลงในไดเร็กทอรี /js/ ของคุณ ไฟล์นี้จะมี jQuery ที่จำเป็นสำหรับการกำหนดเป้าหมายโครงการของคุณ ในตัวอย่างของฉัน ฉันตั้งชื่อไฟล์นี้ว่า projects.js

วางรหัสต่อไปนี้ลงในไฟล์นั้นและบันทึก สิ่งสำคัญที่ควรทราบในไฟล์นี้คือ #projects , .project .project-item และ #filters นี่คือไฟล์ที่คุณสามารถเปลี่ยน layoutMode: เป็น masonry, packery, cellsByColumn และอื่นๆ ในบทช่วยสอนนี้ ฉันใช้โหมดกริด

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;

});

});

เมื่อคุณเพิ่มโค้ดนี้ในไซต์ของคุณแล้ว ก็ถึงเวลาจัดคิวไฟล์ หาก functions.php ของธีมลูกของคุณมีฟังก์ชันที่ประกาศให้ทำเช่นนี้ คุณจะต้องเพิ่มโค้ดลงไปตามตัวอย่างด้านล่าง

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

หมายเหตุ get_stylesheet_directory_uri() จะอ้างอิงถึงธีมที่ใช้งานอยู่ในปัจจุบันเสมอ
ในกรณีของธีมที่กำหนดเอง หรือสถานการณ์ที่คุณเปลี่ยนธีมโดยไม่มีธีมย่อย คุณอาจใช้ get_template_directory_uri() แทน get_stylesheet_directory_uri()
หากธีมลูกของคุณไม่มีฟังก์ชันสำหรับจัดคิวสคริปต์ คุณจะต้องเพิ่มเข้าไป ใช้สิ่งต่อไปนี้เพื่อจัดคิวไฟล์ 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 );

}

บันทึกย่อสุดท้ายที่นี่ คุณควรตรวจสอบให้แน่ใจว่าธีมของคุณมีการจัดคิว jQuery แล้ว หากไม่มี คุณจะต้องเพิ่ม wp_enqueue_script('jquery'); แต่สำหรับ WordPress 3.8 นั้น jQuery นั้นมาพร้อมกับแกนหลักของ WordPress ใน /wp-includes/js/jquery/jquery.js

สุดท้าย บันทึกไฟล์ functions.php ของคุณ

ตอนนี้ กลับไปที่ไฟล์ projects-page.php และเพิ่มโค้ดที่จะแสดงตัวกรองของคุณ รวมทั้งรับจำนวนหมวดหมู่และชื่อหมวดหมู่ของแต่ละโปรเจ็กต์

วางรหัสต่อไปนี้ไว้เหนือตำแหน่งเริ่มต้นของพอร์ตโฟลิโอของคุณ เช่นเดียวกับบทช่วยสอนที่แล้ว ฉันใช้ Bootstrap และใน HTML ด้านล่าง ฉันกำลังตั้งค่าแถวตัวกรองของฉันให้เต็มความกว้างของคอนเทนเนอร์ ตามค่าเริ่มต้น ตัวกรองของฉันจะจัดชิดด้านซ้ายของคอลัมน์ หากคุณไม่ได้ใช้ Bootstrap คุณอาจต้องการเริ่มต้นและสิ้นสุดด้วยแท็ก <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>

ขั้นตอนต่อไปคือการรับหมวดหมู่สำหรับแต่ละโปรเจ็กต์และวางลงในคอนเทนเนอร์โปรเจ็กต์เป็นคลาส

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

ในโค้ดด้านบน all , project-item และ $tax จะถูกเพิ่มในแต่ละคอนเทนเนอร์ของโปรเจ็กต์ $tax จะเป็นหมวดหมู่ที่คุณกำหนดไว้ใน wp-admin การเพิ่ม "ทั้งหมด" จะทำให้คุณสามารถรีเซ็ตหน้าพอร์ตโฟลิโอได้ทุกเมื่อที่ผู้ใช้คลิกตัวกรอง "ทั้งหมด"

ในท้ายที่สุด แต่ละโครงการควรมีคลาสที่เรียกว่า "ทั้งหมด" และในกรณีของฉัน แต่ละโครงการจะมี "การก่อสร้างใหม่" หรือ "การปรับปรุง" ด้วย ตอนนี้ เมื่อผู้ใช้คลิกที่หมวดหมู่ใดประเภทหนึ่ง หน้าจะจัดรูปแบบใหม่อย่างหรูหราเพื่อแสดงเฉพาะหมวดหมู่ที่เลือก ทั้งหมดในขณะที่ยังคงรูปแบบกริดของพอร์ตโฟลิโอ

โดยสรุป Isotope.js เป็นปลั๊กอิน jQuery ที่ทรงพลังมาก ซึ่งสามารถนำไปใช้กับไซต์ WordPress ใดก็ได้ เมื่อติดตั้งแล้ว สามารถใช้เพื่อจัดเรียงและกรองแคตตาล็อก แกลเลอรี หรือเค้าโครงพอร์ตโฟลิโอ นอกจากนี้ยังมีตัวเลือกเค้าโครงหลายแบบที่คุณสามารถใช้ได้ ตรวจสอบตัวเลือกทั้งหมดที่นี่

ในที่สุด นี่คือลักษณะที่ projects-page.php ของฉันเมื่อเสร็จแล้ว:

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

และด้วยเหตุนี้ คุณจะมีหน้าแฟ้มผลงานการกรองเนื้อหาที่ทำงานได้อย่างสมบูรณ์!

ปลั๊กอิน WordPress ที่คุณจะหลงรัก

ดาวน์โหลด ebook นี้เพื่อดูรายการปลั๊กอินที่เราแนะนำมากที่สุดสำหรับนักพัฒนา! เราพบว่าปลั๊กอินทั้งหมดเหล่านี้ใช้งานได้ง่าย ไม่หนักเกินไปบนไซต์ของคุณ และเชื่อถือได้อย่างแท้จริง