Portfolio Personalizado
Plugin de portafolio personalizable para WordPress que te permite mostrar proyectos con etiquetas, colores y estilos personalizados. Diseñado para desarrolladores, diseñadores y freelancers que desean un control sobre la presentación de su portafolio.
by Fabiola Díaz · github.com/fabydiaz/wp-portafolio-personalizado · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/fabydiaz/wp-portafolio-personalizado/archive/refs/heads/main.zipPortfolio Personalizado - Plugin de WordPress
Plugin profesional para crear y mostrar un portfolio personalizado en WordPress con opciones completas de customización.
🚀 Características
- ✅ Custom Post Type "Proyectos" con taxonomía de tecnologías
- 🎨 Personalización completa de colores desde el panel de administración
- 🏷️ Sistema de etiquetas personalizables con colores individuales
- 📱 Diseño completamente responsive (móvil, tablet, desktop)
- ⚡ Shortcode flexible con múltiples opciones
- 🖼️ Soporte para imágenes destacadas e íconos Font Awesome
- 🔗 Enlaces personalizados (GitHub, Demo, Descarga)
- 🌐 Compatible con cualquier tema de WordPress (Divi, Elementor, Gutenberg, etc.)
- 🎭 Efectos visuales modernos y animaciones suaves
📋 Requisitos
- WordPress 5.0 o superior
- PHP 7.2 o superior
- MySQL 5.6 o superior
📦 Instalación
Opción 1: Instalación Manual
- Descarga el archivo ZIP del plugin
- Ve a WordPress Admin → Plugins → Añadir nuevo
- Haz clic en Subir plugin y selecciona el archivo ZIP
- Haz clic en Instalar ahora
- Activa el plugin
Opción 2: Instalación por FTP
- Descarga y descomprime el archivo ZIP
- Sube la carpeta
portfolio-personalizadoa/wp-content/plugins/ - Activa el plugin desde el menú de Plugins en WordPress
🎨 Configuración
Panel de Configuración
Después de activar el plugin, encontrarás una nueva opción en el menú lateral:
Mis Proyectos → Configuración
Aquí podrás personalizar:
Colores
- Color Primario
- Color Secundario
- Color de Acento
- Color de Fondo de Cards
- Color de Texto de Cards
- Color de Fondo de Imagen (Inicio)
- Color de Fondo de Imagen (Final)
- Color de Botones
- Color de Botones (Hover)
- Color de Texto de Botones
Estilos
- Border Radius de Cards (en píxeles)
- Border Radius de Botones (en píxeles)
Etiquetas Personalizadas
Crea etiquetas con colores personalizados para tus tecnologías:
- Ingresa el slug de la etiqueta (ej:
react,vue,laravel) - Selecciona el color de fondo
- Selecciona el color de texto
- Haz clic en "Agregar Etiqueta"
📝 Uso
Crear un Proyecto
- Ve a Mis Proyectos → Añadir Proyecto
- Completa la información:
- Título del proyecto
- Descripción
- Imagen destacada
- Extracto (resumen corto)
- En Detalles del Proyecto, agrega:
- URL del Repositorio (GitHub, GitLab, etc.)
- URL de Demo
- Icono de Font Awesome (opcional)
- Tipo de enlace principal
- Asigna tecnologías desde el panel lateral
- Publica el proyecto
Mostrar Proyectos con Shortcode
Usa el shortcode [mostrar_proyectos] en cualquier página o entrada:
Shortcode Básico
[mostrar_proyectos]
Shortcode con Parámetros
[mostrar_proyectos limit="6" columns="3" category="web"]
Parámetros disponibles:
limit: Número de proyectos a mostrar (-1 para todos)columns: Número de columnas (2, 3 o 4)category: Slug de la categoría de tecnología
Ejemplos de Uso
Mostrar últimos 6 proyectos en 3 columnas:
[mostrar_proyectos limit="6" columns="3"]
Mostrar solo proyectos de WordPress:
[mostrar_proyectos category="wordpress"]
Mostrar todos los proyectos en 4 columnas:
[mostrar_proyectos columns="4"]
Uso con Page Builders
Divi
- Añade un módulo de Código o Texto
- Pega el shortcode
- Guarda y publica
Elementor
- Arrastra el widget Shortcode
- Pega el shortcode
- Actualiza la página
Gutenberg
- Añade un bloque Shortcode
- Pega el shortcode
- Publica
🎯 Compatibilidad
Este plugin es universal y funciona con:
- ✅ Divi (tema completo y Divi Builder)
- ✅ Elementor (Free y Pro)
- ✅ Gutenberg (editor nativo de WordPress)
- ✅ Beaver Builder
- ✅ WPBakery
- ✅ Cualquier otro tema de WordPress
No necesitas ningún tema específico para usar este plugin.
🛠️ Desarrollo y Testing
Probar el Plugin Localmente
Opción 1: Local by Flywheel (Recomendado)
- Descarga Local by Flywheel
- Crea un nuevo sitio de WordPress
- Instala el plugin en
/app/public/wp-content/plugins/
Opción 2: XAMPP/MAMP
- Instala XAMPP o MAMP
- Instala WordPress en localhost
- Copia el plugin a
wp-content/plugins/
Opción 3: Docker
docker-compose up -d
Testing en Diferentes Temas
- Instala el plugin en tu instalación local
- Cambia entre diferentes temas
- Verifica que el diseño se mantiene consistente
📂 Estructura de Archivos
portfolio-personalizado/
│
├── portfolio-personalizado.php (archivo principal)
├── README.md
├── LICENSE.txt
│
└── assets/
├── style.css (estilos frontend)
├── admin.css (estilos admin)
└── admin.js (JavaScript admin)
🔄 Actualización
Para actualizar el plugin:
- Desactiva el plugin actual
- Elimina la carpeta del plugin
- Sube la nueva versión
- Reactiva el plugin
Nota: Tus configuraciones y proyectos se mantienen en la base de datos.
🤝 Contribuir
¿Quieres contribuir al proyecto? ¡Genial!
- Fork el repositorio
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
🐛 Reportar Bugs
Si encuentras un bug, por favor:
- Abre un Issue en GitHub
- Describe el problema detalladamente
- Incluye pasos para reproducir el error
- Indica tu versión de WordPress y PHP
📝 Changelog
Version 2.0.0
- ✨ Panel de configuración completo
- 🎨 Personalización de colores
- 🏷️ Sistema de etiquetas personalizables
- 🌐 Compatibilidad universal con todos los temas
- 📱 Mejoras en responsive design
Version 1.0.0
- 🎉 Lanzamiento inicial
📄 Licencia
Este plugin está licenciado bajo GPL v2 o posterior.
👤 Autor
Fabiola Díaz
- Website: fabydev.cl
- GitHub: @fabyDiaz
💖 Soporte
Si este plugin te ha sido útil, considera:
- ⭐ Darle una estrella en GitHub
- 🐛 Reportar bugs y sugerir mejoras
- 📣 Compartirlo con otros desarrolladores
¿Necesitas ayuda? Visita la documentación completa o abre un issue en GitHub.