web-dev-qa-db-fra.com

Isotope de portefeuille filtrable Genesis

J'ai ce portefeuille filtrant de genèse qui fonctionne et je veux partager avec vous.

Je me suis inspiré de

Cela fonctionne à n'importe quel niveau de taxe et affiche uniquement les termes enfants à filtrer (comme vous pouvez le voir sur l'image).

enter image description here

custom-post-typeswp-querycustom-taxonomyfilters
1
Simo

Le code d'archive ou de taxonomie:

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();

Le code 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();
            });

    });
});

Le code 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;
    }

}
1
Simo