Как добавить фильтры в ваше портфолио WordPress

В прошлом месяце я показал вам, как создать сайт-портфолио на WordPress, используя настраиваемый тип записи, новый запрос «проекты» и несколько новых шаблонов.

В этом посте я покажу вам, как добавить фильтры на страницу вашего портфолио с помощью библиотеки Isotope.js.

Если вы еще этого не сделали, зайдите на свой сайт WordPress, создайте несколько категорий и назначьте их элементам в своем портфолио. Если вы читали первую статью, я снова использую CPT под названием «Проекты», поэтому для каждого проекта, добавленного на мой сайт WordPress, мне нужно убедиться, что ему назначена категория. На моем сайте мои проекты будут отнесены к категории «Новое строительство» или «Ремонт».

После того, как вы присвоили категорию каждому из ваших проектов, пришло время добавить JavaScript, который сделает за вас сложную фильтрацию.

Isotope.js — это библиотека макетов, разработанная Дэвидом ДеСандро. Это бесплатно для открытого исходного кода и личного использования, однако для коммерческого использования вы должны приобрести лицензию. Пожалуйста, просмотрите страницу лицензии для получения дополнительной информации и цен.

Итак, давайте добавим файл isotope.js на ваш сайт. В идеале вы должны добавить это в каталог с именем /js/ в вашей дочерней теме, чтобы гарантировать, что обновления никогда не удалят его.

Вам также нужно создать еще один файл и добавить его в каталог /js/ . Этот файл будет содержать jQuery, необходимый для ваших проектов. В моем примере я назвал этот файл projects.js .

Вставьте следующий код в этот файл и сохраните его. Ключевыми моментами, которые следует отметить в этом файле, являются #projects , .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, которые вам понравятся

Загрузите эту электронную книгу, чтобы получить список наших наиболее рекомендуемых плагинов для разработчиков! Мы обнаружили, что все эти плагины просты в использовании, не слишком требовательны к производительности вашего сайта и совершенно надежны.