Dónde agregar CSS personalizado a WordPress

Habrá momentos en que trabaje en un sitio de WordPress cuando desee agregar CSS personalizado. ¿Por qué podrías querer hacer esto? Podría ser de cualquiera de las siguientes razones:
Para agregar un nuevo estilo a un tema que no se ha definido (por ejemplo, agregar una nueva consulta de medios para una cierta interrupción).
Para cambiar el estilo de un elemento en un tema que usa.
Para agregar o modificar los estilos predeterminados de un complemento.
En la primera y segunda situación, si solo tiene una pequeña cantidad de código de cambio, agregar un fragmento CSS personalizado suele ser la forma más sencilla de lograr el efecto deseado.
Pronto analizaremos las diferentes formas de agregar WordPress personalizado CSS, pero primero veamos cómo funciona CSS. La cascada de la cascada CSS es el conjunto de reglas que deciden cuáles de los muchos estilos se aplicarán. Debido a que, en general, se puede aplicar un solo estilo a un elemento, una regla CSS debe ganar a los demás. Existen algunas excepciones y soluciones a este principio, como este método para crear antecedentes multicolores: pero generalmente la regla es válida.

Dos cosas ayudan al navegador a decidir qué estilo aplicar: la magnitud y la especificidad.
El ancho correcto = la elección correcta de los elementos HTML y no otros.
La especificidad correcta = su declaración CSS excede a los otros que se dirigen al mismo elemento (s).
Para evitar romper el cabello, lea la publicación de Fred sobre el cambio correcto de CSS. Tiene ejemplos prácticos que le muestran cómo apuntar correctamente a sus estilos.
Si desea profundizar el CSS específico, le recomiendo leer CSS Specticity Wars de Andy Clarke, que explica este concepto maravillosamente. (¡Es aún más satisfactorio si eres fanático de Star Wars!) Cómo aplicar CSS en WordPress Si alguna vez ha inspeccionado un sitio típico de WordPress, se notará que generalmente hay muchas hojas cargadas de varias fuentes. ¿Cómo decide WordPress cobrar primero? Tiene un orden específico en el que los estilos CSS están en línea. El orden general es, desde el primero hasta el último: complementos
El tema del niño
El tema parental
personalizar
El otro factor determinante es la prioridad del gancho. Si no está familiarizado con los ganchos, lea nuestro artículo sobre WordPress Hooks para una imprimación.
En resumen, los ganchos son lugares sobre temas o complementos en los que se pueden ejecutar funciones. Debido a que se pueden conectar más funciones a los ganchos, WordPress necesita una forma de determinar el orden en que se ejecutarán. Aquí viene la prioridad. La prioridad predeterminada para una función conectada, o la llamada inversa, es 10. una llamada inversa con un número menor de lo que se ejecutará anteriormente, y un número más alto se ejecutará más adelante. Para los estilos CSS, esto significa que si intenta anular un estilo, desea que el código se cargue con una prioridad más alta que la hoja de estilo original.
Donde puede agregar CSS personalizados de WordPress Aquí hay tres lugares principales donde puede agregar CSS personalizado a WordPress.
temas
complementos
Personalizador de WordPress
Echemos un vistazo a ellos uno por uno. 1. Archivo style.css de su base La forma más obvia de cambiar el estilo de un tema es editar el archivo style.css. Suponiendo que no escriba su propio tema desde cero, hay algunas maneras de resolver esto. Veamos el que no deberías hacer primero. El camino peligroso es acceder directamente al editor de temas. Si intenta esto con su tema activo, verá una advertencia como esta: el problema con este método es que edite el archivo directamente en el servidor. Si comete un error y lo guarda, no podrá recuperar el archivo Style.css original. Es decir, no si tiene una copia de seguridad o elimina el tema e instala nuevamente. En ambos casos, perderá las últimas personalizaciones. La forma más segura es crear un tema infantil, como lo indica el mensaje. De esta manera, dejará intacto el tema de sus padres, si lo que sucederá lo peor. Los temas de los niños también son las mejores prácticas para WordPress y Essentials si desea cambiar cualquier plantilla o funciones sobre su tema.
Cuando haya creado un tema infantil, debe editar el archivo style.css en un editor de texto y cargar el archivo modificado a través del FTP. Si desea estar más avanzado, puede usar un sistema de control de versiones como GIT para rastrear los cambios de archivo en su automóvil local. 2. WordPress CSS personalizado en complementos La mayoría de los complementos para generar páginas le brindan mucha influencia en los estilos. Por ejemplo, en Beaver Builder, puede agregar estilos en filas o módulos individuales a través de sus controles:

Este color de fondo se agrega a una hoja de estilo separada generada por Beaver Builder. También puede cambiar los estilos en una sola página:
Pero si no te gustan los estilos de un complemento, pero ¿están cargados de todos modos? Los buenos desarrolladores de complementos de WordPress incluirán la opción de deshabilitar los estilos de su complemento si desea agregarlo. Esto puede ahorrarlo para escribir reglas de estilo! Es importante intentar reemplazar los estilos existentes. Otra opción es usar la función wp_dequeue_style () para eliminar los estilos que no desea cargar. El problema es que debes identificarlos primero. Para obtener más información sobre esto, lea el tutorial de Jeff Starr sobre la eliminación de guiones y estilos de arado.

Para eliminar más fácilmente CSS no deseado, puede probar el complemento Perfmatters, que le permite controlar los estilos y scripts del arado hasta un nivel en la página. 3. Agregar CSS a WordPress WordPress personalizado, que ha llegado a WordPress 4.7, es una herramienta útil para agregar la propia CSS, porque CSS personalizado se carga después de todos los demás estilos.
Vaya al editor de WordPress CSS por apariencia> Personalización> Menú adicional CSS o simplemente Mire> Editar CSS, que redirige allí. A través de la magia de AJAX, cualquier estilos que agregue al personalizador se actualizará en la ventana de vista previa de tiempo real. Una característica útil es que puede mirar una página web en visualización, tableta o móvil.

No olvide usar el botón de publicación para guardar sus estilos. Tenga en cuenta que sus estilos de personalización están cargados en línea en Su tema es un ejemplo: h1.entry-title {color: magenta; } .Togle-inner .togle-text {font-size: 2.2rem; } H1. Intry-Title {Color: Magenta; } .Togle-inner .togle-text {font-size: 2.2rem; } H1. Intry-Title {Color: Magenta; } .Togle-inner .togle-text {font-size: 2.2rem; } Entonces, el personalizador puede ser útil para probar estilos. Una vez que esté satisfecho con ellos, puede transferirlos al tema de un niño más adelante. ¿Dónde se almacenan los estilos CSS personalizados? Probablemente sepa que el CSS personalizado se almacena en su base de datos de WordPress. Lo que quizás no sepa es que CSS personalizado es un tipo de publicación que tiene revisiones. Aquí hay una consulta para encontrarlos: seleccione Post_title, post_name, post_content, post_type de wp_posts donde post_type = ‘custom_css’;
Verá que post_title y post_name corresponden tanto a la babosa como a post_content contiene sus reglas personalizadas. Aunque es relajante saber que su CSS personalizado es seguro si lo limpia por error (!), No hay una manera simple de acceder a las reseñas de CSS, como puede hacer con las reseñas publicadas. Si no agrega un complemento. Las herramientas adicionales de JetPack CSS CSS desarrolla diferentes opiniones sobre el complemento JetPack, a algunas les encanta, mientras que otras lo odian. Jetpack ha tenido una mala reputación, porque en realidad es más complementos en uno, y algunas de sus características se activan automáticamente, lo necesite o no. Para el registro, descubrí que JetPack tiene algunas características útiles, como conectar su sitio a WordPress.com. Sin embargo, las mejoras CSS personalizadas de Jetpack son realmente ingeniosas. Para activarlos, una vez que haya instalado JetPack, debe ir a Jetpack> Configuración y cambiar al panel de personalización mejorando CSS. USPACK, puede: ver las últimas 25 revisiones de CSS personalizadas.

Puede ver CSS personalizado y para cualquier otro temas que haya agregado.

Establezca un ancho de contenido diferente para imágenes de tamaño completo. Deberá regenerar las dimensiones de las imágenes existentes si usa esta configuración. Comience de nuevo con CSS, desactivando completamente el CSS CSS. Esto significa que si usa un tema padre en lugar de un tema secundario, mantendrá la marca PHP y HTML del tema, pero el estilo. CSS del tema no se cargará, al darle una hoja vacía.
Si usa un tema infantil libre de niños o CSS, es posible que no vea ninguna diferencia si usa esta opción. Use preprocesadores CSS como SASS o menos. Para comenzar, active menos o SASS (sintaxis SCSS) en el cuadro de selección del preprocesador. Esta es una manera muy fácil de comenzar con un preprocesador si es nuevo en él. Lea la publicación de Fred si quiere saber por qué Sass es genial. Aquí hay un ejemplo simple, que usa las variables SASS para cambiar el color de los enlaces en el título de publicación en veinte veinte: / * sass – SCSS Syntax * / $ Color: #C6538c; $ Color2: #A7A7A7; .entry-title {A {Font-Family: MS serif, -serif; fondo: -webkit-lineal-gradiente ($ color1, $ color2); -Webkit-background-clip: texto; -Webkit-text-chill-color: transparent; }} Ayuda, ¡mi CSS personalizado no funciona! Si su CSS personalizado no aparece en la página, consulte lo siguiente:

¿Tiene reglas de estilo en personalizador que reemplazan los estilos que desea aplicar? Puede verificar esto usando el elemento Inspect en el navegador.

¿Usa el selector (s) CSS (s) correcto?


¿Tu estilo es lo suficientemente específico? Recuerde que en CSS, ciertos selectores exceden otros.