Personalización de temas de WordPress con CSS

Los temas son uno de los mayores puntos de venta de WordPress. El tema correcto puede hacer que su sitio web realmente se destaque. Sin embargo, por lo general querrás hacer al menos algunos cambios personalizados en cualquier tema que uses, para que todo salga bien.

En la mayoría de los casos, necesitará usar hojas de estilo en cascada (CSS) para personalizar el estilo de su tema. Con WordPress, hay varias maneras de hacer esto. Incluso si no tiene experiencia en el manejo de código, puede agregar fácilmente sus propios ajustes de CSS al tema de WordPress.

En esta guía, veremos tres métodos que puede usar para agregar y editar CSS personalizado en WordPress. Lo guiaremos a través de todo el proceso y hablaremos sobre cuándo tiene sentido usar cada técnica. ¡Empecemos!

Agregue CSS personalizado con el personalizador de temas

Nivel de experiencia: Principiante

El Personalizador de WordPress le permite realizar cambios en el diseño de su sitio web y obtener una vista previa en tiempo real. Para acceder a él, inicia sesión en tu panel de control de WordPress y navega hasta la pestaña Apariencia > Personalizar :

Hay muchas configuraciones con las que puedes jugar aquí. Sin embargo, ahora mismo busca la pestaña CSS adicional . Una vez que haga clic en él, se abrirá una nueva sección, con un campo donde puede agregar CSS personalizado:

Si es nuevo en CSS, puede leer más sobre cómo usarlo con WordPress en el Codex oficial. También hay muchos otros recursos excelentes sobre los conceptos básicos de CSS, y recomendamos consultar algunos de ellos.

CSS puede volverse un poco complejo, pero hay muchas cosas que puede lograr con solo conocer los conceptos básicos. Lo mejor de usar el Personalizador de WordPress es que le permite obtener una vista previa instantánea de cualquier cambio que realice con CSS. Eso significa que este enfoque es perfecto para aprender cómo funciona CSS.

Nota : los cambios que realice con el Personalizador no persistirán si cambia de tema. Además, actualizar su tema actual puede eliminar su CSS personalizado. Por lo tanto, no recomendamos este enfoque si tiene la intención de realizar muchos cambios u opciones de temas intermedios.

Agregue CSS personalizado con un complemento

Nivel de experiencia: Principiante a Intermedio

El método anterior funciona bien, pero puede ampliar sus opciones mediante el uso de complementos. En las siguientes secciones, exploraremos tres complementos que le permiten personalizar su tema de WordPress.

Nota : el nivel de experiencia para editar CSS de WordPress usando complementos dependerá de la herramienta que use. Recomendamos probarlos todos y ver cuál se siente más cómodo.

Editor de CSS avanzado

Si te gusta usar el Personalizador de WordPress, pero deseas que ofrezca más opciones, vale la pena echarle un vistazo a este complemento. Con Advanced CSS Editor, podrá agregar CSS personalizado para computadoras de escritorio, teléfonos y tabletas. De esta manera, puede ajustar la apariencia de su sitio web en cada tipo de dispositivo.

Después de instalar el complemento de WordPress, vaya a la pestaña Apariencia > Personalizador en su tablero. Debería ver una nueva opción de Editor de CSS avanzado , que le proporciona acceso a varios editores para cada tipo de dispositivo:

Todo lo que tiene que hacer es agregar el CSS personalizado que desee, probar para asegurarse de que funciona correctamente y guardar los cambios en su tema.

Ventajas:

• Obtiene control total sobre cómo se ve su sitio web en todos los dispositivos.
• Todavía puedes editar tu tema a través del Personalizador.

Contras:

• Agregar CSS personalizado para múltiples tipos de dispositivos puede ser mucho trabajo.

Calificación promedio: 4.5/5

Nota: este complemento también incluye una opción para minimizar su CSS, lo que puede ayudar a disminuir los tiempos de carga de su sitio.

CSS personalizado modular

Modular Custom CSS le permite agregar CSS a su tema a través del Personalizador de WordPress. Sin embargo, también agrega algunas características muy bienvenidas al editor de CSS predeterminado. Para ser más específicos, este complemento le permite crear CSS personalizado para temas individuales y realizar cambios globales que persisten en cualquier tema que configure:

Para acceder a estos campos, debe volver a la sección Apariencia > Personalizador > CSS adicional . Una vez que esté allí, puede comenzar a hacer cambios.

Ventajas:

• Puede agregar CSS personalizado solo para temas específicos y realizar cambios que persistirán incluso si cambia de tema.

Contras:

• Es posible que el CSS 'Global' no funcione bien con todos los temas, por lo que debe tener cuidado cuando cambie a uno nuevo.

Calificación promedio: 5/5

CSS de origen del sitio

SiteOrigin CSS es una desviación de los complementos de los que hemos hablado hasta ahora. En lugar de agregar nuevas funciones al Personalizador, ofrece un editor de CSS de WordPress independiente. Puede acceder a este nuevo editor navegando a la pestaña Apariencia > CSS personalizado después de instalar el complemento:

A primera vista, este editor de CSS no parece gran cosa. Sin embargo, si hace clic en el ícono del ojo, iniciará un editor visual. Aquí, puede hacer clic en cualquier elemento de su tema y editarlo fácilmente usando CSS:

El complemento SiteOrigin CSS puede ser un poco abrumador al principio. Sin embargo, también puede ahorrarle mucho tiempo, ya que no tendrá que buscar los selectores correctos. Todo lo que tiene que hacer es hacer clic en el elemento que desea modificar y luego agregar el código CSS que desee.

Ventajas:

• Puede editar cualquier elemento que desee en su sitio web haciendo clic en él.
• Este complemento le permite cambiar algunos aspectos simples de su tema sin tener que usar CSS, como sus fuentes.

Contras:

• Puede ser difícil hacer un seguimiento de todo el CSS personalizado que agrega a su tema si modifica varios elementos.

Calificación promedio: 4.9/5

Editar CSS con hoja de estilo de tema secundario

Nivel de experiencia: Avanzado

Un tema hijo es una copia de un tema existente (conocido como "principal"). Los temas secundarios le permiten realizar cambios en su sitio web de WordPress de forma segura. Esto se debe a que aún puede actualizar el tema principal, sin perder ninguno de sus ajustes de CSS personalizados. Además, si agrega cualquier CSS que afecte negativamente a su sitio, simplemente puede desactivar el tema secundario.

Cualquier CSS personalizado que agregue a un tema secundario anulará los estilos de sus padres. Sin embargo, para que esto funcione, primero deberá saber cómo crear un tema secundario. Una vez que su 'hijo' esté listo, puede acceder a sus archivos usando un cliente FTP como FileZilla.

Después de conectarse a su sitio web a través de FTP, querrá ubicar su carpeta raíz, que a menudo se llama public_html o www , o lleva el nombre de su sitio web:

A continuación, navegue hasta el directorio wp-content/themes . Allí encontrará carpetas individuales para todos sus temas, incluido el niño que configuró. Abra la carpeta del tema secundario y busque el archivo style.css dentro de:

Haga clic derecho en el archivo del tema y seleccione la opción Ver/Editar . Esto abrirá el archivo con su editor de texto predeterminado, lo que le permitirá realizar cambios en él. Eso significa que puede agregar CSS personalizado a su tema, solo que ahora está usando un editor de texto completo en lugar del Personalizador de WordPress.

Cuando haya terminado, guarde los cambios en el archivo y cierre el editor. Luego, puede visitar su sitio web para ver si los cambios que realizó funcionaron según lo previsto. Si no lo hicieron, puede volver a su archivo style.css y seguir ajustando su CSS.

Nota: Esta es una descripción general de alto nivel, y hay mucho más para configurar y usar un tema secundario. Le sugerimos que proceda con cuidado si es nuevo en este proceso.

CSS personalizado con personalizador de temas frente a complementos de CSS frente a hoja de estilo de tema secundario

Como puede ver, tiene muchas opciones cuando se trata de agregar CSS personalizado a WordPress. Sin embargo, elegir el enfoque correcto puede ser un desafío. Analicemos las opciones, según su nivel de experiencia con la plataforma y con CSS en general:

• Eres nuevo en WordPress y no estás acostumbrado a usar CSS. En este escenario, su mejor opción es quedarse con el personalizador de WordPress. Con él, podrá obtener una vista previa de los cambios al instante y acostumbrarse a usar CSS.
• Tienes algo de experiencia con WordPress y CSS. En esta etapa, querrá más opciones que las que proporciona el personalizador predeterminado. Por lo tanto, recomendamos usar complementos que mejoren su funcionalidad para editar CSS personalizado en WordPress.
• Eres un veterano de WordPress que se siente cómodo usando CSS. Si no se siente intimidado por el CSS y los fragmentos de código, probablemente desee configurar un tema secundario y editar su hoja de estilo manualmente.

Tenga en cuenta que estas son solo pautas, y debe sentirse libre de usar cualquier enfoque que le resulte más cómodo.

Mejore la experiencia digital con un excelente diseño y alojamiento de primer nivel

El diseño de su sitio web juega un papel importante en lo que los visitantes piensan al respecto. Con WordPress obtienes acceso a miles de temas y puedes editar cualquiera de ellos usando CSS personalizado.

Sin embargo, ejecutar un sitio web exitoso no se trata solo de apariencia. También necesitará alojamiento web de WordPress que brinde excelente rendimiento, seguridad y soporte. ¡Con WP Engine, obtendrá acceso a todas esas funciones con cada uno de nuestros planes!