Categoría: blogs

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

1. archive-portafolio.php y cambiar lo que se muestra por ejemplo en el loop y
2. 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.

Demo

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.

Demo

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.

Instagram

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

Demo

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
• Twitter Hashtag
• Facebook Pages
• Google+ Profiles
• Delicious
• Flickr
• Flickr Hashtag
• Tumblr
• Youtube
• Youtube Search
• Dribbble
• Pinterest
• 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