Cómo agregar CSS personalizado a su sitio web de WordPress

Seguramente hay muchas formas interesantes de crear una apariencia específica para su sitio web, si eso es lo que desea. A veces, tener un conjunto limitado de opciones para elegir es mucho más fácil y, probablemente, más productivo. Si está utilizando WordPress, el sistema de administración de contenido que controla dos tercios del mercado de CMS, puede decidir qué tan involucrado quiere estar en la elaboración de la apariencia de su sitio web.

El primer nivel de personalización suele ser el tema.. Para algunos, también podría ser el último nivel, porque un buen tema puede crear fácilmente una apariencia apropiada para la función del sitio web. Entonces, si está en el negocio de los restaurantes, por ejemplo, puede elegir un tema de comida y restaurante para su sitio web y listo. O, si tiene una startup de TI, puede conformarse con un gran tema de tecnología de WordPress.

Cada tema viene con algunas opciones de personalización. Es posible que pueda elegir los diseños de página, por ejemplo, o el aspecto de ciertos elementos de la página. Pero si está buscando hacer algunos cambios más allá de los que vienen con el tema, usar CSS personalizado sería una buena manera de hacerlo. Estas son las tres formas en que puedes hacerlo.

Cómo agregar CSS personalizado usando el personalizador

La forma más conveniente de agregar CSS personalizado a su sitio web es usar el Personalizador. Busque la opción «Apariencia» en el menú del tablero. Pasa el cursor sobre él y verás el botón «Personalizar». Haga clic en él para acceder al Personalizador.

Apariencia Personalizar

Una vez dentro, tendrás acceso a diferentes opciones de personalización, según el tema y los plugins que tengas instalados. Allí mismo, en la parte inferior, estará la opción «CSS adicional».

CSS adicional

Haga clic en él y entrará en el área donde puede agregar todo el CSS personalizado que desee. Podrás ver los efectos de cada alteración que hagas en tiempo real, pero no se publicarán hasta que presiones el botón «publicar».

Configuración adicional de CSS

La naturaleza WYSIWYG del Personalizador puede ser su mayor beneficio, pero no es el único. Viene con WordPress como característica principal, por lo que puede usarlo de inmediato, sin necesidad de retoques adicionales con los complementos. También obtendrá una verificación bastante básica para asegurarse de que su sintaxis sea correcta.

En relación :  Crema Minecraft Magma: ¡Cómo hacer, usos y más!

El problema de agregar CSS personalizado de esta manera es que todo está vinculado a su tema.. Si desea cambiar a otro, el CSS personalizado no seguirá. Al menos no solo, es decir, siempre puede copiarlo en su nuevo tema.

Agregue CSS personalizado editando la hoja de estilo del tema (secundario)

El campo CSS adicional en el Personalizador no es el único lugar donde puede agregar CSS personalizado a su sitio web de WordPress. Si desea realizar muchos cambios utilizando cientos de líneas de código, la hoja de estilo de su tema puede ser un buen lugar para hacerlo.

Seleccionar tema para editar

Editar la hoja de estilo es una operación avanzada, y no solo porque implica que comprendes CSS lo suficientemente bien como para poder agregar cientos de líneas de código al personalizar el sitio web. El principal problema con la edición de la hoja de estilo es que cada vez que actualice su tema, las ediciones que haya realizado se eliminarán.

La forma de solucionar este problema es creando un tema secundario. La mejor manera de entender qué es un tema secundario de WordPress sería pensar en él como una capa que creas sobre el tema principal normal. Los cambios que realice en esta capa permanecerán igual incluso cuando actualice el tema principal.

Entonces, si desea agregar CSS personalizado a su sitio web, debe crear un tema hijo primero. Luego, navegue hasta el Editor de temas, busque el archivo stylesheet.css y libere su código CSS personalizado.

Cómo agregar CSS personalizado usando un complemento de CSS personalizado

Si desea agregar CSS personalizado que sobreviva a un cambio completo del tema, por ejemplo, ni el Personalizador ni la edición de la hoja de estilo serán suficientes. Pero aún puede realizar cambios que puede transferir a un tema diferente utilizando un complemento CSS personalizado como el Complemento CSS personalizado simple.

CSS personalizado simple

Una vez que haya descargado e instalado el complemento Simple Custom CSS, tendrá dos formas de acceder a él. Para llegar a la pantalla de administración del complemento, puede navegar a la opción de apariencia del menú principal y luego elegir CSS personalizado en el submenú. Puede agregar el CSS personalizado en la ventana y hacer clic en el botón «Actualizar CSS personalizado» para guardar los cambios.

Botón de actualización de CSS personalizado

También es posible usar CSS personalizado simple desde el Personalizador. Después de navegar al Personalizador – Apariencia > Personalizar – haga clic en la pestaña «CSS personalizado simple» y accederá a la sección del personalizador del complemento. Allí verás la vista previa de todos los cambios que realices antes de guardarlos.

En relación :  14 características útiles de WordPress que (probablemente) no estás usando

¡Vamos a envolverlo!

Una de las mejores cosas de WordPress es la libertad que te da cuando se trata de personalizar tu sitio web. Pero si no puede encontrar todas las opciones de personalización que necesita entre los muchos temas que puede descargar e instalar, no tiene que preocuparse. Puede realizar los cambios que necesita agregando CSS personalizado. Con tres métodos diferentes que puede usar para hacerlo, seguramente encontrará uno que sea tan conveniente como lo necesita.