Cómo agregar CSS personalizado a WordPress: 5 métodos, incluido el editor de bloques y Elementor
«Cómo hacer CSS personalizado en WordPress» es una pregunta que se hace con frecuencia. Aquí hay cinco métodos, incluidas las mejores opciones para los fines que necesitará. Entonces,
¡estarás contento con tu sitio web personalizado por ti mismo!
Contenido
Método 1 CSS personalizado en WordPress – Pestaña «CSS adicional»
Método 2 CSS personalizado en fragmentos de código
Método 3 Blocks CSS: Editor de CSS para bloques de Gutenberg
Método 4 CSS personalizado en el editor de páginas – Elementor Pro
Método 5 CSS personalizado en las opciones de tema de su back-end
Conclusión
Método 1 CSS personalizado en WordPress – Pestaña «CSS adicional»
A partir de WordPress 4.7, ahora puedes añadir CSS personalizado a tu propio tema desde la pantalla de personalización de apariencia, sin necesidad de plugins adicionales ni de editar directamente temas y temas hijos. Sólo tienes que elegir la pestaña CSS adicional al personalizar tu tema actual para empezar.
Ejemplo – CSS personalizado en WordPress – Pestaña CSS adicional
Cualquier cambio de CSS que realices aparecerá en la vista previa, al igual que otros cambios realizados en el personalizador, lo que significa que tienes tiempo para ajustar y perfeccionar el aspecto de tu sitio, sin cambiar nada hasta que estés satisfecho con todo.
A través del Códice WordPress.ORG
https://codex.wordpress.org/CSS
Ten en cuenta que los cambios en CSS están relacionados con tu tema. Esto significa que si cambias a un nuevo tema, tus estilos CSS personalizados ya no estarán activos (por supuesto, si vuelves a cambiar a tu tema anterior, volverán a estar allí).
Pros:
- Nativo, manejable y fácil.
- Podría ver los resultados inmediatamente sin guardar.
- Adecuado para cualquier persona que tenga conocimientos básicos de CSS o sepa cómo hacer el trabajo de copiar y pegar si tiene los códigos fuente correctos.
Contras:
- El ancho del campo es fijo y no se puede ajustar.
Pros y contras: El CSS personalizado sigue el tema activado individualmente.
Método 2 CSS personalizado en fragmentos de código
Code Snippets es una forma fácil, limpia y sencilla de ejecutar fragmentos de código PHP en tu sitio. Elimina la necesidad de agregar fragmentos personalizados al archivo de functions.php de su tema.
Puede ejecutar no solo PHP, sino también fragmentos de código CSS, JS y HTML en su sitio.
A continuación, se muestran ejemplos de fragmentos de código CSS.
Ejemplo – CSS personalizado en WordPress – Fragmentos de código
Ejemplo – Nuestro CSS personalizado para AMP – Fragmentos de código
También puede elegir un complemento similar solo para el encabezado o el pie de página.
Pros:
- Manejable, funcional, altamente flexible y no tan difícil para CSS personalizado.
- Los interruptores son convenientes para probar y desarrollar
Contras:
- No se pudieron ver los resultados inmediatamente sin guardar.
Pros y contras: Los CSS personalizados son independientes de cualquier tema.
Método 3 Blocks CSS: Editor de CSS para bloques de Gutenberg
Blocks CSS te permite añadir CSS personalizado a tus Bloques de Gutenberg directamente desde el Editor.
Blocks CSS – Editor de CSS para bloques de Gutenberg
Agrega un editor de CSS resaltado por sintaxis donde puede agregar CSS adicional a sus bloques de Gutenberg para diseñarlos de la manera que desee.
Pros:
- Fácil, incluso perezoso.
- No necesita saber cuál es el nombre exacto del elemento que desea controlar.
- El selector { } siempre se escribe automáticamente
Contras:
- Inmanejable.
- Es posible que olvide qué y dónde están los códigos CSS personalizados.
Pros y contras: Los CSS personalizados son independientes de cualquier tema.
Método 4 CSS personalizado en el editor de páginas – Elementor Pro
Agregue CSS personalizado a cualquier sección, columna, widget o página en la versión «Pro» de Elementor. Significa que no es libre usar esta función.
CSS personalizado en el editor de páginas – Elementor Pro
Pros:
- Fácil, incluso perezoso.
- No necesita saber cuál es el nombre exacto del elemento que desea controlar.
Contras:
- Inmanejable.
- Es posible que olvide qué y dónde están los códigos CSS personalizados.
- selector { } NO se escribe automáticamente, es necesario escribir este código repetido manualmente en cada campo CSS personalizado.
Pros y contras: El CSS personalizado es independiente de cualquier tema.
Método 5 CSS personalizado en las opciones de tema de su back-end
Ejemplo: CSS personalizado en las opciones de tema de su back-end
Creo que su objetivo principal no es que los usuarios realicen trabajos CSS personalizados.
Ayuda a los usuarios a importar demostraciones para que sus sitios web se parezcan al sitio de demostración.
Eso es lo significativo que es, creo que sí.
Pros:
- Manejable y fácil.
Contras:
- No se pudieron ver los resultados inmediatamente sin guardar.
- Por lo general, es demasiado simple, por lo que es malo editarlo y la codificación avanzada.
Pros y contras: El CSS personalizado sigue el tema activado individualmente.
Conclusión
Elija uno de los 2 mejores métodos en función de lo que usted y su entorno de desarrollo de sitios web necesiten.
- Método 1 CSS personalizado en WordPress – «CSS adicional»
- Método 2 Code Snippets (o plugins similares como ese).
O elija uno de estos 2 métodos compatibles con el editor. Aprovecha para saltarte el paso de comprobar los elementos que necesitas si no tienes ningún problema con la gestión de CSS.
- Método 3 Blocks CSS: Editor de CSS para bloques de Gutenberg
- Método 4 CSS personalizado en el editor de páginas – Elementor Pro
Entonces, ¡estarás contento con tu sitio web personalizado por ti mismo!