Su sitio en WordPress está funcionando, pero ¿se ve igual que cientos de otros? El mismo tema estándar, las mismas fuentes, sin un ápice de personalidad. La plataforma ofrece muchísimas opciones de personalización; la cuestión es por dónde empezar sin romper el sitio en el intento.

Cambiar el diseño de un sitio WordPress no implica necesariamente reconstruirlo todo desde cero. A veces, tres o cuatro ajustes puntuales bastan para que su sitio deje de verse genérico y empiece a ser memorable. A continuación, un desglose paso a paso: desde la paleta de colores hasta el favicon, con herramientas específicas y sin código donde sea posible prescindir de él.

💡 Resumen rápido:

• Elija una paleta de 3 colores usando Adobe Color, Coolors o ColorHexa
• Configure las fuentes mediante Google Fonts o Use Any Font para tipografías personalizadas
• Cambie el formato de fecha y hora con una sola línea de código o a través del Personalizador

Elegir una paleta de colores

Los colores causan la mitad de la impresión. Un visitante aún no ha leído el titular, pero ya intuye si el sitio se siente "premium" o "barato", técnico o creativo, confiable o cuestionable. La paleta de colores es el ancla visual de su marca.

El enfoque óptimo son tres colores base: primario (fondo/texto), de acento (botones, enlaces, elementos importantes) y de apoyo (bordes, divisores, estados hover). Más de tres corre el riesgo de generar ruido visual; menos resulta aburrido. La regla principal: use el color de acento con moderación, solo donde necesite captar la atención.

Por dónde empezar con la selección de colores:

Adobe Color (antes Kuler)

Una herramienta de Adobe para crear paletas de colores basadas en reglas de armonía: monocromática, complementaria, triádica, análoga. En su interior hay una rueda de color donde usted fija el tono base y el sistema selecciona automáticamente el resto. Puede extraer una paleta de una imagen cargada, lo cual es conveniente si tiene una referencia. Disponible gratuitamente en color.adobe.com.

Coolors

Un generador de paletas diseñado para la velocidad. Presione la barra espaciadora y obtendrá una nueva combinación de cinco colores. Puede bloquear cualquier color y girar el resto. El resultado son códigos HEX listos para usar. Existe un complemento para Chrome/Firefox y una aplicación para iOS. Funciona en coolors.co.

ColorHexa

ColorHexa no es solo un cuentagotas, sino una enciclopedia del color. Ingrese un código HEX, RGB o un nombre y obtendrá una página con tonos complementarios, degradados, tríadas, composición porcentual y vista previa para daltónicos (cómo perciben el color las personas con distintos tipos de daltonismo). Mezclador de colores: ingrese #ff0000+#0000ff+#ff00ff y obtenga el resultante #aa00aa con un desglose completo. colorhexa.com.

Paletas HTML listas para usar

Si no quiere elegir desde cero, tome paletas ya preparadas. htmlcolorcodes.com ofrece 216 colores seguros para la web con códigos HEX, compatibles con CSS, Photoshop y cualquier programa gráfico. El servicio Paletton (antes Color Scheme Designer) proporciona esquemas con una vista previa sobre la maqueta de un sitio.

Generador de degradados CSS

Los degradados están volviendo, y ahora no son las bandas de 2012, sino transiciones sutiles en fondos de secciones y botones. ColorZilla Gradient Editor es un editor similar a Photoshop: establezca puntos de anclaje con colores y transparencia, mueva el punto medio, copie el CSS terminado. Admite degradados lineales, radiales y repetidos. Existe un complemento para Chrome y Firefox con un cuentagotas directamente en el navegador.

Elección y configuración de tipografías

Los colores atraen la atención; el texto la retiene. La tipografía afecta la legibilidad y la percepción del tono: una serifa estricta crea una sensación de calidad editorial, mientras que una sans-serif limpia transmite un aire tecnológico.

El problema con las tipografías web es que los visitantes solo verán las que tengan instaladas en sus equipos, a menos que utilice tipografías incrustadas (web). Por lo tanto, para un estilo personalizado, solo fuentes externas.

Regla básica: no más de dos tipografías por página. Una para los títulos (grande, distintiva), una segunda para el cuerpo del texto (máxima legibilidad). Una tercera solo si necesita una monoespaciada para el código.

Google Fonts, la fuente principal

Un catálogo gratuito de más de 1.500 familias en fonts.google.com. La conexión se hace en dos líneas. El método clásico es a través del archivo header.php del tema:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

O en style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Después de importarla, la fuente está disponible en cualquier regla CSS:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

Matiz GDPR: las fuentes de Google Fonts cargadas directamente desde los servidores de Google transmiten las direcciones IP de los visitantes. Desde 2022, los tribunales de la UE reconocen esto como una infracción. La solución es el plugin Local Google Fonts, que descarga las fuentes a su servidor y las sirve localmente. Una alternativa para quienes no quieran usar plugins es un artículo sobre cómo cargar Google Fonts localmente en nuestro blog.

Fuentes personalizadas mediante plugin

Si necesita una fuente corporativa que no esté en Google Fonts, pruebe Use Any Font. Suba un archivo ttf, otf o woff, y el plugin lo convierte a woff2 y lo añade al panel de administración. La versión gratuita permite subir una fuente; la versión Pro elimina ese límite.

Conexión manual mediante @font-face

Si prefiere código a plugins, coloque el archivo de la fuente en /wp-content/themes/your-theme/fonts/ y añada al style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Uso:

1
#menu { font-family: 'Museo300', sans-serif; }

Formato de fecha y hora

El formato de fecha estándar no siempre encaja con el diseño. Afortunadamente, WordPress le permite cambiarlo sin plugins.

Método 1: mediante el Personalizador (sin código)

Vaya a Apariencia → Personalizar → Ajustes generales. Allí también se cambia el formato de hora. Funciona en la mayoría de temas clásicos.

Método 2: mediante single.php (control preciso)

Abra Apariencia → Editor de temas → single.php. Busque la función the_time() o the_date():

1
<?php the_time('F Y'); ?>

Símbolos de formato:

• l, nombre completo del día (L minúscula)
• F, mes como palabra
• j, día del mes como número
• Y, año con cuatro dígitos
• y, año con dos dígitos

Ejemplos de combinaciones:

('l, j F Y') → domingo, 14 de junio de 2026. ('j F, Y') → 14 de junio de 2026.

No toque las comillas simples dentro de los paréntesis, edite únicamente los símbolos entre ellas. Si el tema usa the_date() en lugar de the_time(), el formato se cambia más fácilmente: Ajustes → Generales → Formato de fecha.

Uso de imágenes

Añadir imágenes en WordPress se hace mediante el botón «Añadir medio» en el editor de entradas. Coloque el cursor donde desee insertarla → Añadir medio → seleccione una imagen de la biblioteca de medios o suba una nueva.

A la derecha está el panel de configuración del adjunto: título, texto alternativo (importante para SEO y accesibilidad), tamaño, alineación, enlace. Para la velocidad del sitio, suba las imágenes ya comprimidas (TinyPNG o ShortPixel antes de subirlas). Más detalles en nuestra guía de la biblioteca de medios de WordPress.

Añadir un favicon

Un favicon es el pequeño cuadrado que aparece en la pestaña del navegador y en los marcadores. Un pequeño detalle que genera reconocimiento: cuando un usuario tiene 20 pestañas abiertas, el favicon es lo único que distingue visualmente su sitio del resto.

Cómo crear un favicon

El servicio más fiable es RealFaviconGenerator. Suba una imagen cuadrada (al menos 260×260) y obtendrá un paquete de iconos para todas las plataformas: iOS, Android, mosaicos de Windows, pestaña fijada de Safari. Además, incluye el código HTML listo para insertar.

Si necesita un archivo .ico simple de 16×16, cualquier editor gráfico que guarde en .ico funcionará (GIMP es gratuito). O utilice el servicio en línea Favicon.io.

Cómo instalar en WordPress

El método más sencillo es el Icono del sitio integrado. Desde WordPress 4.3, está disponible en el Personalizador:

Apariencia → Personalizar → Identidad del sitio → Icono del sitio. Suba una imagen cuadrada y WordPress la recortará automáticamente a los tamaños necesarios para todas las plataformas. Sin plugins, sin FTP, sin tocar header.php.

El método con plugin es All In One Favicon, que ofrece más control: iconos separados para el panel de administración, la parte pública y diferentes dispositivos. Pero para el 95% de los sitios, el Icono del sitio integrado es suficiente.

Método manual (añadir a header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Coloque el archivo favicon.ico en la raíz de la carpeta del tema. No olvide duplicarlo en public_html para que el favicon se abra en yoursite.com/favicon.ico.

⁉️🤔 Preguntas frecuentes

¿Puedo cambiar el diseño del sitio sin perder el contenido?

Sí, cambiar un tema de WordPress no afecta a las entradas, páginas ni archivos multimedia. Estos se almacenan en la base de datos de forma independiente al tema. Lo único que podría «romperse» es la maquetación y la posición de los elementos, especialmente si el tema anterior usaba tipos de contenido personalizados o shortcodes. Antes de cambiar, haga una copia de seguridad completa (hosting + base de datos). Para pruebas seguras, use un sitio de staging; muchos proveedores de hosting (SiteGround, Kinsta, WP Engine) lo ofrecen con un solo clic.

¿Cuántas fuentes son óptimas para un sitio?

Dos: una para los títulos y otra para el cuerpo del texto. Una tercera (monoespaciada) para el código, si lo hay en el sitio. Cada fuente adicional aumenta el tiempo de carga entre 200 y 400 ms y genera ruido visual. Google Fonts le permite seleccionar solo los pesos necesarios (normal + negrita = 2 archivos en lugar de 9), y el plugin Local Google Fonts las almacena adicionalmente en caché en su servidor.

¿Es obligatorio trabajar con código para personalizar?

No. El Personalizador de WordPress (Apariencia → Personalizar) cubre la mayoría de las tareas: colores, fuentes, logotipo, favicon, imágenes de fondo, CSS. Los temas de bloques (desde WP 5.9) ofrecen el Editor del sitio, un método aún más visual y sin código. El código es necesario cuando se requiere un ajuste fino: formato de fecha en single.php, @font-face personalizado, CSS específico para un plugin concreto.

¿Qué hacer si el sitio se rompe después de cambiar de tema?

Primero: no se alarme, su contenido no ha desaparecido. Segundo: si el panel de administración es accesible, vuelva al tema anterior (Apariencia → Temas → Activar). Si el panel de administración no es accesible, acceda por FTP a /wp-content/themes/, cambie el nombre de la carpeta del nuevo tema (añada _disabled) y WordPress cambiará automáticamente al tema predeterminado. Tras la recuperación, active WP_DEBUG en wp-config.php para ver los errores.

¿Cómo comprobar si el favicon funciona?

Abra yoursite.com/favicon.ico; si se muestra el icono, el archivo está en su lugar. En el navegador, el favicon no aparece de inmediato: se almacena en caché de forma agresiva. Para comprobarlo, abra el sitio en modo incógnito o fuerce la actualización de la caché (Ctrl+Shift+R). RealFaviconGenerator proporciona una herramienta de comprobación de favicon por URL.

Rediseño de WordPress: qué hacer primero

El orden de las acciones para la personalización desde cero: paleta de colores → fuentes → logotipo y favicon → formato de fecha → disposición de widgets y menús. En esta secuencia exacta: los colores y la tipografía son la base sobre la que se construye todo lo demás.

Si el sitio ya está en funcionamiento y recibe tráfico, no realice el rediseño en el dominio activo. Copia de staging + pruebas → migración. Los cambios perceptibles para los motores de búsqueda (cambios en la estructura HTML, encabezados, URL) deben hacerse con conocimiento: un rediseño repentino sin redirecciones puede hacer caer el posicionamiento.

Para quienes deseen profundizar en el tema: guía de fuentes personalizadas en nuestro blog, artículo sobre la biblioteca multimedia de WordPress para trabajar con imágenes, y un análisis detallado de la carga local de Google Fonts con una prueba de antes y después en GTmetrix.

Comience con tres colores y dos fuentes; el resto vendrá solo.