Genesis可过滤组合同位素

时间：2015-11-17 作者：Simo

我有一个正在工作的genesis filterable投资组合，我想与您分享。

I was inspired by

它适用于您所在的任何税务级别，只显示要筛选的直接子项（如图所示）。

enter image description here

1 个回复
最合适的回答,由SO网友:Simo 整理而成

存档或分类代码：

add_filter( \'genesis_pre_get_option_site_layout\', \'__genesis_return_full_width_content\' );
wp_enqueue_script(\'isotope\', get_stylesheet_directory_uri() . \'/js/jquery.isotope.min.js\', array(\'jquery\'), \'1.5.25\', true);
wp_enqueue_script(\'isotope_init\', get_stylesheet_directory_uri() . \'/js/isotope_corsi.js\', array(\'isotope\'), \'\', true);
wp_enqueue_style(\'isotope_css\', get_stylesheet_directory_uri() . \'/css/isotope_corsi.css\');

//* Add custom body class
add_filter( \'body_class\', \'filerable_portfolio_add_body_class\' );
//* Filterable Portfolio custom body class
function filerable_portfolio_add_body_class( $classes ) {
    $classes[] = \'filterable-portfolio-page\';
        return $classes;
}
remove_action( \'genesis_loop\', \'genesis_do_loop\' );
add_action( \'genesis_loop\', \'filterable_portfolio_do_loop\' );

function filterable_portfolio_do_loop() {

$queried_object = get_queried_object();
$cpt = get_post_type( get_the_ID() );
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;

?>
<header id="" class="entry-header">
    <?php $terms = get_terms( $taxonomy, array (\'orderby\'=>\'name\',\'order\'=>\'asc\', \'parent\' => $term_id)); ?>
        <ul id="portfolio-cats" class="filter clearfix">
            <li><a href="#" class="active" data-filter="*"><span><?php _e(\'All\', \'genesis\'); ?></span></a></li>
            <?php foreach ($terms as $term ) {?>
                <li><a href="#" data-filter=".<?php echo $term->slug; ?>"><span><?php echo $term->name; ?></span></a></li>
            <?php } ?>
        </ul><!-- /portfolio-cats -->
</header><!-- /page-heading -->

<div class="entry-content" itemprop="text">
     <?php $wpex_port_query = new WP_Query(

        array(
            \'post_type\' => $cpt,
            \'posts_per_page\' => 10,
            \'tax_query\' => array(
                                array(
                                \'taxonomy\' => $taxonomy,
                                \'field\' => \'id\',
                                \'terms\' => $term_id
                                 )),
            \'order\' => \'asc\',
            \'orderby\'=>\'name\',
        )
    );

    if( $wpex_port_query->posts ) { ?>
        <div id="portfolio" class="clearfix filterable-portfolio">
            <div class="portfolio-content">
                <?php $wpex_count=0;

                while ( $wpex_port_query->have_posts() ) : $wpex_port_query->the_post(); ?>
                    <?php $wpex_count++; ?>
                    <?php $terms = get_the_terms( get_the_ID(), $taxonomy); ?>
                        <article class="portfolio-item col-<?php echo $wpex_count; ?> <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug .\' \'; }; ?>">
                            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo genesis_get_image( array( size => \'portfolio\' ) ); ?>
                            <div class="portfolio-overlay"><h3><?php the_title(); ?></h3></div><!-- portfolio-overlay --></a>
                        </article>
                        <?php
                        endwhile; ?>
            </div><!-- /portfolio-content -->
        </div><!-- /portfolio-wrap -->
    <?php } ?>
    <?php wp_reset_postdata(); ?>
</div><!-- /entry-content -->

<?php }
genesis();
js代码：

jQuery(function($){
    $(window).load(function() {

            /*main function*/
            function portfolioIsotope() {
                var $container = $(\'.portfolio-content\');
                $container.isotope({
                    itemSelector: \'.portfolio-item\'
                });
            } portfolioIsotope();

            /*filter*/
            $(\'.filter a\').click(function(){
              var selector = $(this).attr(\'data-filter\');
                $(\'.portfolio-content\').isotope({ filter: selector });
                $(this).parents(\'ul\').find(\'a\').removeClass(\'active\');
                $(this).addClass(\'active\');
              return false;
            });

            /*resize*/


            // Orientation change
            window.addEventListener("orientationchange", function() {
                portfolioIsotope();
            });

    });
});
css代码：

/*
Filterable Portfolio
---------------------------------------------------------------------------------------------------- */

ul.filter {
    color: #999;
    list-style: none;
    margin-left: 0;
}

ul.filter li {
    float: left;
    margin-left: 1rem;
    margin-left: 10px;
    margin-bottom: 1rem;
    margin-bottom: 10px;
}
ul.filter li:first-child {
    margin-left: 0;
}

ul.filter a {
    background: #333;
    color: #fff;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-bottom: none;
    font-size: 1.5rem;
    font-weight: 300;
}

ul.filter a:hover, ul.filter a.active {
    background: #0ebfe9;
}

.filterable-portfolio {
    margin-left: -2rem;
    margin-left: -20px;
    overflow: hidden;
}

.portfolio-item {
    border: 1px solid green;
    float: left;
    margin-bottom: 2rem;
    margin-bottom: 20px;
    margin-left: 2rem;
    margin-left: 20px;
    position: relative;
    height:150px;
    width: 270px; /* [main element width - (number of columns - 1)*20]/number of columns */
    /*width: 366px; For 3-columns */
}
.portfolio-item img {
    height:100%;
}
.portfolio-item a {
    display: block;
    border-bottom: none;
}

.portfolio-item a img {
    display: block;
    background: none;
    padding: 0;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100%;
    margin-bottom: 0;
}
.portfolio-itema {
    border: 1px solid green;
    float: left;
    margin-bottom: 2rem;
    margin-bottom: 20px;
    margin-left: 2rem;
    margin-left: 20px;
    position: relative;
    height:150px;
    width: 270px; /* [main element width - (number of columns - 1)*20]/number of columns */
    /*width: 366px; For 3-columns */
}
.portfolio-itema img {
    height:100%;
}
.portfolio-itema a {
    display: block;
    border-bottom: none;
}

.portfolio-itema a img {
    display: block;
    background: none;
    padding: 0;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100%;
    margin-bottom: 0;
}

.portfolio-overlay {
    bottom: 0;
    left: 0;
    position: absolute;
}

.portfolio-overlay h3 {
    background: #000;
    color: #fff;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0;
    max-width: 180px;
    padding: 5px 7px;
    text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------*
/* = Isotope CSS Animations
/*-----------------------------------------------------------------------------------*/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

.filterable-portfolio-page .content .entry-header {
    margin-bottom: 1rem;
    margin-bottom: 10px;
}

.filterable-portfolio-page .content .entry-title {
    margin-bottom: 3rem;
    margin-bottom: 30px;
}
.filterable-portfolio-page .contenta .entry-header {
    margin-bottom: 1rem;
    margin-bottom: 10px;
}

.filterable-portfolio-page .contenta .entry-title {
    margin-bottom: 3rem;
    margin-bottom: 30px;
}

@media only screen and (max-width: 1179px) {
    .portfolio-item {
        width: 306px;
    }
    .portfolio-itema {
        width: 306px;
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-item {
        width: 242px;
    }
    .portfolio-itema {
        width: 242px;
    }
}

@media only screen and (max-width: 768px) {
    .portfolio-item {
        width: 217px;
    }
    .portfolio-itema {
        width: 217px;
    }
}

@media only screen and (max-width: 320px) {
    /* Uncomment the following only if the last filter item is on its own in a separate line like this: http://i.imgur.com/0VD8tmU.png */
    ul.filter li:last-child {
        margin-left: 0;
    }
}

/* Opt-in form overlay below header
--------------------------------------------- */

.site-container {
    position: relative;
}

.home-slider-overlay {
    position: absolute;
    top: 40px;
    left: 40px;
}

.home-slider-overlay .enews {
    width: 600px;
    margin: 10% 0 10% 5%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.home-slider-overlay .enews-widget .widget-title,
.home-slider-overlay .enews p {
    color: #333;
}

.enews-widget input[type="submit"]:hover {
    background: #333;
    color: #fff;
}

@media only screen and (max-width: 1024px) {

    .home-slider-overlay .enews {
        width: 400px;
    }

}

@media only screen and (max-width: 768px) {

    .home-slider-overlay .enews {
        width: 270px;
        margin: 1% 0 10% 5%;
    }

    .home-slider-overlay {
        top: 100px;
    }

}

@media only screen and (max-width: 480px) {

    .home-slider-overlay .enews {
        margin: 0% 0 10% 5%;
        width: 92%;
    }

    .home-slider-overlay {
        position: static;
        margin-top: 4rem;
    }

}

标签： custom-post-types   wp-query   custom-taxonomy   filters   小码农  

相关推荐

apply_filters() function

我用过apply_filters() 从WordPress帖子中检索内容时，如：$content=$query_val->post_content; $content = apply_filters( \'the_content\', $content ); 当我使用apply_filters() 这个apostrophe( \' ) 在我的文本中显示了一些字符。在我移除后apply_filters() 它显示正确。所以请解释清楚！！它在做什么？我已引用此链接Referal_lin