Si bien escribir su propio CSS desde cero puede ser un desaf\u00edo, agregar fragmentos escritos previamente deber\u00eda ser simple.<\/p>\n
En este tutorial, aprender\u00e1 el enfoque m\u00e1s simple y mejor para agregar CSS personalizado a su sitio para que pueda cambiar los estilos en su tema de WordPress.<\/p>\n
C\u00f3mo agregar CSS personalizado<\/h2>\n
En el pasado, recomend\u00e9 el complemento CSS personalizado simple<\/a>, pero ya no necesita un complemento para agregar CSS a su sitio.<\/p>\n En su lugar, puede utilizar la secci\u00f3n CSS adicional incorporada en el Personalizador. Para acceder a esta funci\u00f3n, comience haciendo clic en el elemento del men\u00fa Personalizar que se encuentra en Apariencia.<\/p>\n A continuaci\u00f3n, abra la secci\u00f3n CSS adicional, que deber\u00eda estar ubicada cerca de la parte inferior del panel Personalizador.<\/p>\n En el interior, simplemente puede pegar el CSS que necesita agregar a su sitio.<\/p>\n Lo bueno de la funci\u00f3n CSS adicional es que obtiene una vista previa en vivo de c\u00f3mo afectar\u00e1 a su sitio. La vista previa se actualiza instant\u00e1neamente y los visitantes no ver\u00e1n sus cambios hasta que haga clic en el bot\u00f3n Publicar en la parte superior.<\/p>\n Muchos usuarios de WordPress se ven tentados a editar la hoja de estilo del tema directamente a trav\u00e9s del men\u00fa Editor de temas.<\/p>\n Nunca hagas esto.<\/strong><\/p>\n El mayor problema de realizar cambios de esta manera es que perder\u00e1 todo su arduo trabajo cuando actualice el tema. Por ejemplo, si est\u00e1 utilizando Mission News<\/a> versi\u00f3n 1.38 y ma\u00f1ana sale 1.39, el proceso de actualizaci\u00f3n copia todos los archivos nuevos sobre los archivos antiguos. El tema ciertamente no incluir\u00e1 las mismas personalizaciones que ha realizado, por lo que se perder\u00e1n permanentemente (a menos que tenga una copia de seguridad reciente<\/a> ).<\/p>\n Esto se puede evitar utilizando la secci\u00f3n CSS adicional en el Personalizador, que no se ve afectada por las actualizaciones del tema.<\/p>\n El \u00fanico desaf\u00edo de la funci\u00f3n CSS adicional es que, a veces, lograr que su CSS surta efecto puede ser un poco m\u00e1s dif\u00edcil.<\/p>\n Sin meterse en las malas hierbas, CSS utiliza un sistema de especificidad<\/a> para decidir qu\u00e9 reglas de estilo se anulan entre s\u00ed.<\/p>\n Una forma de garantizar que sus estilos anulen los estilos del tema es usar una Tome este fragmento de CSS, por ejemplo:<\/p>\n En todos nuestros temas<\/a>, ese c\u00f3digo har\u00eda que el t\u00edtulo del sitio fuera de 28px. Si no ve ning\u00fan cambio despu\u00e9s de implementar este c\u00f3digo, intente agregar la Con esa actualizaci\u00f3n, se garantiza esencialmente que el c\u00f3digo surta efecto siempre que apunte al selector correcto. Solo intente reservar esto para ocasiones especiales, ya que usarlo docenas de veces en su c\u00f3digo puede dificultar la anulaci\u00f3n de estilos en el futuro.<\/p>\n Un problema com\u00fan que enfrentan los usuarios al usar esta funci\u00f3n es que su c\u00f3digo funcionar\u00e1 mientras usan el Personalizador en vivo, pero una vez que ven el sitio normalmente, los cambios no aparecen.<\/p>\n Esto casi siempre se debe al almacenamiento en cach\u00e9, y aqu\u00ed cubro la soluci\u00f3n con todo detalle:<\/p>\n C\u00f3mo arreglar los cambios de WordPress que no aparecen<\/a><\/p>\n Solo deber\u00eda tomar uno o dos minutos resolver las cosas.<\/p>\n Incluso si no tiene ni idea de c\u00f3mo escribir su propio CSS, la funci\u00f3n CSS adicional facilita la tarea de pegar c\u00f3digo en su sitio.<\/p>\n Si desea obtener m\u00e1s informaci\u00f3n sobre la personalizaci\u00f3n de temas de WordPress con CSS, a continuaci\u00f3n recomendar\u00eda mi gu\u00eda sobre<\/a> c\u00f3mo encontrar selectores de CSS<\/a>.<\/p>\n Y si disfrut\u00f3 aprendiendo algo nuevo sobre WordPress hoy, puede que le guste mi curso gratuito por correo electr\u00f3nico:<\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4c6d6cd.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4f0f93d.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e510ba49.png\")
<\/a><\/p>\nPor qu\u00e9 nunca deber\u00eda editar style.css<\/h2>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e5335117.png\")
<\/a><\/p>\nConsejos para hacer que su CSS personalizado funcione<\/h3>\n
!important<\/code>etiqueta.<\/p>\n.site-title {\n font-size: 28px;\n}<\/code><\/pre>\n!important<\/code>etiqueta, as\u00ed:<\/p>\n.site-title {\n font-size: 28px !important;\n}<\/code><\/pre>\n\u00bfQu\u00e9 pasa si solo se muestra en la vista previa en vivo?<\/h2>\n
Personalice f\u00e1cilmente con CSS<\/h2>\n