WordPress实现jquery data-filter效果

Wordpress 11月 4, 2020

<div class="section over-hide padding-top-bottom-120">
			<div class="section-1400 mb-5 pb-lg-4">
				<div class="container-fluid">
					<div class="row justify-content-center">
						<div class="col-lg-6 align-self-center mb-5 mb-lg-0 pb-4 pb-lg-0">
							<div class="row">
								<div class="col-auto align-self-center">
									<h6 class="color-gray-dark text-vertical text-uppercase mx-0 px-0">
										<?php echo get_the_title( get_page_by_title( 'portfolio' ) ); ?>
									</h6>
								</div>
								<div class="col">
									<h3 class="display-6 mb-0">
										<?php 

								$page = get_post(get_page_by_title( 'portfolio' ));
								$content = apply_filters('the_content', $page->post_content);
								
								echo $content;
								?>
									</h3>
								</div>
							</div>
						</div>
						<div class="col-lg-6 align-self-center filter-sorting">

							<button class="btn-filter link size-18 mr-3 mb-lg-2 active" data-filter="*" data-hover="all">
											all</button>

							<?php 

							$terms = get_terms(
										    array(
										        'taxonomy'   => 'folders',
										        'hide_empty' => false,
										    )
										);


									 if ( ! empty( $terms ) && is_array( $terms ) ) {
								    // Run a loop and print them all
								    foreach ( $terms as $term ) { ?>
										
										<button class="btn-filter link size-18 mr-3 mb-lg-2 active" data-filter=".<?php echo $term->slug; ?>" data-hover="<?php echo $term->name; ?>">
											<?php echo $term->name; ?></button>

								        <?php
								    }
								} 


							 ?>	
							
						</div>
					</div>
				</div>
			</div>

			<div class="section">


				<div class="filter-wrapper-mix over-initial">
					
					<?php 

					// Get all the taxonomies for this post type
				        $taxonomies = get_object_taxonomies( (object) array( 'post_type' => __('portfolio') ) );

				        foreach( $taxonomies as $taxonomy ) : 

				            // Gets every "category" (term) in this taxonomy to get the respective posts
				            $terms = get_terms( $taxonomy );

				            foreach( $terms as $term ) : 

				                $posts = new WP_Query( "taxonomy=$taxonomy&term=$term->slug&posts_per_page=-1" );

				                if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
				                    
													
									<div class="mb-5 mix over-initial <?php echo $term->slug ?>">
										
										<a href="<?php the_permalink() ?>" class="animsition-link">
											<div class="portfolio-wrap-2 img-wrap">
												<div class="section border-4">

													<?php if (has_post_thumbnail(  )): ?>
														<?php the_post_thumbnail( ); ?>
													<?php endif ?>
													
													<div class="wrap-mask"></div>
												</div>
												<div class="portfolio-wrap-2-text">
													<h6 class="mb-1 text-center">
														<?php the_title(  ); ?>
													</h6>
													<p class="mb-0 text-center"><?php echo $term->name; ?></p>
												</div>
											</div>
										</a>
									</div>

				                    <?php
				                endwhile; endif;

				            endforeach;

				        endforeach;
					 ?>



				</div>
			</div>
			
			<div class="section-1400">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12 text-center">
							<a href="<?php echo get_permalink(get_page_by_title('portfolio')) ?>" class="btn btn-dark animsition-link">Discover all<i class="uil uil-arrow-right size-22 ml-3"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>