Cómo agregar filtros a su cartera de WordPress

El mes pasado, le mostré cómo crear un sitio de cartera en WordPress utilizando un tipo de publicación personalizada, una nueva consulta de "proyectos" y algunas plantillas nuevas.

En esta publicación, le mostraré cómo agregar filtros a la página de su cartera utilizando la biblioteca Isotope.js.

Si aún no lo ha hecho, vaya a su sitio de WordPress, cree algunas categorías y asígnelas a los elementos de su cartera. Si lee el primer artículo, estoy usando un CPT llamado 'Proyectos' nuevamente, por lo que para cada proyecto agregado a mi sitio de WordPress, tendré que asegurarme de que se asigne una categoría. En mi sitio, mis proyectos se clasificarán como "Nueva construcción" o "Renovaciones".

Una vez que haya asignado una categoría a cada uno de sus proyectos, es hora de agregar el JavaScript que hará el trabajo de filtrado sofisticado por usted.

Isotope.js es una biblioteca de diseño desarrollada por David DeSandro. Es gratuito para uso personal y de código abierto, sin embargo, para uso comercial, debe comprar una licencia. Revise la página de licencias para obtener más información y precios.

Entonces, agreguemos el archivo isotope.js a su sitio. Idealmente, agregaría esto a un directorio llamado /js/ en su tema secundario para asegurarse de que las actualizaciones nunca lo eliminen.

También necesita crear un archivo más y agregarlo a su directorio /js/ . Este archivo contendrá el jQuery necesario para orientar sus proyectos. En mi ejemplo, nombré este archivo projects.js .

Pegue el siguiente código en ese archivo y guárdelo. Los aspectos clave a tener en cuenta en este archivo son los #projects , .project-item y #filters . Este es el archivo donde también puede cambiar el modo de layoutMode: a mampostería, empaque, celdas por columna y más. En este tutorial, estoy usando el modo de cuadrícula.

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;

});

});

Una vez que haya agregado este código a su sitio, es hora de poner en cola los archivos. Si el functions.php de su tema hijo ya tiene una función declarada para hacer esto, solo necesitará agregarle una línea de código como la que se muestra a continuación.

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

Tenga en cuenta get_stylesheet_directory_uri() siempre se refiere al tema activo actual.
En el caso de un tema personalizado, o el escenario en el que está alterando un tema sin un tema secundario, probablemente usaría get_template_directory_uri() en lugar de get_stylesheet_directory_uri()
Si su tema hijo aún no tiene una función para poner en cola su secuencia de comandos, deberá agregar una. Utilice lo siguiente para poner en cola su archivo 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 );

}

Una última nota aquí, debe asegurarse de que su tema ya esté en la cola de jQuery. Si no es así, deberá agregar wp_enqueue_script('jquery'); pero a partir de WordPress 3.8, jQuery está empaquetado con el núcleo de WordPress en /wp-includes/js/jquery/jquery.js .

Finalmente, guarde su archivo functions.php .

Ahora, regrese a su archivo projects-page.php y agregue el código que mostrará sus filtros, así como también obtenga el número de categorías y el nombre de categoría de cada proyecto.

Pegue el siguiente código justo arriba de donde comienza su cartera. Al igual que el último tutorial, estoy usando Bootstrap y en el HTML a continuación, estoy configurando mi fila de filtro para que tenga el ancho completo del contenedor. De forma predeterminada, mis filtros se alinearán a la izquierda de la columna. Si no está utilizando Bootstrap, es posible que desee comenzar y terminar con las etiquetas <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>

El siguiente paso es obtener la categoría de cada proyecto y colocarla en el contenedor del proyecto como una clase.

<?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 .'">';?>

En el código anterior, all , project-item y $tax se agregan a cada contenedor de proyecto. $tax será la categoría que le asignó en wp-admin . Agregar "todos" le permite restablecer la página de cartera cada vez que un usuario hace clic en el filtro "todos".

Al final, cada proyecto debe tener una clase llamada "todos" y, en mi caso, cada proyecto también tendrá "construcción nueva" o "renovaciones". Ahora, cuando un usuario hace clic en una de las categorías, la página se reformateará elegantemente para mostrar solo la categoría que se seleccionó, todo mientras se mantiene el diseño de cuadrícula de la cartera.

En conclusión, Isotope.js es un complemento de jQuery muy poderoso que se puede implementar en cualquier sitio de WordPress. Una vez instalado, se puede utilizar para ordenar y filtrar diseños de catálogo, galería o cartera. Además, hay múltiples opciones de diseño que puede usar. Consulta todas las opciones aquí.

Al final, así es como se ve mi projects-page.php cuando termine:

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

¡Y con eso, tendrá una página de cartera de filtrado de contenido en pleno funcionamiento!

Complementos de WordPress que te encantarán

¡Descargue este libro electrónico para obtener una lista de nuestros complementos más recomendados para desarrolladores! Descubrimos que todos estos complementos son fáciles de usar, no tienen un rendimiento demasiado alto en su sitio y son francamente confiables.