2 formas de personalizar el diseño en WordPress (con código CSS)

Te será muy útil si estas personalizando tu WordPress.

Los temas profesionales, en comparación con los gratuitos, suelen tener un alto grado de personalización, aunque siempre hay detalles que echas en falta para dar el toque perfecto que quieres a tu sitio.

En muchas ocasiones necesitas realizar pequeñas modificaciones, tales como aumentar un poco el tamaño del texto del encabezado, quitar el subrayado de los enlaces o crear efectos a las imágenes, como por ejemplo el bonito efecto de imágenes en un marco redondo que puedes ver en este artículo.


WordPress permite realizar de forma sencilla modificaciones de diseño con CSS

Para llevar a cabo estos cambios es necesario modificar el diseño del tema que es controlado a través de las hojas de estilo CSS. ¡Ojo no es programación!. La sintaxis de CSS es sencilla y bastante intuitiva. Si eres un profesional te va a permitir diseñar sin límites, por el contrario, si no te sientes cómodo siempre puedes pedir ayuda a profesionales para ayudarte con los cambios.

Cómo funcionan las hojas de estilo en WordPress

Las hojas de estilo que utiliza un sitio realizado en WordPress se generan de forma dinámica a través del tema activo. A la hora de crear los ficheros de las hojas de estilo se tienen en cuenta los parámetros que has modificado dentro del menú “Apariencia”.

Es un dato importante a tener en cuenta, ya que la primera tentación para un diseñador es modificar directamente el fichero css de la hoja de estilos. No te recomiendo modificar los ficheros css directamente ya que son ficheros creados de forma automática. Las futuras actualizaciones o cambios realizados desde el menú Apariencia pueden sobrescribir tus cambios y perderías tu trabajo.

Te recomiendo dos formas de modificar la plantilla. A través de la opción CSS Adicional para realizar pequeñas modificaciones o creando un Tema hijo para realizar una personalización completa.

Opción 1 - Pequeños cambios a través de la opción “CSS Adicional”

Es la opción más sencilla y la ideal para sobrescribir cualquiera de los selectores CSS que tiene tu hoja de estilos.

Realiza estos pasos dentro del Administrador de WordPress:

  • Pulsa sobre Apariencia y selecciona Personalizar.
  • Selecciona la opción CSS Adicional
  • Introduce el código CSS y pulsa el botón Actualizar

En este vídeo puedes ver en un ejemplo como cambiar el color de fondo sobrescribiendo la regla de color que aplica la etiqueta:

La opción CSS Adicional tiene dos características que te van a ser de utilidad:
  • ¿Tienes un problema de diseño pero no sabes qué ha salido mal en el CSS? No hay problema. El analizador de sintaxis CSS que te ayudará a localizar los errores.
  • La segunda es un previsualizador que te va a permitir ver el resultado de las modificaciones antes de guardarlos.

Opción 2 - Crear un Tema hijo

La seguna opción para sobrescribir las reglas CSS es a través de la creación de un Tema hijo, también llamado Child Theme.

Es un proceso más complejo y sólo te lo recomiendo si además de la personalización css necesitas también realizar cambios en la programación del tema.

Necesitas tener acceso a los ficheros a través de una conexión FTP y un editor de texto como el Bloc de notas o Sublime.

Te dejo este artículo para descubrir como :


¿Te ha gustado? Mándame ánimos con un comentario. ¡Gracias!

Mabel.


Creative Commons License

Esta obra está bajo una licencia de Creative
Commons Reconocimiento-NoComercial-CompartirIgual
4.0 Internacional
.