Si tienes un sitio web en WordPress y deseas mostrar tu trabajo de manera profesional, una excelente manera de hacerlo es creando un portafolio. En esta guía, te mostraré cómo crear un sistema de portafolio personalizado en tu sitio web utilizando un Custom Post Type (CPT), taxonomías y campos personalizados en WordPress. Además, te enseñaré cómo integrar el contenido con Elementor para obtener un diseño moderno y fácil de manejar, como el que usamos en la página de proyectos de THagencia.com.
¿Qué es un Custom Post Type (CPT) y por qué usarlo para un portafolio?
Un Custom Post Type (CPT) en WordPress es un tipo de contenido personalizado que puedes crear para adaptarse a las necesidades de tu sitio. Aunque WordPress incluye post types predeterminados como ‘Entradas’ y ‘Páginas’, los CPT te permiten crear nuevas estructuras de contenido con características específicas.
En este caso, vamos a crear un CPT llamado «Portafolio», diseñado específicamente para mostrar tus proyectos. Esta es la mejor manera de mantener tu portafolio organizado y separado del contenido habitual de tu blog o páginas.
Creando el Custom Post Type para tu portafolio
Para empezar, vamos a registrar el post type «Portafolio» en el archivo functions.php de tu theme o mediante un plugin personalizado si prefieres no modificar los archivos del theme.
Código para el Custom Post Type:
// Vamos a trabajar con el portafolio
function create_portfolio_post_type() {
$labels = array(
'name' => __('Portafolio'),
'singular_name' => __('Proyecto'),
'menu_name' => __('Portafolio'),
'name_admin_bar' => __('Portafolio'),
'add_new' => __('Añadir Nuevo'),
'add_new_item' => __('Añadir Nuevo Proyecto'),
'new_item' => __('Nuevo Proyecto'),
'edit_item' => __('Editar Proyecto'),
'view_item' => __('Ver Proyecto'),
'all_items' => __('Todos los Proyectos'),
'search_items' => __('Buscar Proyectos'),
'not_found' => __('No se encontraron Proyectos'),
'not_found_in_trash' => __('No se encontraron Proyectos en la papelera')
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'portafolio'),
'supports' => array('title', 'editor', 'thumbnail'),
'menu_position' => 5,
'menu_icon' => 'dashicons-portfolio',
);
register_post_type('portafolio', $args);
}
add_action('init', 'create_portfolio_post_type');
Explicación del código:
Este código crea un nuevo post type llamado Portafolio que aparecerá en el menú de administración de WordPress. Hemos especificado varias etiquetas para hacerlo amigable para el usuario final, como «Añadir Nuevo Proyecto» o «Ver Proyecto». Además, estamos habilitando características como title, editor y thumbnail para que cada proyecto tenga un título, descripción y una imagen destacada.
También hemos definido que este post type tendrá una URL amigable (slug) /portafolio, lo que es ideal para la estructura de URLs y el SEO.
Añadiendo una taxonomía personalizada para categorizar proyectos
Ahora que tenemos el CPT configurado, es útil crear una taxonomía personalizada para organizar los proyectos dentro del portafolio. Vamos a crear una taxonomía llamada Tipos de Proyecto, que funcionará de manera similar a las categorías en las entradas de blog.
Código para la taxonomía personalizada:
// Taxonomía para mi portafolio
function create_portfolio_taxonomy() {
$labels = array(
'name' => __('Tipos de Proyecto'),
'singular_name' => __('Tipo de Proyecto'),
'search_items' => __('Buscar Tipos de Proyecto'),
'all_items' => __('Todos los Tipos de Proyecto'),
'edit_item' => __('Editar Tipo de Proyecto'),
'update_item' => __('Actualizar Tipo de Proyecto'),
'add_new_item' => __('Añadir Nuevo Tipo de Proyecto'),
'new_item_name' => __('Nuevo Nombre del Tipo de Proyecto'),
'menu_name' => __('Tipos de Proyecto'),
);
$args = array(
'labels' => $labels,
'hierarchical' => true, // Si quieres que se comporte como categorías
'public' => true,
'rewrite' => array('slug' => 'tipo-proyecto'),
);
register_taxonomy('tipo_proyecto', 'portafolio', $args);
}
add_action('init', 'create_portfolio_taxonomy');
Explicación del código:
Este código registra una taxonomía personalizada llamada Tipos de Proyecto. Al ser jerárquica, funciona de forma similar a las categorías, lo que significa que puedes tener tipos de proyecto y subtipos si es necesario. Esta taxonomía se asociará con el post type Portafolio.
Añadiendo campos personalizados al portafolio
Para hacer nuestro portafolio más completo, vamos a añadir algunos campos personalizados. Estos campos adicionales permitirán agregar una URL del cliente y un screenshot del proyecto.
Código para los campos personalizados:
// Screenshot y URL del cliente
function add_portfolio_meta_box() {
add_meta_box(
'portfolio_meta_box',
__('Información del Proyecto'),
'render_portfolio_meta_box',
'portafolio',
'side',
'default'
);
}
add_action('add_meta_boxes', 'add_portfolio_meta_box');
function render_portfolio_meta_box($post) {
wp_nonce_field('save_portfolio_meta_box', 'portfolio_meta_box_nonce');
// Campo de URL del cliente
$url_cliente = get_post_meta($post->ID, '_url_cliente', true);
echo '<label for="url_cliente">' . __('URL del Proyecto del Cliente') . '</label>';
echo '<input type="url" id="url_cliente" name="url_cliente" value="' . esc_attr($url_cliente) . '" size="25" />';
// Campo de imagen (screenshot del proyecto)
$screenshot = get_post_meta($post->ID, '_screenshot_proyecto', true);
$screenshot_url = wp_get_attachment_image_src($screenshot, 'thumbnail');
echo '<p><label for="screenshot_proyecto">' . __('Screenshot del Proyecto') . '</label></p>';
echo '<input type="hidden" id="screenshot_proyecto" name="screenshot_proyecto" value="' . esc_attr($screenshot) . '" />';
echo '<img id="screenshot_preview" src="' . esc_url($screenshot_url ? $screenshot_url[0] : '') . '" style="max-width:100%; height:auto;" /><br />';
echo '<button type="button" class="button" id="upload_screenshot_button">Subir Screenshot</button>';
echo '<button type="button" class="button" id="remove_screenshot_button">Eliminar Screenshot</button>';
}
Explicación del código:
Aquí estamos añadiendo dos campos personalizados a cada proyecto de portafolio:
- URL del cliente, que permite añadir un enlace directo al sitio web del cliente para mostrar el proyecto.
- Screenshot del proyecto, que permite subir y mostrar una imagen del trabajo realizado.
Guardar los campos personalizados
Es importante asegurarnos de que los datos introducidos en los campos personalizados se guarden correctamente.
Código para guardar los datos:
function save_portfolio_meta_box_data($post_id) {
if (!isset($_POST['portfolio_meta_box_nonce']) || !wp_verify_nonce($_POST['portfolio_meta_box_nonce'], 'save_portfolio_meta_box')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
// Guardar URL del cliente
if (isset($_POST['url_cliente'])) {
update_post_meta($post_id, '_url_cliente', sanitize_text_field($_POST['url_cliente']));
}
// Guardar screenshot del proyecto (ID de la imagen)
if (isset($_POST['screenshot_proyecto'])) {
update_post_meta($post_id, '_screenshot_proyecto', intval($_POST['screenshot_proyecto']));
}
}
add_action('save_post', 'save_portfolio_meta_box_data');
Mostrando los proyectos en el front-end
Para mostrar los proyectos del portafolio en tu sitio web, puedes usar Elementor para diseñar la vista de archivo (donde se muestran todos los proyectos) y la vista individual de cada proyecto. En THagencia.com, usamos este enfoque para crear páginas dinámicas como la de Proyectos y un proyecto individual.
Si no utilizas Elementor, también puedes crear una plantilla personalizada en tu theme.
Conclusión
Generar un portafolio en WordPress con un Custom Post Type es una manera efectiva de mostrar tu trabajo y organizar tus proyectos. Al seguir esta guía, podrás crear una estructura personalizada y flexible para gestionar y mostrar tus proyectos, y con herramientas como Elementor, podrás crear una interfaz visualmente atractiva y fácil de navegar para tus visitantes. ¡Anímate a crear tu portafolio y mostrar lo mejor de tu trabajo!
