Cómo crear un portafolio en WordPress con y sin plugins

Hay muchas formas de crear un portafolio en WordPress para mostrar tu trabajo. Hay temas que vienen preparados para crear directamente esta sección de lo contrario puedes utilizar un plugin o crearlo con código.

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

Añadir nuevo proyecto ‹ ceslava portafolio CPT — WordPress

Para crearla añade este código al archivo functions.php de tu tema y si no es tuyo le crees 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

template-hierarchy

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 que uses 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.

Tipos de proyectos ‹ ceslava - portafolio — WordPress

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 el 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 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

Ajustes de escritura - portafolio - jetpack - WordPress

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)

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

Free Nimble Portfolio with Default Skin Nimble Portfolio

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

screenshot-8

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.

ShrinkTheWeb

Waving Portfolio

Otro plugin con grid, responsive, shortcodes, efectos de animación y filtros por categoría.

Waving Portfolio WordPress Plugin

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.

Wordpress Portfolio Plugin » Portfolio Gallery Layout

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.

Portfolio by BestWebSoft — WordPress Plugins

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.

instagram-woocommerce-wordpress-portafolio

Otros plugins gratuitos para mostrar tu 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…

behance-portfolio-wordpress

Plugin gratuito: Behance Portfolio Manager

devianART

deviantART Widget – $10

Inserta un widget con tus trabajos de deviantART

devianart-widget-wordpress

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

wordpress-plugin-galeria-fuentes-externas-flickr-instagram

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

 

Escribí esto el 10/05/2016

6 comentarios

  1. Adrian G dice:

    Muchas gracias!! y de gran ayuda!! Un saludo

  2. Bruno dice:

    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

    • ceslava dice:

      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

  3. Rosa dice:

    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

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies