Introducción
Genera una paleta a partir de un color base, compara el contraste de texto y fondo y exporta variables CSS para tu diseño.
Esta guía explica cómo instalar WPSDDC Color Shades, preparar sus opciones y utilizarlo en el trabajo diario con WordPress.
Requisitos y Compatibilidad
- WordPress 6.0 o superior.
- PHP 8.1 o superior.
- Una cuenta con permisos para instalar y activar plugins. Los ajustes del sitio requieren permisos de administrador.
Funciona de forma independiente: no requiere WP StudioDDC HQ ni otro plugin de la colección para registrar su pantalla de administración.
Instalación
- Obtén el paquete ZIP instalable de WPSDDC Color Shades y conserva una copia de seguridad de la web antes de instalarlo.
- En el administrador, abre Plugins → Añadir nuevo plugin → Subir plugin.
- Selecciona el archivo ZIP, pulsa Instalar ahora y después Activar plugin.
- Abre WPSDDC → Color Shades para acceder a sus controles y a la información de uso.
Para una instalación manual, copia la carpeta wpsddc-color-shades en wp-content/plugins/ y activa el plugin desde Plugins. El archivo principal del paquete es wpsddc-color-shades.php.
Configuración y Opciones
Abre WPSDDC → Color Shades, revisa las opciones siguientes y guarda únicamente las funciones que vayas a utilizar. Estos son los valores iniciales; una configuración guardada anteriormente puede tener otros valores.
| Ajuste | Valor inicial | Opciones |
|---|---|---|
| Color Base | #2271b1 | Color hexadecimal |
| Color del Texto para Comprobar el Contraste | #1d2327 | Color hexadecimal |
| Color del Fondo para Comprobar el Contraste | #ffffff | Color hexadecimal |
Instrucciones de Uso
- Abre WPSDDC → Color Shades e introduce el color base con el que quieras trabajar.
- Define los colores de texto y fondo utilizados en la comparación de contraste y guarda los valores.
- Revisa la paleta generada y el resultado numérico del contraste para la pareja seleccionada.
- Copia o exporta las variables CSS y añade los valores que elijas a la hoja de estilos de tu proyecto.
- Comprueba el tamaño del texto, el grosor y los estados interactivos en la interfaz resultante.
Ejemplo Práctico
Compara el color del texto con el fondo de página previsto antes de utilizar las variables exportadas. Repite la comparación en los estados hover y foco que utilicen otros colores.
Datos y Funcionamiento
Los cálculos y ajustes son locales. La utilidad no cambia el esquema de color de la administración ni contacta con servicios remotos. Un resultado de contraste no certifica por sí solo la accesibilidad de una interfaz.
Preguntas Frecuentes
¿Un resultado de contraste correcto certifica la accesibilidad?
No. El contraste es una comprobación. Revisa también el teclado, el foco, las etiquetas, los tamaños de texto y el resto de la interfaz.
¿Dónde se consulta la ayuda incluida?
Abre WPSDDC → Color Shades y despliega la pestaña nativa Ayuda, en la parte superior de la pantalla. Sus apartados explican los primeros pasos, los datos y límites, y las versiones y vías de soporte.
Solución de Problemas
Si la web no cambia al guardar un color, aplica las variables exportadas en tu tema u hoja de estilos. Esta utilidad no sustituye el esquema de color del administrador ni reescribe los estilos del tema.
Actualizaciones y Desactivación
- Realiza una copia de seguridad de la base de datos y de los archivos antes de actualizar.
- Si WordPress ofrece una actualización en Plugins, utiliza su acción nativa. Para actualizar mediante ZIP, sube el nuevo paquete y elige reemplazar la versión instalada cuando WordPress lo solicite.
- Revisa los cambios incluidos en el paquete, conserva la configuración que necesites y comprueba un flujo habitual después de actualizar.
Para detener la función, desactiva el plugin desde Plugins. La desactivación no equivale a borrar el contenido de WordPress ni sustituye una copia de seguridad.
Soporte y Enlaces Relacionados
Para solicitar ayuda, indica las versiones de WordPress, PHP y el plugin, el ajuste implicado y los pasos necesarios para reproducir el problema. Comparte únicamente la información necesaria para describirlo.