Hay muchas formas de crear un portafolio en WordPress para mostrar tu trabajo. Hay temas que vienen preparados para crear directamente esta sección, si no usas uno de estos temas puedes utilizar un plugin o crear un portafolio con código.
Bonus: Al final veremos otros plugins para crear portafolios con los trabajos que tenemos publicados en Instagram, Flickr, Behance o devianArt.
Añadir una sección Portafolio sin plugins
Hay sitios que directamente crean una página y añaden una galería con sus trabajos, a veces con algún efecto de lightbox pero lo habitual es que un portafolio esté asociado a un Tipo de entrada personalizada (Custom Post Type).
Para crearla añade este código al archivo functions.php de tu tema y si no es tuyo le creas un tema hijo primero para no perder las posibles actualizaciones que haga el autor del tema original.
if ( ! function_exists('custom_post_type_portafolio') ) {
// Register Custom Post Type
function custom_post_type_portafolio() {
$labels = array(
'name' => _x( 'Proyectos', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Proyecto', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Portafolio', 'text_domain' ),
'name_admin_bar' => __( 'Portafolio', 'text_domain' ),
'archives' => __( 'Portafolio', 'text_domain' ),
'parent_item_colon' => __( 'Proyecto superior', 'text_domain' ),
'all_items' => __( 'Todos los proyectos', 'text_domain' ),
'add_new_item' => __( 'Añadir nuevo proyecto', 'text_domain' ),
'add_new' => __( 'Añadir nuevo Proyecto', 'text_domain' ),
'new_item' => __( 'Nuevo proyecto', 'text_domain' ),
'edit_item' => __( 'Editar proyecto', 'text_domain' ),
'update_item' => __( 'Actualizar proyecto', 'text_domain' ),
'view_item' => __( 'Ver proyecto', 'text_domain' ),
'search_items' => __( 'Buscar proyecto', 'text_domain' ),
'not_found' => __( 'Not found', 'text_domain' ),
'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ),
'featured_image' => __( 'Imagen destacada', 'text_domain' ),
'set_featured_image' => __( 'Añadir imagen destacada', 'text_domain' ),
'remove_featured_image' => __( 'Quitar Imagen destacada', 'text_domain' ),
'use_featured_image' => __( 'Usar como Imagen destacada', 'text_domain' ),
'insert_into_item' => __( 'Insert into item', 'text_domain' ),
'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
'items_list' => __( 'Items list', 'text_domain' ),
'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
'filter_items_list' => __( 'Filter items list', 'text_domain' ),
);
$args = array(
'label' => __( 'Proyecto', 'text_domain' ),
'description' => __( 'Portafolio', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', 'post-formats', ),
'taxonomies' => array( 'category', 'post_tag' ),
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,
'show_in_admin_bar' => true,
'show_in_nav_menus' => true,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'page',
);
register_post_type( 'portafolio', $args );
}
add_action( 'init', 'custom_post_type_portafolio', 0 );
}
Si te da error 404 cuando vas a visitar la página del proyecto o la de portafolio (tudominio.com/portafolio/) ve a Ajustes > Enlaces Permanentes y pincha en Guardar cambios para que se actualicen.
Verás que tu página tudominio.com/portafolio/ tiene el mismo aspecto que la de cualquier otra página de Archivos, y la de un proyecto el mismo aspecto que un artículo. Eso es por la jerarquía de WP, al no encontrar ningún archivo específico para este tipo de entrada tira de archive.php y en los proyectos individuales de single.php
Si quieres darle un aspecto personalizado puedes crear en tu tema estos 2 archivos. Te recomiendo que partas del código de tu tema archive.php y single.php
- archive-portafolio.php y cambiar lo que se muestra por ejemplo en el loop y
- single-portafolio.php para la página de cada proyecto un archivo
Para personalizar las categorías o etiquetas de tus trabajos el proceso es el mismo, crea tantos archivos como necesites: category-grafico.php, category-web.php y/o tag-web.php, tag-fotografia.php, etc. O también puedes crear una taxonomía personalizada «tipos de proyectos» para no mezclarlo con las categorías y etiquetas generales de tu WP.
Con este código añadirás una nueva taxonomía similar a las categorías llamada «Tipos de Proyecto» asociada únicamente a tu Portafolio.
if ( ! function_exists( 'custom_taxonomy_portafolio' ) ) {
// Register Custom Taxonomy
function custom_taxonomy_portafolio() {
$labels = array(
'name' => _x( 'Tipos de proyectos', 'Taxonomy General Name', 'text_domain' ),
'singular_name' => _x( 'Tipo Proyecto', 'Taxonomy Singular Name', 'text_domain' ),
'menu_name' => __( 'Tipos de proyectos', 'text_domain' ),
'all_items' => __( 'Todos los tipos de proyectos', 'text_domain' ),
'parent_item' => __( 'Tipo superior', 'text_domain' ),
'parent_item_colon' => __( 'Tipo superior:', 'text_domain' ),
'new_item_name' => __( 'Nuevo Tipo de proyecto', 'text_domain' ),
'add_new_item' => __( 'Añadir Nuevo Tipo de proyecto', 'text_domain' ),
'edit_item' => __( 'Editar Tipo de proyecto', 'text_domain' ),
'update_item' => __( 'Actualizar Tipo de proyecto', 'text_domain' ),
'view_item' => __( 'Ver Tipo de proyecto', 'text_domain' ),
'separate_items_with_commas' => __( 'Separar tipos con comas', 'text_domain' ),
'add_or_remove_items' => __( 'Añadir o quitar Nuevo Tipos de proyecto', 'text_domain' ),
'choose_from_most_used' => __( 'Elegir entre los más usados', 'text_domain' ),
'popular_items' => __( 'Tipos de proyecto populares', 'text_domain' ),
'search_items' => __( 'Buscar Tipos de proyecto', 'text_domain' ),
'not_found' => __( 'No se encuentra', 'text_domain' ),
'no_terms' => __( 'No hay Tipos de proyecto', 'text_domain' ),
'items_list' => __( 'Lista de Tipos de proyecto', 'text_domain' ),
'items_list_navigation' => __( 'Navegación Tipos de proyecto', 'text_domain' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
);
register_taxonomy( 'tipo_proyecto', array( 'portafolio' ), $args );
}
add_action( 'init', 'custom_taxonomy_portafolio', 0 );
}
Si estás satisfecho con el contenido que tu tema ofrece para el portafolio puede que sólo necesites aplicarle CSS. Normalmente los temas añaden funciones para que se añadan clases CSS según la página que se sirve, lo vimos en Cómo añadir clases CSS a los Custom Post Types en WordPress.
De forma que:
- tudominio.com/portafolio/ tendrá en el body la clase post-type-archive-portafolio y cada proyecto la clase type-portafolio
- En la página de cada proyecto el body tendrá la clase single-portafolio
Está en ti darle los últimos toques pero con esto ya tienes un portafolio totalmente funcional.
7 Plugins para crear portafolios en WordPress
Si no quieres editar código siempre puedes utilizar un plugin
Jetpack
Puede que ya tengas instalada esta navaja suiza o megaplugin de WordPress, en la versión wordpress.com todos lo tienen instalado. La función de Portafolio no es un módulo que puedes activar en la Configuración de Jetpack, para activarla debes ir a Ajustes > Escritura
Tendrás un nuevo Tipo de Entrada Personalizada (CPT) que han traducido como «Carpeta».
Luego tendrás que utilizar el shortcode [portfolio] en la página o entrada que lo quieras mostrar, puedes utilizar todos estos atributos para personalizarlo:
- display_types: muestra los Tipos de proyecto. (true/false)
- display_tags: muestra las etiquetas de proyecto. (true/false)
- display_content: muestra el contenido del proyecto. (true/false)
- include_type: incluye Tipos de proyecto, por defecto se muestran todos pero puedas especificar las que quieras separando sus slugs con comas.
- include_tag: incluye las etiquetas de proyecto, por defecto se muestran todas pero puedas especificar las que quieras separando sus slugs con comas.
- columns: Número de columnas, por defecto 2. (número, 1-6)
- showposts: número de proyectos a mostrar, por defecto todos. (número)
- order: elige entre orden ascendente ASC (por defecto) o descendente DESC
- orderby: orden por el que se muestra, por defecto por fecha (author, date, title, rand)
Ejemplo: [portfolio display_types=true columns=3 showposts=10 orderby=title]
Los shortcodes también los puedes poner en un archivo de tu tema con esta función:
<?php echo do_shortcode(«[portfolio display_types=true columns=3 showposts=10 orderby=title]»); ?>
WordPress Picture / Portfolio / Media Gallery
Más conocido como Nimble Portfolio este plugin ofrece más opciones que Jetpack, añade:
- la opción de poder filtrar los trabajos por categorías,
- un lightbox para mostrar imágenes o vídeos,
- dos widgets, uno con los últimos proyectos y otro para shortcodes
Es gratuito con add-ons de pago. Demo
Awesome Filterable Portfolio
Un plugin bastante fácil de utilizar que incluye:
- Filtros por tipo de proyecto
- Animaciones jQuery configuraciones
- Shortcode para insertarlo donde quieras
WordPress Portfolio Plugin (WP Portfolio)
Este plugin genera dinámicamente capturas de tus proyectos web si tienes cuenta en ShrinkTheWeb. Si no tienes cuenta también puedes utilizarlo subiendo tus propias imágenes.
Waving Portfolio
Otro plugin con grid, responsive, shortcodes, efectos de animación y filtros por categoría.
Carpeta
WordPress Portfolio Plugin ( Career Portfolio ) ofrece funciones básicas pero suficientes y un sólo layout en su versión gratuita, la comercial ofrece 3, lazy load, estilos de animación, filtro por categoría y muchas más características interesantes.
Portfolio by BestWebSoft
Un plugin básico con el puedes añadir mucha información a cada proyecto, descripción, descripción corta, el día de entrega, más de una imagen, etc.
Plugins para mostrar proyectos publicados en sitios externos
Digamos que tienes tus trabajos publicados fuera de tu WordPress, en Instagram, Dribble, YouTube, Pinterest, Flickr, Behance o devianArt, con estos plugins puedes mostrarlos e incluso venderlos en tu WordPress.
Con los plugins comerciales tendrás acceso a soporte personalizado, os dejo también opciones gratuitas.
WooCommerce Instagram Shop – $19
Con Woocommerce y este plugin crearás una tienda para tus fotografías de Instagram.
Otros plugins gratuitos para mostrar tu Instagram:
- Instagram Slider Widget
- WP Instagram Widget
- Yakadanda Instagram
- Enjoy Plugin for Instagram
- Simple Instagram
- Alpine PhotoTile for Instagram
Flickr
Awesome Flickr Gallery – Gratuito
Si eres fotógrafo y tienes tu trabajo en Flickr puedes usar este plugin, bastante completo para mostrar galerías de Flickr
Behance
Behance Portfolio for WordPress – $16
Tus trabajos de Behance con filtros de categorías, animaciones, responsive…
Plugin gratuito: Behance Portfolio Manager
devianART
deviantART Widget – $10
Inserta un widget con tus trabajos de deviantART
El plugin Todo en 1
WordPress Smart Content Gallery – $16
Por último un plugin para mostrar contenido en forma de galería de numerosas fuentes además de imágenes propias.
- Twitter Hashtag
- Facebook Pages
- Google+ Profiles
- Delicious
- Flickr
- Flickr Hashtag
- Tumblr
- Youtube
- Youtube Search
- Dribbble
- Vimeo
- Soundcloud
En resumen, hay multitud de opciones, intenta elegir la que no sobrecargue de opciones lo que realmente necesitas.
Si conoces algún otro plugin interesante o quieres dejar un enlace con tu portafolio deja un comentario
Muchas gracias!! y de gran ayuda!! Un saludo
Gracias Adrián ;)
Genial!
perdona la ignorancia (soy novato en wordpress) pero una vez tengo creado el portfolio (ya funciona!) ¿como lo puedo insertar de forma sencilla en mi página inicio?
muchas grácias
Hola Bruno,
Muchas gracias.
Entiendo que has creado el portafolio sin plugins, con las indicaciones de la primera parte del artículo. Si es así puedes mostrarlo en la home o donde quieras creando un loop personalizado que tire de este nuevo Tipo de entrada personalizada (Custom Post Type).
Algo así:
// WP_Query arguments$args = array (
'post_type' => array( 'portafolio' ),
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// aquí añade el loop de esos proyectos
}
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
En ese loop puedes mostrar las imágenes destacadas, el título de proyecto, extracto, etc.
https://codex.wordpress.org/es:The_Loop_in_Action
Saludos
Buenos dias, tengo nuna duda, quisiera saber si conoce algun plugin que haga el efecto slideup para mostrar un elemento del portafolio, tal y como sucede aqui: http://reversal.themes.bitfade.com/#portfolio pero que ademas pueda permitir que arriba cuando se despliega la info pueda cambiarse con next o prev los proyectos y ademas de ser posible que tenga un autoplay con loop?? he estado buscando mucho y nada…o algo que sea lo mas parecido… mi theme de wordpress que es de pago hace el slide up pero con un delay dde loading que se ve muy chimbo y pregunte al soporte del theme y me dijeron qno hay opcion para cambiarlo, por css oculte el logo de loading pero igual se nota el delay. Mil gracias y ojala pueda ayudarme
Buenas Rosa,
Si entiendo bien lo que dices no sé de ningún plugin, habría que verlo bien en tu tema y hacer algunos ajustes. Si quieres puedes ponerte en contacto conmigo para darte presupuesto.
Saludos