Muchos de los child themes para Genesis Framework que podemos encontrar no incluyen estilos y programación para un portfolio de proyectos o trabajos realizados y muchos de los que lo llevan son realmente sencillos, sin ninguna animación ni estilo especial.
En este tutorial veremos cómo crear un portfolio que pueda filtrarse por categorías en pocos pasos. Podéis seguir el video tutorial, o los pasos explicados uno a uno debajo del mismo.
Paso 1: Custom post type Portfolio
Aunque podríamos crearlo directamente con código, para hacerlo más sencillo instalaremos el plugin Portfolio Post Type para que nos cree el tipo de entrada que necesitamos.
Si nuestro tema ya incorpora este tipo de entrada, pero no con categorías y etiquetas como en el caso de Minimum Pro que vemos en el video-tutorial, instalaremos igualmente el plugin para tener todas las características que necesitamos.
Paso 2: Añadir soporte para Archive Portfolio
Para que nuestro portfolio no utilice la plantilla archive por defecto, sino la que subiremos expresamente para ello con el filtro de categorías, añadiremos la siguiente función al archivo functions.php del child theme:
//* Add Archive Settings option to Portolio CPT add_post_type_support( 'portfolio', 'genesis-cpt-archives-settings' );
De esta forma, nos aparecerá ya en el menú de WordPress el elemento de Portfolio y su submenus para categorías, etiquetas y los settings de la página de archivo.
3. Crear la página archive-portfolio.php
Crearemos en nuestro ordenador un archivo php con el código que indicamos a continuación (también os lo podéis descargar al final del tutorial) y lo guardaremos como archive-portfolio.php
<?php //* Página de archivo para mostrar el portfolio con filtro en Genesis. //* Indicamos que se utilice el layout de ancho completo add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); //* Sustituimos el loop estándar por el personalizado para el portfolio remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'dpw_portfolio' ); // Llamamos a los archivos javascript para el filtro dinámico. wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery'), '1.5.25', true); wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotopes_init.js', array('isotope'), '', true); //* Función de loop para seleccionar y mostrar los elementos del portfolio con filtro por categorías. function dpw_portfolio() { ?> <div class="archive-description"> <?php $terms = get_terms( 'portfolio_category' ); if( $terms ) { echo ' <ul id="portfolio-cats" class="filter clearfix">'; echo ' <li><a href="#" class="active" data-filter="*"><span>Todos</span></a></li> '; foreach( $terms as $term ){ echo " <li><a href='#' data-filter='.$term->slug'><span>$term->name</span></a></li> "; } echo '</ul> <br>'; } // Creamos la consulta para filtrar el tipo de post y el máximo por página. $wpex_port_query = new WP_Query( array( 'post_type' => 'portfolio', // enter your custom post type 'posts_per_page'=> '20', // overrides posts per page in theme settings ) ); //Mostramos los resultados de la consulta if( $wpex_port_query->posts ) { ?> <div id="portfolio-wrap" class="clearfix filterable-portfolio"> <div class="portfolio-content"> <?php $wpex_count=0; ?> <?php while ( $wpex_port_query->have_posts() ) : $wpex_port_query->the_post(); ?> <?php $wpex_count++; ?> <?php $terms = get_the_terms( get_the_ID(), 'portfolio_category' ); ?> <?php //Mostramos sólo aquellos elementos que contienen imagen destacada if ( has_post_thumbnail(get_the_ID()) ) { ?> <article class="portfolio-item col-<?php echo $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 => 'sz-portfolio' ) ); /* Para crear un tamaño de imagen personalizado para el portolio, debemos añadir la función correspondiente en functions.php: add_image_size( 'sz-portfolio', 300, 200, TRUE ); */ ?> <div class="portfolio-overlay"><h4><?php the_title(); ?></h4></div><!-- portfolio-overlay --></a> </article> <?php } ?> <?php endwhile; ?> </div><!-- /portfolio-content --> </div><!-- /portfolio-wrap --> <?php } ?> <?php wp_reset_postdata(); ?> </div> <?php } genesis();
Una vez creado, lo subiremos por FTP a la carpeta de nuestro child theme, por ejemplo, wp-content/themes/minimum-pro/
4- Subir archivos javascript para filtro
Para crear la funcionalidad del filtro por categorías, necesitaremos dos archivos javascript que os pongo a continuación, deberéis descargarlos y subirlos a la carpeta /js de vuestro child theme (por ejemplo, wp-content/themes/minimum-pro/js/)
5- Añadir los estilos CSS para el filtro y el portfolio:
Por último deberemos añadir los estilos CSS necesarios para mostrar el portfolio cómo queramos.
Os dejo aquí el que utilizamos en el tutorial, pero es posible que quieras modificar colores y tamaños en función del resto de diseño de vuestro tema.
/* # Estilo para el portfolio y el filtro de categorías ---------------------------------------------------------------------------------------------------- */ .post-type-archive-portfolio .archive-description{ overflow: hidden; } ul.filter { color: #999; list-style: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } ul.filter li { float: left; } ul.filter li:first-child { margin-left: 0; } ul.filter a { color: #555; display: block; padding: 0.5rem 1rem; text-decoration: none; border-bottom: none; font-size: 1.5rem; font-weight: 300; border-top: 4px solid #fff; } ul.filter a:hover, ul.filter a.active { border-top: 4px solid #3d91f0; } .filterable-portfolio { margin-left: -2rem; margin-left: -20px; } .portfolio-item { float: left; margin-bottom: 2rem; margin-bottom: 40px; margin-left: 2rem; margin-left: 20px; position: relative; width: 23%; } .portfolio-item a img { display: block; margin-bottom: 0; } .portfolio-overlay { color: #fff; position: absolute; width: 100%; text-align: center; top: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); padding: 30px; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .portfolio-item img:hover + .portfolio-overlay, .portfolio-overlay:hover { opacity: 1; } .portfolio-overlay h4 { font-weight: 400; margin: 0; width: 100%; padding: 5px 7px; text-transform: uppercase; color: #fff; } .clearfix{ clear: both; } /*-----------------------------------------------------------------------------------* /* = 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; } @media only screen and (max-width: 1179px) { .portfolio-item { width: 22%; } } @media only screen and (max-width: 1023px) { .portfolio-item { width: 30%; } } @media only screen and (max-width: 500px) { .portfolio-item { width: 100%; } }
Por último, os dejo un .zip con todos los archivos necesarios para crear el portfolio en tu web
Archivos Tutorial Portfolio en Genesis
Espero que os haya sido útil! El código original no es mío, es una mezcla de diferentes tutoriales que he podido encontrar.
Si tenéis cualquier duda, escribirla en los comentarios o escribirme a esther@esthersola.com
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
22 respuestas a «Tutorial: Crear portfolio en Genesis con filtro por categorías»
|
Hola! Me surge una duda a ver si podrías ayudarme. Me gustaría poder acceder a mis posts atraves de las imágenes en el portafolio.
Muchas gracias de antemano.
Un saludo,
Nerea
|
Hola Nerea!
Se me ocurre una forma de hacerlo, aunque no es sencilla… podrías crear un campo personalizado en el portfolio para añadir el post asociado y editar la plantilla de portfolio para añadir el enlace desde cada elemento al post de ese campo. El plugin ACF (Advanced Custom Files) te puede servir.
Saludos!
|
Gran tutorial… pero tengo un problema con mi theme. El título, que va dentro del wrap, page-header, etc. se lo salta y me rompe todo el diseño.
¿Cómo puedo obligarle a que respete ese diseño y ya una vez pasado el header-wrap ya muestre el menú, etc?
Gracias.
|
Hola Pedro!
No acabo de entender tu problema. ¿El título te refieres al de la página o al título de cada uno de los items del portfolio?
Saludos,
|
Me refería al de la página…
Pero ahora tengo otro problema… y es que cuando entro en el portfolio desde un móvil o algo distinto al desktop, me eliminar mi menú responsive y me lo muestra como desde un desktop.
Es decir, me quita el típico menú hamburguesa para mostrar todo mi menú desplegado. Y por más que intento que se adapte al móvil no soy capaz…
Gracias.
|
Fantástico post, Esther! Después de pegarme con un montón de plug-ins sin éxito, por fin consigo tener la galería tal como quería! Mil gracias!!!
Una consulta: Como podría hacer que el portfolio apareciese en la home? Estoy utilizando el childtheme de ejemplo.
Por cierto, los links de descarga no funcionan y no se pueden bajar los archivos javascript para filtro.
Gracias y un saludo!
|
Hola Jordi!
Genial! Me alegra mucho saber que te ha sido útil 🙂
Para ponerlo en la home, así de entrada y sin probarlo y si no quieres recurrir a plugins, yo creo que crearía una widget area que sólo apareciera en la home y crearía shortcodes que mostraran elementos del portfolio según los filtros que me interesara. (Mírate el artículo de mostrar banners con shortcodes, que la idea sería parecida)
A ver si así te funciona y si es así, y quieres, estás invitado a escribir un artículo explicándolo 😉
Saludos!
PD: ya he corregido los enlaces, con esto de la migración me he dejado algunos por el camino…
|
Como puedo hacer para que se creen solo columnas de 3, cambio el width del portfolio-item pero no responde.
Ademas esta sentencia
<article class="portfolio-item col- &slug .’ ‘; }; ?>»>
la clase «col- » me sale en blanco, no me muestra un numero
|
Hola Ronald!
He corregido la sentencia de
Al migrar de blog hubo problemas con el formato de algunos códigos y había un «&» que sobraba después del $count.
Respecto lo de las columnas, modificando el CSS debería funcionarte, revisa las media queries y los márgenes por si acaso.
Saludos!
|
Hay forma de que se ordenen los items agrupados por categoría?
Tengo 3 categorias de portfolio: cuadros, objetos y dibujos.
Quiero que aparezcan primero todos los cuadros, luego los objetos y finalmente los dibujos, todo seguido.
¿Cómo podría hacer esto?
gracias
|
Hola Miguel!
Prueba añadir en el WP_Query dos atributos más:
$wpex_port_query = new WP_Query( array(
'post_type' => 'portfolio', // enter your custom post type
'posts_per_page'=> '20', // overrides posts per page in theme settings
'orderby' => 'portfolio_category',
'order' => 'DESC',
) );
Saludos!
|
Caca… no funcionó. Los sigue ordenando por fecha.
Igual muchas gracias por la velocidad de respuesta!!
Está buenisima esta «customización». Yo la apliqué a Gallery Pro.
Ah!! aprovecho y, sin compromiso, te pregunto: ¿cómo podría agregar este filtro al blog también?
La web donde estoy aplicando esto es terebordaarte.com
gracias otra vez!
|
Jeje, nunca es tan fácil ;). Ya cuando pueda te busco la forma de hacerlo con calma.
Me apunto lo de aplicar los filtros al blog, podría estar bien!
|
Hola Miguel!
He estado probando lo de aplicar los filtros al blog, y sería hacer lo mismo pero en el archivo template del blog y cambiando $terms = get_terms(‘category’); y los argumentos del WP_Query para sustituir portfolio por posts.
Cuando pueda prepararé un tutorial completo de cómo aplicarlo.
Saludos!
|
Que genia! muy bien. Lo intentaré y, si no lo logro, esperaré el tutorial.
gracias!!!
|
He caído en tu blog buscando información para solucionar un tema que me trae de cabeza. No sé si puedes ayudarme.
Tengo una página hecha con Genesis y el theme Mai -lifestyle-pro, que no traía portfolios.
Instalé el plugin «Portfolio Post Type» y todo bien.
El problema es que en la página donde me salen todos los portfolios de cada categoría:
…ayunviaje.com/portfolio_category/fotografia-viajes/
no sé como como cambiar ese portfolio_category por otra palabra.
Luego los portfolios individuales me salen:
….nviaje.com/portfolio/que-ver-en-roma/
que me valen así como están.
He probado con el plugin «Permalinks Customizer». Con el que puedo cambiar los enlaces de los portfolios individuales, pero las categorías imposible. Sigue apareciendo ese portfolio_category.
Alguna idea de cómo podría cambiarlo? No encuentro ninguna solución.
Si no, gracias de todas formas
|
Hola Mariano!
Tuve hace tiempo un caso similar y fue complicado hacerlo mediante plugins, al final lo que me sirvió fue crear el custom post type de portfolio «a mano» en lugar de utilizar el de Portfolio post type, indicando el slug para la url que yo quería. No se si te servirá como solución!
Saludos,
|
Aquí puedes ver cómo puedes cambiar la url de portfolio:
https://wordpress.org/support/topic/change-url-slug-for-portfolio-type/
|
Muchísimas gracias, Esther! He creado mi página de portfolio gracias a tu ayuda 🙂
3 años después de esta entrada, el código sigue funcionando perfectamente. Aún así, tuve que crear el CPT a mano (el plugin recomendado me dio problemas), tuve alguna dificultad con la integración a Gutenberg (olvidé añadir el típico show_in_rest: true a la taxonomía categoría) y tuve que modificar algo del PHP y CSS para dejarlo a mi gusto. Pero finalmente lo conseguí.
Mil gracias y un abrazo!
|
Hola Javier!
Qué bien que te haya servido el tutorial! Sí… ya tiene un tiempo y hay algunas cosas que toca renovar, pero al menos te ha servido de base para preparar tu portfolio.
Muchas gracias por comentar, y un abrazo!
|
buenisimo, muchas gracias!!!!
|
Hola, he realizado todos los pasos del tutorial pero me encuentro con el siguiente error en la pagina del porfolio, no se si me puedes orientar.
Warning: Use of undefined constant size – assumed ‘size’ (this will throw an Error in a future version of PHP) in /home/u147864885/domains/proyectaryreformar.es/public_html/wp-content/themes/minimum-pro/archive-portfolio.php on line 70
pd: no tengo ni idea de código, me encanta tu web, tiene un contenido increible!!!