3 formas fáciles de personalizar tu sitio de WordPress con CSS

WordPress ha evolucionado a lo largo de los años y hoy es una plataforma muy flexible y se puede personalizar fácilmente a través del editor Gutenberg. Sin embargo, a veces necesita más cobertura que la que proporciona el editor de Gutenberg.

Aquí es donde el CSS personalizado es útil. Los estilos CSS le permiten editar los colores, el espaciado, las fuentes, el diseño y, básicamente, cualquier otro elemento visual de su sitio de WordPress para que se vea exactamente como lo desea.

En este artículo, TipsMake lo guiará a través de los conceptos básicos para personalizar un sitio de WordPress con CSS.

3 formas fáciles de personalizar tu sitio de WordPress con CSS

Una vez que esté familiarizado con los conceptos básicos de CSS, puede agregar CSS personalizado a su sitio de WordPress utilizando uno de los siguientes métodos:

Método 1: Usar el Personalizador de WordPress

Con WordPress 4.7 o posterior, puede agregar CSS personalizado directamente desde el área de administración. Esta es la forma más fácil, gracias a la visualización en vivo, puede ver todos los cambios realizados en tiempo real.

Esta es también la forma más recomendada, porque todos los cambios que realice se guardan en el propio WordPress. Esto significa que no perderá el CSS personalizado aunque cambie o actualice el tema.

Estos son los pasos para hacer esto:

Paso 1: navega a Apariencia > Personalizar.

Personaliza imágenes de 3 formas sencillas para tu sitio de WordPress con CSS 1

Esto abrirá la herramienta de personalización de temas de WordPress, mostrando una vista previa en vivo de su sitio a la derecha y algunas opciones de personalización a la izquierda. Desplácese hasta la parte inferior del panel izquierdo y encontrará la pestaña CSS avanzado.

Paso 2: haz clic en la pestaña CSS avanzado.

Personaliza imágenes de 3 formas sencillas para tu sitio de WordPress con CSS 2

Esto abrirá un pequeño cuadro en el panel izquierdo donde puede agregar CSS personalizado. Puede ingresar tantas líneas de código CSS como desee. Lo bueno de este editor es que valida tu código y te avisa si hay algún error.

Paso 3: Publicar los cambios.

Cualquier regla de CSS válida que agregue aparecerá en el área de vista previa en vivo a la derecha. Para aplicar los cambios a la página web, haga clic en el botón Publicar en la parte superior del panel izquierdo cuando esté satisfecho. Si no desea que sus cambios surtan efecto de inmediato, también puede planear publicarlos más tarde o conservar su borrador.

Es importante tener en cuenta que cualquier cambio que realice con la Herramienta de personalización está relacionado con el tema actual. Si cambia a otro tema, los cambios desaparecerán a menos que copie el CSS personalizado y lo agregue al nuevo tema. Es una buena práctica guardar cualquier CSS personalizado que agregue al tema en el Bloc de notas. De esta manera, simplemente puede copiar y pegar el código en la sección "CSS avanzado" en otro tema.

Si esto suena demasiado complicado y prefiere una solución que le permita aplicar CSS personalizado a cualquier tema de WordPress que use, el siguiente método es para usted.

Método 2: usa un complemento

El complemento CSS personalizado almacena CSS personalizado por separado de su tema, por lo que sus cambios se pueden aplicar sin importar qué tema use. Estos complementos también vienen con características adicionales, como autocompletar, para que sea más fácil agregar CSS.

El único inconveniente es que son software de terceros, lo que significa que pueden ralentizar su sitio web. Sin embargo, la mayoría de estos complementos son livianos, por lo que generalmente tienen poco impacto en el rendimiento del sitio. Estos son algunos de los mejores complementos CSS personalizados que puede usar:

CSS personalizado simple

Simple Custom CSS es uno de los complementos de CSS personalizados más populares. Es ligero, fácil de usar y ofrece una gran funcionalidad. Es muy fácil de configurar. Todo lo que tiene que hacer es instalar y activar el complemento. Luego vaya a la sección Apariencia en el panel izquierdo del panel de control.

Verá una nueva opción llamada "CSS personalizado". Al hacer clic en él, se abre un editor donde puede agregar CSS personalizado. Haga clic en el botón Actualizar CSS personalizado para guardar los cambios. Para ver los cambios, simplemente actualice la página web.

CSS y JS personalizados simples

Si desea más funcionalidad, el complemento Simple Custom CSS y JS es una buena opción. Además de agregar CSS, también te permite agregar elementos de JavaScript.

Héroe de CSS

Si no desea escribir una sola línea de código, entonces el complemento CSS Hero es perfecto para usted. Este complemento proporciona un editor CSS intuitivo con menús desplegables y campos de entrada, lo que le permite editar casi cualquier estilo CSS en su sitio web sin escribir ningún código.

Método 3. Edita el código original

Los dos métodos anteriores del artículo le permiten agregar CSS personalizado a su sitio web sin tocar los archivos de temas. Sin embargo, en algunos casos es posible que desee editar el CSS para su tema o sí agregue CSS personalizado directamente al código de su tema.

Para hacer esto, deberá acceder a las hojas de estilo del sitio. Una manera fácil de acceder a esta hoja de estilo es a través del editor de temas del tablero de WordPress.

Imagen 3 de 3 La manera fácil de personalizar tu sitio de WordPress con CSS

Sin embargo, antes de continuar, debe tomar algunas precauciones. Primero, haga una copia de seguridad del sitio web. Al editar archivos de temas, es fácil cometer errores que pueden dañar su sitio web.

La copia de seguridad garantiza que tenga un sitio web de copia de seguridad completamente funcional para recuperarse si algo sale mal. Luego crea un subtema. Si realiza ediciones directas en el tema principal, los cambios se perderán cada vez que se actualice el tema.

Una vez que estas protecciones estén en su lugar, inicie sesión en el backend de WordPress. Ve a Apariencia > Editor de temas. Cuando haces clic en la opción del editor de temas, verás una ventana emergente que te advierte que no cambies el archivo del tema directamente. Si ha seguido los pasos anteriores, puede continuar.

Haga clic en I para saber continuar.

Figura 4 de 3 formas sencillas de personalizar su sitio de WordPress con CSS

Después de hacer clic, verá la hoja de estilo del sitio predeterminado. De lo contrario, mire en el panel derecho y haga clic en style.css debajo de las opciones de la hoja de estilo.

Personaliza imágenes de 3 formas sencillas para tu sitio de WordPress con CSS 5

Desde aquí puede cambiar directamente el archivo del tema. Asegúrese de hacer clic en Guardar y actualizar cuando haya terminado.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir
error: Content is protected !!