我有一个自定义的帖子类型,现在我需要根据项目的类别过滤项目,而不需要直接转到其他页面。我还需要all
将显示所有项目的类别。Link 前往试验现场。如果有任何帮助,我将不胜感激。
投资组合类型。php:
<?php
if ( function_exists( \'add_theme_support\' ) ) {
add_theme_support( \'post-thumbnails\' );
set_post_thumbnail_size( 270, 170, true ); // Normal post thumbnails
add_image_size( \'screen-shot\', 720, 540 ); // Full size screen
}
add_action(\'init\', \'portfolio_register\');
function portfolio_register() {
$labels = array(
\'name\' => _x(\'Portfolio\', \'post type general name\'),
\'singular_name\' => _x(\'Portfolio Item\', \'post type singular name\'),
\'add_new\' => _x(\'Add New\', \'portfolio item\'),
\'add_new_item\' => __(\'Add New Portfolio Item\'),
\'edit_item\' => __(\'Edit Portfolio Item\'),
\'new_item\' => __(\'New Portfolio Item\'),
\'view_item\' => __(\'View Portfolio Item\'),
\'search_items\' => __(\'Search Portfolio Items\'),
\'not_found\' => __(\'Nothing found\'),
\'not_found_in_trash\' => __(\'Nothing found in Trash\'),
\'parent_item_colon\' => \'\'
);
$args = array(
\'labels\' => $labels,
\'public\' => true,
\'publicly_queryable\' => true,
\'show_ui\' => true,
\'query_var\' => true,
\'rewrite\' => true,
\'capability_type\' => \'post\',
\'hierarchical\' => false,
\'menu_position\' => 5,
\'supports\' => array(\'title\',\'editor\',\'thumbnail\')
);
register_post_type( \'portfolio\' , $args );
}
function create_portfolio_taxonomies() {
$labels = array(
\'name\' => _x( \'Categories\', \'taxonomy general name\' ),
\'singular_name\' => _x( \'Category\', \'taxonomy singular name\' ),
\'search_items\' => __( \'Search Categories\' ),
\'all_items\' => __( \'All Categories\' ),
\'parent_item\' => __( \'Parent Category\' ),
\'parent_item_colon\' => __( \'Parent Category:\' ),
\'edit_item\' => __( \'Edit Category\' ),
\'update_item\' => __( \'Update Category\' ),
\'add_new_item\' => __( \'Add New Category\' ),
\'new_item_name\' => __( \'New Category Name\' ),
\'menu_name\' => __( \'Categories\' ),
);
$args = array(
\'hierarchical\' => true, // Set this to \'false\' for non-hierarchical taxonomy (like tags)
\'labels\' => $labels,
\'show_ui\' => true,
\'show_admin_column\' => true,
\'query_var\' => true,
\'rewrite\' => array( \'slug\' => \'categories\' ),
);
register_taxonomy( \'portfolio_categories\', array( \'portfolio\' ), $args );
}
add_action( \'init\', \'create_portfolio_taxonomies\', 0 );
?>
索引。php:
<!-- Start Portfolio Page -->
<section id="portfolio" class="page">
<div class="container">
<div class="row">
<div class="span12">
<div class="title">Portfoolio</div>
<hr>
<div class="sub-title visible-desktop">Tööd:</div>
<!-- Start Filters -->
<?php
$taxonomy = \'portfolio_categories\';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<ul class="option-set" data-option-key="filter">
<li class="filter-icon hidden-phone">A</li>
<?php foreach ( $terms as $term ) { ?>
<li><a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" ><?php echo $term->name; ?></a></li>
<?php } ?>
</ul>
<?php endif;?>
<!-- End Filters -->
<!-- Start Projects -->
<div id="posts" class="row isotope">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$title= str_ireplace(\'"\', \'\', trim(get_the_title()));
$desc= str_ireplace(\'"\', \'\', trim(get_the_content()));
?>
<div class="item post item span4 isotope-item">
<a class="project-wrp fancybox" title="<?=$title?>" rel="lightbox[work]" href="<?php print portfolio_thumbnail_url($post->ID) ?>"><div class="profile-photo"><div class="profile-icon">f</div><?php the_post_thumbnail(array(\'230\',\'170\'),array(\'alt\' => \'\')); ?> </div>
<div class="project-name"><?php echo $title; ?></div>
<div class="project-client"><?php echo $desc; ?></div>
</a>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div>
</div>
</section>
<!-- End Portfolio Page -->
最合适的回答,由SO网友:iEmanuele 整理而成
从…起Isotope Docs:
HTML:
<ul id="filters">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".metal">metal</a></li>
<li><a href="#" data-filter=".transition">transition</a></li>
<li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
<li><a href="#" data-filter=":not(.transition)">not transition</a></li>
<li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>
<div id="container">
<div class="element transition metal">...</div>
<div class="element post-transition metal">...</div>
<div class="element alkali metal">...</div>
<div class="element transition metal">...</div>
<div class="element lanthanoid metal inner-transition">...</div>
<div class="element halogen nonmetal">...</div>
<div class="element alkaline-earth metal">...</div>
...
</div>
JS逻辑:
// cache container
var $container = $(\'#container\');
// initialize isotope
$container.isotope({
// options...
});
// filter items when filter link is clicked
$(\'#filters a\').click(function(){
var selector = $(this).attr(\'data-filter\');
$container.isotope({ filter: selector });
return false;
});
您似乎在筛选链接中缺少了“数据筛选”属性,并且在帖子的class属性中缺少了要筛选的类。您可以在“数据筛选”属性中打印类别slug,并在帖子的class属性中打印相同的值。
UPDATE
根据新的答复,
index.php
<!-- Taken from index.php -->
<!-- Start Filters -->
<?php
$taxonomy = \'portfolio_categories\';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<ul class="option-set" data-option-key="filter">
<li class="filter-icon hidden-phone">A</li>
<li><a href="#" data-option-value="*">All</a></li>
<?php foreach ( $terms as $term ) { ?>
<li><a data-option-value=".<?php echo $term->slug; ?>" href="#" ><?php echo $term->name; ?></a></li>
<?php } ?>
</ul>
<?php endif;?>
<!-- End Filters -->
<!-- Start Portfolio items loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$title= str_ireplace(\'"\', \'\', trim(get_the_title()));
$desc= str_ireplace(\'"\', \'\', trim(get_the_content()));
/*
* Note: get_the_terms() function, retrieves all the terms of a taxonomy, that belong to the post.
* Return: (array|false|wp_error)
* 1. array of terms object
* 2. false if no terms in taxonomy
* 3. wp_error object if the given taxonomy is an invalid one
*/
$termsObj = get_the_terms( $post->ID, \'portfolio_categories\' );
if ( $termsObj && !is_wp_error( $termsObj ) ) :
//We need only the slug of this/these term(s) so looping through the result to grab only the slug value and store it in a new array
$terms = array();
foreach( $termsObj as $obj ){
$terms[] = $obj->slug;
}
//Join or implode the new array to a string and then put it in the class attribute of the portoflio item
$termsString = join( \' \', $terms);
endif;
?>
<div class="item post item span4 isotope-item <?php echo $termsString; ?>">
<a class="project-wrp fancybox" title="<?=$title?>" rel="lightbox[work]" href="<?php print portfolio_thumbnail_url($post->ID) ?>">
<div class="profile-photo"><div class="profile-icon">f</div><?php the_post_thumbnail(array(\'230\',\'170\'),array(\'alt\' => \'\')); ?> </div>
<div class="project-name"><?php echo $title; ?></div>
<div class="project-client"><?php echo $desc; ?></div>
</a>
</div>
<?php endwhile; endif; ?>
<!-- End Portofolio items loop -->