3 formas simples de agregar CSS personalizado a su sitio web de WordPress










  • agregar css a wordpress

    Las hojas de estilo en cascada (CSS) personalizadas le permiten diseñar su sitio con un mayor control sobre cómo se ven las páginas y cómo se comportan. El script que se incluye en CSS puede gobernar todo, desde las imágenes hasta los tipos de fuente que se muestran en sus páginas.

    Cosas como los colores de los enlaces, las imágenes de fondo e incluso los sonidos incrustados podrían provenir de estos archivos. Sin embargo, esto plantea la pregunta, ¿cómo agrego CSS personalizado en WordPress?

    En realidad, modificar el archivo CSS es mucho más simple de lo que cree y he reunido 3 métodos que puede usar para agregar CSS personalizado.

    ¿Cuánto conocimiento de codificación necesito?

    Si ha realizado una búsqueda rápida en Google sobre CSS de antemano, estoy seguro de que ha visto innumerables ejemplos de fragmentos de código CSS. Hoy en día, puede encontrar casi cualquier cosa en Internet, y el código CSS no es diferente.

    Y como verá en los siguientes métodos, agregar CSS personalizado no tiene nada que ver con las habilidades de codificación. En cambio, se trata de encontrar la ubicación o el archivo correctos para pegar el código.

    Por lo tanto, no necesita ser un experto en codificación para agregar CSS personalizado.

    3 métodos para agregar CSS personalizado en WordPress

    1. Cambios en el Nivel de Codificación

    Muchos propietarios de sitios web encuentran que modificar directamente el archivo CSS es la ruta más fácil de tomar. Y con toda honestidad, es el método más simple porque se puede hacer directamente desde WordPress sin complementos adicionales.

    Para hacer esto, haga clic en Apariencia y seleccione la opción Editor de temas.

    Editor de temas

    Esto mostrará todos los archivos asociados con el tema que está utilizando actualmente. Como resultado, solo necesita asegurarse de que está editando el archivo CSS correcto. Y el archivo que elija editar depende del elemento específico que desee personalizar.

    Aunque muchas personas encuentran esta parte de la personalización más fácil, tiene sus inconvenientes.

    Por ejemplo, puede que tenga que volver a codificar el CSS si decide cambiar de tema. La mayoría de los temas usarán su propio archivo CSS para el diseño general. Por lo tanto, los cambios que realice en el archivo de un tema no tendrán ningún impacto en otro.

    Sin embargo, vale la pena señalar que no cambiará de tema muy a menudo.

    Una buena solución a esto es guardar todo el CSS personalizado que agrega al archivo de un tema en un bloc de notas. De esa manera, puede usar el mismo código en un tema diferente si así lo desea.

    Sin embargo, muchos propietarios de sitios optan por utilizar temas secundarios . De esta manera, cualquier cambio que realice en CSS no se eliminará si el desarrollador actualiza el tema principal. Obtiene todos los beneficios sin perder la codificación personalizada.

    2. Complementos CSS para personalización

    Como sabe cualquier desarrollador de WordPress, los complementos le permiten personalizar cualquier parte de su sitio web sin escribir una sola línea de código en la mayoría de los casos. Por lo tanto, no debería sorprendernos saber que hay una variedad de complementos que hacen que agregar CSS personalizado sea muy fácil.

    Y esto tiene una gran ventaja sobre el último método.

    En lugar de que el CSS se guarde directamente en un archivo de tema, se guarda dentro del archivo del complemento. Esto significa que puede usar libremente el mismo CSS en varios temas sin tener que volver a escribirlo. Es un gran ahorro de tiempo para aquellos desarrolladores que cambian de tema con frecuencia.

    Otra gran ventaja es que muchos complementos tienen medidas de seguridad que evitan que el código bloquee su sitio web. Después de todo, no se necesita mucho para hacer caer un sitio web al modificar un archivo de tema y este método lo evita por completo.

    Por lo tanto, es probablemente el mejor método a considerar cuando recién comienza.

    Aquí hay algunos complementos excelentes para considerar usar:

    Editor visual de estilos CSS

    Editor visual de estilos CSS

    El complemento Visual CSS Style Editor es una opción increíble para agregar CSS personalizado a WordPress. Está construido con un editor visual y te da el control de más de 60 propiedades de estilo en el sitio web.

    Su herramienta receptiva le permite editar cualquier página, publicación, página de inicio de sesión y elemento. Aunque la versión pro te ofrece una gran cantidad de otras funciones, como más de 800 fuentes de Google, la versión gratuita es muy poderosa para editar CSS.

    CSS personalizado simple

    CSS personalizado simple

    Simple Custom CSS es el complemento más popular para agregar CSS personalizado a su sitio web. El complemento le permite agregar CSS personalizado que anula cualquier complemento o archivo de tema. Como resultado, puede personalizar todo su sitio web con un solo complemento.

    También incluye algunas comprobaciones de errores, lo cual es ideal para principiantes.

    WP Agregar CSS personalizado

    WP Agregar CSS personalizado

    Independientemente de si necesita agregar cambios al CSS para todo el sitio o solo para algunas páginas, WP Add Custom CSS puede acomodarlos. Los cambios que realice en este complemento anularán la hoja de estilo principal para darle la apariencia que desea en su sitio. Está disponible en inglés, alemán y español.

    3. Modificación del tema CSS

    personalizar

    La mayoría de los temas tienen secciones integradas que le permitirán agregar codificación desde el área " Personalizar " en WordPress. Esto le permite agregar CSS directamente a los archivos del tema y muchos de ellos le permiten ver los cambios en tiempo real.

    Estos son archivos CSS secundarios (que no deben confundirse con los temas secundarios en WordPress) y funcionan junto con su hoja de estilo principal.

    Similar al primero, el principal inconveniente de utilizar este método para modificar el CSS es la posibilidad de perder los ajustes si cambia de tema. Estos son específicos para el diseño y no permanecerán una vez que cambie su tema.

    Sin embargo, puede ser una excelente manera de realizar cambios específicos basados ​​en el tema en sí. Por ejemplo, es posible que los colores o fuentes específicos utilizados en este CSS secundario no sean visualmente atractivos en el nuevo tema de todos modos.

    Después de hacer clic en "Personalizar", aparecerá el personalizador de WordPress. Desplácese hacia abajo y haga clic en la opción "CSS adicional".

    Haga clic en CSS adicional

    Esto abrirá un editor de CSS. Aquí puede agregar todo su propio código CSS personalizado.

    Agregar código CSS personalizado al personalizador

    Aquí hay un buen ejemplo de cómo agregar CSS personalizado aquí se reflejará en el sitio de inmediato para que pueda ver los cambios y cómo se ven antes de publicarlos.

    En este código, estamos cambiando el color de la sombra del encabezado 1 en el sitio.

    Antes de agregar el código

    Antes

    Después de agregar el código

    Después de agregar el código

    El código que usamos para lograr ese aspecto simplemente se agregó directamente en el personalizador.

    Código añadido

    Puede agregar todo el código CSS personalizado que desee directamente en esta área personalizada. Hace que sea más fácil ver todos los cambios en tiempo real.

    Usar CSS personalizado en WordPress

    El uso de CSS para modificar su sitio puede mejorar su rendimiento, brindarle un mayor control y ayudarlo a afinar su diseño. Siempre que tenga una comprensión básica de cómo funciona la codificación, o al menos vea lo que hacen los cambios en tiempo real, puede ser relativamente simple agregar CSS a WordPress.

    Esta puede ser una de las mejores maneras de ofrecer una experiencia completamente única para su público objetivo. Y con lo popular que es WordPress como CMS, sobresalir nunca ha sido más importante.

    ¿Qué tipo de cosas has cambiado en el archivo CSS? ¿Ha encontrado más fácil modificar la hoja de estilo directamente o prefiere usar un complemento?










  • Subir