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

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

Seguro que 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 desea estar en la creació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 terminar con él. O, si tiene una puesta en marcha de TI, puede conformarse con un tema de WordPress de gran tecnología.

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 en 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 puede hacerlo.

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 panel. Coloca 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 hayas instalado. Allí, 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á ver los efectos de cada alteración que realice en tiempo real, pero no se activarán hasta que presione el botón "publicar".

Configuración de CSS adicional

La naturaleza WYSIWYG del Personalizador puede ser su mayor beneficio, pero no es el único. Viene con WordPress como una característica principal, por lo que puede usarlo desde el primer momento, sin ningún retoque adicional con los plugins. También obtendrá una verificación bastante básica para asegurarse de que su sintaxis esté bien.

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 puedes copiarlo en tu 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 usted comprende 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, se eliminarán las ediciones que haya realizado.

La forma de solucionar este problema es creando un child tema. La mejor forma de entender lo que es WordPress child El tema sería pensar en él como una capa que se crea sobre el tema regular (padre). Los cambios que realice en esta capa permanecerán iguales incluso cuando actualice el tema principal.

Entonces, si desea agregar CSS personalizado a su sitio web, debe crear un child tema 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 plugin CSS personalizado

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

CSS personalizado simple

Una vez que haya descargado e instalado el plugin CSS personalizado simple, tendrá dos formas de acceder a él. Para llegar a la pantalla de administración del plugin, 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 de personalización del plugin. Allí, verá la vista previa de todos los cambios que realice antes de guardarlos.

¡Vamos a envolverlo!

Una de las mejores cosas de WordPress es la libertad que le brinda cuando se trata de personalizar su 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 necesite agregando CSS personalizado. Con tres métodos diferentes que puede usar para hacerlo, seguramente encontrará uno que sea tan conveniente como lo necesite.

Si quieres conocer otros artículos parecidos a Cómo agregar CSS personalizado a su sitio web de WordPress puedes visitar la categoría Tutoriales.

Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.