WordPressポートフォリオにフィルターを追加する方法

先月、カスタム投稿タイプ、新しい「プロジェクト」クエリ、およびいくつかの新しいテンプレートを使用して、WordPressでポートフォリオサイトを作成する方法を紹介しました。

この投稿では、Isotope.jsライブラリを使用してポートフォリオページにフィルターを追加する方法を紹介します。

まだ行っていない場合は、WordPressサイトにアクセスし、いくつかのカテゴリを作成して、ポートフォリオ内のアイテムに割り当てます。 最初の記事を読んだ場合、私は「プロジェクト」というCPTを再度使用しているので、WordPressサイトに追加されたプロジェクトごとに、カテゴリが割り当てられていることを確認する必要があります。 私のサイトでは、私のプロジェクトは「新築」または「リノベーション」のいずれかに分類されます。

各プロジェクトにカテゴリを割り当てたら、すばらしいフィルタリング作業を行うJavaScriptを追加します。

Isotope.jsは、DavidDeSandroによって開発されたレイアウトライブラリです。 オープンソースおよび個人使用は無料ですが、商用使用の場合はライセンスを購入する必要があります。 詳細と価格については、ライセンスページを確認してください。

それでは、isotope.jsファイルをサイトに追加しましょう。 理想的には、これを子テーマの/js/というディレクトリに追加して、更新によって削除されないようにします。

また、もう1つのファイルを作成し、それを/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にすでにこれを行うように宣言された関数がある場合は、以下のようなコードを1行追加するだけです。

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_stylesheet_directory_uri()の代わりにget_template_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で割り当てたカテゴリになります。 「すべて」を追加すると、ユーザーが「すべて」のフィルターをクリックするたびにポートフォリオページをリセットできます。

最終的に、各プロジェクトには「all」というクラスが必要です。私の場合、各プロジェクトには「新築」または「改修」のいずれかが含まれます。 これで、ユーザーがカテゴリの1つをクリックすると、ページがエレガントに再フォーマットされ、ポートフォリオのグリッドレイアウトを維持しながら、選択されたカテゴリのみが表示されます。

結論として、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プラグイン

開発者に最も推奨されるプラグインのリストについては、この電子ブックをダウンロードしてください。 これらのプラグインはすべて、使いやすく、サイトのパフォーマンスがそれほど高くなく、まったく信頼できることがわかりました。