كيفية إضافة عوامل تصفية إلى محفظة WordPress الخاصة بك

في الشهر الماضي ، أوضحت لك كيفية إنشاء موقع محفظة على WordPress باستخدام نوع منشور مخصص ، واستعلام "مشاريع" جديد ، وعدد قليل من القوالب الجديدة.

في هذا المنشور ، سأوضح لك كيفية إضافة عوامل تصفية إلى صفحة محفظتك باستخدام مكتبة Isotope.js.

إذا لم تكن قد قمت بذلك بالفعل ، فانتقل إلى موقع WordPress الخاص بك ، وأنشئ بعض الفئات ، وقم بتعيينها للعناصر الموجودة في محفظتك. إذا قرأت المقالة الأولى ، فأنا أستخدم CPT يسمى "المشاريع" مرة أخرى ، لذلك بالنسبة لكل مشروع مضاف إلى موقع WordPress الخاص بي ، سأحتاج إلى التأكد من تعيين فئة. على موقعي ، سيتم تصنيف مشاريعي على أنها إما "إنشاءات جديدة" أو "تجديدات".

بمجرد قيامك بتعيين فئة لكل مشروع من مشاريعك ، فقد حان الوقت لإضافة JavaScript الذي سيقوم بعمل التصفية الرائع نيابة عنك.

Isotope.js هي مكتبة تخطيط طورها David DeSandro. إنه مجاني للاستخدام الشخصي والمفتوح المصدر ، ومع ذلك ، للاستخدام التجاري ، يجب عليك شراء ترخيص. يرجى مراجعة صفحة الترخيص لمزيد من المعلومات والتسعير.

لذلك ، دعنا نضيف ملف isotope.js إلى موقعك. من الناحية المثالية ، يمكنك إضافة هذا إلى دليل يسمى /js/ في السمة الفرعية الخاصة بك للتأكد من أن التحديثات لا تحذفها أبدًا.

تحتاج أيضًا إلى إنشاء ملف آخر وإضافته إلى الدليل /js/ . سيحتوي هذا الملف على jQuery اللازم لاستهداف مشروعاتك. في المثال الخاص بي ، قمت بتسمية هذا الملف projects.js .

الصق الكود التالي في هذا الملف واحفظه. الأشياء الأساسية التي يجب ملاحظتها في هذا الملف هي #projects و .project-item و #filters . هذا هو الملف حيث يمكنك أيضًا تغيير layoutMode: إلى أعمال البناء والتعبئة و cellByColumn والمزيد. في هذا البرنامج التعليمي ، أستخدم وضع الشبكة.

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'); ولكن اعتبارًا من الإصدار 3.8 من WordPress ، يتم تجميع 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 الإضافية

قم بتنزيل هذا الكتاب الإلكتروني للحصول على قائمة المكونات الإضافية الموصى بها للمطورين! لقد وجدنا أن كل هذه المكونات الإضافية سهلة الاستخدام ، وليست ثقيلة الأداء على موقعك ، وموثوقة تمامًا.