Descubre cómo conseguir una home que muestre los trabajos del porfolio filtrados por categorías en Genesis Sample.
¿Quieres introducir tus últimas creaciones (o las de tu cliente) en la página de inicio y que, además, puedan filtrarse por categorías? ¡En ese caso, vas a sacarle chispas a este artículo!
Necesitas generar un Custom Post Type (CPT) de porfolio para crear los proyectos y utilizar una herramienta que te permita filtrarlos en base a su categoría, como la popular librería de jQuery Isotope.
Resultado final del tutorial
Al aplicarlo, obtienes una home donde se visualizan todos los trabajos que hayas incluido como CPT de porfolio. Y, mejor aún, serán filtrables por categorías.
Pinta bien, ¿verdad? Antes de continuar, lee esta aclaración importante para evitar confusiones: En este tutorial vas a ver escrito tanto porfolio como portfolio (con o sin T).
- Porfolio: es la palabra correcta en castellano según la RAE. Por lo tanto, siguiendo esta lógica, es la forma usada en este artículo tanto en el cuerpo y los comentarios de código, como en los elementos que se deban mostrar en el frontend de WordPress.
- Portfolio: es su versión en lengua inglesa. Así, esta palabra aparece en todas las funciones y clases dentro del código que, por norma general, siempre se redacta en inglés.
Y ahora que esto ha quedado claro, aprende cómo conseguir un porfolio filtrable en la home de Genesis Sample paso a paso:
Instrucciones para obtener una home con porfolio filtrable en Genesis Sample
1. Crea un CPT Porfolio
Para generarlo necesitas contar con un plugin de porfolio. Puedes construir el tuyo propio creando un archivo llamado, por ejemplo, «cpt-portfolio.php» con el código siguiente dentro de una carpeta con el mismo nombre, «cpt-portfolio».
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Coloca esta carpeta en la ruta /wp-content/plugins/ y, una vez hayas hecho esto, activa el plugin. De forma alternativa, tienes la posibilidad utilizar el plugin Portfolio Post Type.
2. Genera los proyectos
Cuando el plugin de CPT de porfolio esté activo, crea todas las entradas que desees.
Sobre todo, recuerda incluir los 2 elementos CLAVE para que se visualicen correctamente en la página de inicio: Categoría e imagen destacada.
Puedes añadir más de una categoría. De hecho, ese es el caso de la mayoría de los proyectos mostrados en el vídeo del comienzo.
3. Añade los archivos de Isotope
Sube los archivos imagesloaded.pkgd.min.js y isotope.pkgd.min.js a la carpeta /js/ de Genesis Sample (en versiones modernas del tema deberás crearla). A continuación, crea un archivo isotope-init.js:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Con este paso, dejas todos los elementos de Isotope listos para que el child theme los utilice.
4. Crea un archivo front-page.php
Genera un fichero con el nombre front-page.php que lleve integrado el código siguiente y colócalo en la carpeta raíz de Genesis Sample.
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Ahora ya tienes la estructura básica de la home. Sin embargo, aún requiere un template part. ¡Vamos a ello!
5. Crea un fichero filterable-portfolio.php
Introduce el siguiente fragmento en un nuevo archivo llamado filterable-portfolio.php.
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Y colócalo dentro la una carpeta que se llama «template-parts».
Este fichero gestiona cómo se muestra el contenido; en este caso, la imagen destacada y el título. Además, se encarga de cargar e inicializar los ficheros de Isotope.
6. Modifica el fichero functions.php
Pega este snippet al final de functions.php:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque, registras una imagen de tamaño personalizado para porfolio y ordenas que esas entradas se vean en la página principal.
7. Edita el fichero style.css
Por último, añade este fragmento al final del fichero style.css:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes! Con este bloque aplicas los estilos necesarios para que los trabajos se visualicen correctamente en la home.
Conclusiones
Siguiendo este tutorial paso a paso conseguirás una página de inicio en Genesis Sample como la que aparece en el vídeo al comienzo de este post.
Como resultado, tu nueva versión de Genesis Sample tendrá una home donde se muestran los proyectos del porfolio filtrados por categorías.
Esta funcionalidad es muy útil para creativos y profesionales que deseen exponer sus mejores trabajos en la página principal y permitir que los usuarios naveguen por ellas de forma elegante e intuitiva.
Si te gusta la idea pero necesitas aplicarlo en otro child theme o realizar alguna variación, solo tienes que decírmelo en los comentarios para que prepare un tutorial a medida.
Ventajas de estar dentro de Código Genesis. 😉
