¿Quieres cambiar los colores o las fuentes de tu sitio de WordPress, pero te preocupa romper algo? Muchos principiantes asumen que requiere editar los archivos del tema, donde incluso un pequeño error puede causar grandes problemas.
En los primeros días de WordPress, la única forma de agregar CSS personalizado era editando esos archivos directamente. Recordamos lo estresante que era eso, y cómo un carácter mal colocado podía colapsar un sitio entero.
Afortunadamente, ese ya no es el caso. WordPress ahora ofrece formas seguras y amigables para principiantes de agregar CSS personalizado utilizando el Personalizador de Temas, el Editor de Sitio Completo (FSE) o un plugin como WPCode.
En esta guía, te mostraremos tres métodos sencillos para agregar CSS personalizado a tu sitio de WordPress, paso a paso. 🙌
¿Por qué agregar CSS personalizado en WordPress?
Agregas CSS personalizado en WordPress para tener más control sobre el diseño de tu sitio de lo que permiten la configuración de tu tema. Por ejemplo, puedes ajustar los tamaños de fuente, cambiar los colores de los botones o agregar espaciado adicional a secciones específicas.
CSS (Hojas de Estilo en Cascada) es el lenguaje que da estilo a tu sitio web, manejando cosas como colores, fuentes, espaciado y diseños. Al escribir tu propio CSS, puedes ajustar la apariencia de tu sitio sin cambiar de tema ni instalar plugins adicionales.
Esta flexibilidad significa que puedes personalizar publicaciones individuales, dar estilo a las categorías de productos en tu tienda, o incluso optimizar cómo se ve tu sitio en dispositivos móviles en comparación con el escritorio.
En esta guía, te mostraremos las diferentes formas de agregar CSS personalizado a tu sitio web de WordPress.
Puedes hacer clic en el enlace a continuación para saltar a cualquier sección que te interese:
- Método 1: Agregar CSS personalizado usando el Personalizador de temas (Temas clásicos)
- Método 2: Agregar CSS personalizado usando el plugin WPCode (Todos los temas)
- Método 3: Agregar CSS adicional con el Editor de sitio completo (Temas de bloques)
- Consejo adicional: Usar un plugin de CSS personalizado vs. Agregar CSS en el Personalizador de temas
- Preguntas frecuentes: Agregar CSS personalizado a tu sitio web de WordPress
- Más consejos y trucos de CSS para tu sitio de WordPress
¿Listo? Empecemos.
Método 1: Agregar CSS personalizado usando el Personalizador de temas (Temas clásicos)
Desde WordPress 4.7, los usuarios ahora pueden agregar CSS personalizado directamente desde el área de administración de WordPress. Esto es súper fácil y puedes ver tus cambios al instante con una vista previa en vivo.
Nota: Este método es solo para temas clásicos. Si estás usando un tema de bloques, deberás elegir uno de los otros métodos.
Primero, deberás dirigirte a la página Apariencia » Personalizar desde tu panel de administración de WordPress.
Esto iniciará la interfaz del personalizador de temas de WordPress.
En esta página, puedes ver una vista previa en vivo de tu sitio con un montón de opciones de personalización en el panel izquierdo. Dependiendo de tu tema de WordPress, la disposición de este menú puede variar ligeramente. En nuestro ejemplo, estamos usando el tema Sydney.
Simplemente busca la pestaña ‘CSS adicional’ para empezar a editar.
La pestaña se deslizará para mostrarte un cuadro simple donde puedes agregar tu CSS personalizado.
Tan pronto como agregues una regla CSS válida, podrás verla aplicada en el panel de vista previa en vivo de tu sitio web.
Puedes seguir agregando código CSS personalizado hasta que estés satisfecho con cómo se ven los cambios en tu sitio.
No olvides hacer clic en el botón ‘Publicar’ en la parte superior cuando hayas terminado.
ℹ️ Nota: Cualquier CSS personalizado que agregues usando el personalizador de temas solo está disponible con ese tema en particular. Si deseas usarlo con otros temas, deberás copiarlo y pegarlo en tu nuevo tema usando el mismo método.
Método 2: Agregar CSS personalizado usando el plugin WPCode (Todos los temas)
El primer método solo te permite guardar CSS personalizado para el tema actualmente activo. Si cambias de tema, es posible que necesites copiar y pegar tu CSS personalizado en el nuevo tema.
Si quieres que tu CSS personalizado se aplique independientemente del tema de WordPress que estés usando, este método es para ti.
WPCode es el mejor plugin de fragmentos de código personalizado del mercado, con más de 2 millones de usuarios. Además de facilitar la adición de código personalizado en WordPress, viene con funciones como una biblioteca de fragmentos de código integrada, lógica condicional, píxeles de conversión y más.
Usamos WPCode para agregar y administrar fragmentos de código en algunas marcas asociadas. Para una mirada en profundidad a sus características y beneficios, consulta nuestra reseña completa de WPCode.
Ahora, lo primero que necesitas hacer es instalar y activar el plugin WPCode. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
ℹ️ Nota: Este tutorial funciona con la versión gratuita del plugin WPCode, por lo que puedes empezar de inmediato. Si decides actualizar a WPCode Pro, desbloquearás funciones útiles como fragmentos programados, historial de revisiones completo y acceso a la biblioteca completa de fragmentos listos para usar y aprobados por desarrolladores.
Al activarlo, simplemente ve a Fragmentos de código » + Añadir nuevo desde el área de administración de WordPress.
Luego, puedes pasar el cursor sobre la opción ‘Añadir tu código personalizado (Nuevo fragmento)’ en la biblioteca de fragmentos de código y hacer clic en ‘Usar fragmento’.
En la siguiente pantalla, seleccionarás el tipo de código para tu fragmento de CSS personalizado.
Haz clic en ‘Fragmento de CSS’ como tipo de código.
A continuación, en la parte superior de la página, puedes añadir un título para tu fragmento de CSS personalizado. Puede ser cualquier cosa que te ayude a identificar el código.
Una vez que hayas introducido un título, puedes escribir o pegar tu CSS personalizado en el cuadro ‘Vista previa del código’.
Ahora, desplacémonos hacia abajo hasta la sección ‘Inserción’ y seleccionemos el método ‘Inserción automática’ si deseas ejecutar el código en todo tu sitio de WordPress.
Si solo deseas ejecutar el código en páginas o publicaciones específicas, puedes elegir el método ‘Código corto’.
Ahora, querrás volver a la parte superior de la página.
Luego, simplemente cambia el interruptor a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.
¡Eso es todo! Puedes visitar tu sitio web de WordPress para ver el CSS personalizado en acción.
Método 3: Agregar CSS adicional con el Editor de sitio completo (Temas de bloques)
Si estás utilizando un tema de bloques moderno, el mejor lugar para añadir tu CSS personalizado es directamente dentro del Editor de Sitio Completo. Este método mantiene tu CSS con la configuración de estilo de tu tema y te permite ver una vista previa en vivo.
Primero, necesitas navegar a Apariencia » Editor desde tu panel de WordPress.
Esto abrirá el Editor de Sitio Completo.
En el menú de la izquierda, haz clic en la pestaña ‘Estilos’.
Ahora deberías ver el panel ‘Estilos’ para tu sitio, así como la vista previa de tu página.
Desde aquí, haz clic en la vista previa para abrir el editor de bloques.
En el editor de contenido, haz clic en el ícono de 'Estilos'. Parece un círculo mitad negro y mitad blanco.
Después de eso, procede a seleccionar 'CSS adicional'.
En el panel lateral de CSS, encontrarás el campo 'CSS adicional'.
Puedes ingresar tu CSS aquí y verás los cambios al instante en la vista previa en vivo.
Una vez que estés satisfecho con todo, no olvides hacer clic en 'Guardar' en la esquina superior derecha para publicar tus cambios.
Consejo adicional: Usar un plugin de CSS personalizado vs. Agregar CSS en el Personalizador de temas
Todos los métodos descritos anteriormente son recomendados para principiantes. Los usuarios avanzados también pueden agregar CSS personalizado directamente a sus temas.
Sin embargo, no se recomienda agregar fragmentos de CSS personalizados a tu tema principal. Tus cambios de CSS se perderán si actualizas accidentalmente el tema sin guardar tus cambios personalizados.
El mejor enfoque es usar un tema hijo en su lugar. Sin embargo, muchos principiantes evitan crear un tema hijo porque encuentran el proceso intimidante. Además, los principiantes a menudo no comprenden cómo usarán el tema hijo más allá de simplemente agregar CSS personalizado.
Usar un plugin de CSS personalizado te permite almacenar tu CSS personalizado independientemente de tu tema. De esta manera, puedes cambiar de tema fácilmente y tu CSS personalizado permanecerá.
Otra excelente manera de agregar CSS personalizado a tu sitio de WordPress es usando el plugin CSS Hero. Este maravilloso plugin te permite editar casi todos los estilos CSS de tu sitio de WordPress sin escribir una sola línea de código.
También puedes agregar CSS personalizado con el plugin SeedProd, el mejor constructor de páginas de WordPress de arrastrar y soltar.
Con SeedProd, puedes crear temas personalizados de WordPress y páginas de destino para tu sitio de WordPress. Puedes editar fácilmente la configuración global de CSS; no se requiere código.
Algunas de nuestras marcas asociadas han diseñado sus sitios web completos con SeedProd. Asegúrate de leer nuestra reseña detallada de SeedProd para ver por qué es una opción principal para crear sitios web impresionantes.
Preguntas frecuentes: Agregar CSS personalizado a tu sitio web de WordPress
¿Quieres hacer que tu sitio de WordPress sea realmente tuyo con estilos personalizados? Aquí tienes algunas preguntas comunes sobre cómo agregar CSS personalizado de forma segura y cómo hacerlo sin romper tu sitio:
¿Agregar CSS personalizado es arriesgado para mi sitio?
No si lo haces de la manera correcta. Herramientas como el Personalizador de Temas de WordPress, WPCode, o SeedProd te permiten previsualizar tus cambios antes de publicarlos. Esto te ayuda a evitar errores y mantener tu sitio seguro.
¿Mis cambios de CSS desaparecerán si cambio de tema?
Si agregaste el CSS a través del Personalizador de Temas, tus cambios están ligados a ese tema específico. En este caso, sí, tu CSS adicional desaparecerá si cambias tu tema de WordPress.
Para mantener tu CSS consistente en todos los temas, puedes usar un plugin de fragmentos de código como WPCode. Almacena tu código por separado, por lo que permanece activo incluso si cambias de tema.
¿Puedo revertir los cambios si algo sale mal?
Sí, especialmente si estás usando un plugin de fragmentos de código como WPCode. Puedes deshabilitar o eliminar fácilmente cualquier fragmento que hayas agregado. Siempre es una buena idea previsualizar tus cambios primero o probarlos en un sitio de staging si no estás seguro.
¿Qué pasa si quiero aún más control sobre mi CSS?
Para ediciones más avanzadas, puedes crear un tema hijo. Esto te da control total y mantiene tus cambios seguros durante las actualizaciones del tema. Pero requiere un conocimiento básico de cómo funcionan los temas de WordPress.
¿Necesito habilidades de codificación para agregar CSS personalizado?
No necesitas ser un desarrollador, pero sí necesitarás saber un poco de CSS, al menos lo suficiente para copiar y pegar el código correcto o seguir un tutorial.
La buena noticia es que hay muchos recursos amigables para principiantes (¡como WPBeginner!) para ayudarte a aprender ajustes simples de CSS paso a paso. Con las herramientas adecuadas, agregar CSS aún puede sentirse manejable, más como reorganizar muebles que como reconstruir la casa.
Más consejos y trucos de CSS para tu sitio de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar CSS personalizado a tu sitio de WordPress. Si te resultó útil, también te pueden interesar nuestras guías sobre:
- Cómo minificar archivos CSS / JavaScript en WordPress
- Cómo optimizar fácilmente la entrega de CSS en WordPress
- Cómo aplicar CSS para roles de usuario específicos en WordPress
- Cómo agregar el primer y último CSS a los elementos del menú de WordPress
- Cómo eliminar CSS no utilizado en WordPress (La forma correcta)
- Cómo solucionar CSS roto en el panel de administración de WordPress
- Hoja de trucos de CSS generado por WordPress por defecto para principiantes
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Basado en el método que usaste al agregar CSS personalizado en un sitio de bloques, ¿noto que el sitio todavía usa algún elemento del personalizador clásico a través del enlace que compartiste?<br> ¿Quiero preguntar si uno puede simplemente instalar un plugin de widgets clásicos en un tema de bloques para tener fácil acceso al personalizador para agregar CSS y otras cosas sin usar ningún enlace personalizado?
Soporte de WPBeginner
Dependería en gran medida de tu tema específico. Si tu tema no tiene la opción en el personalizador, te recomendamos usar una de las alternativas de este artículo.
Administrador
Mrteesurez
Bueno, la mayoría de los temas tienen la opción en el personalizador, no conozco los temas de bloques. Gracias.<br> Pero recomendaría usar un constructor de páginas en su lugar para obtener funcionalidades de personalización completas. Una vez que aprendí a usar un constructor de páginas, rara vez uso CSS personalizado en las páginas.
Dennis Muthomi
Solo para aclarar: cuando mencionas (en el MÉTODO 1) que el CSS agregado a través del Personalizador solo está disponible para ese tema en particular, ¿significa que el código CSS personalizado se agrega a los archivos del tema actual?<br> No soy muy experto en tecnología, así que quiero asegurarme de entender correctamente antes de empezar.
Comentarios de WPBeginner
En lugar de agregarse a los archivos del tema, el Personalizador almacena el CSS en la base de datos y lo asocia con el tema.
Mrteesurez
No sé de esto, gracias. Eso significa que el CSS personalizado agregado no se queda en los archivos del tema sino en la base de datos, entonces, ¿por qué necesitamos copiar y pegar el código CSS personalizado al cambiar de tema si en realidad reside dentro de la base de datos?
Soporte de WPBeginner
Al agregar el código CSS, se conecta al tema en sí mismo cuando guardas. Cuando cargas un tema nuevo, cargaría cualquier CSS conectado a ese tema.
Jiří Vaněk
Gracias, mrteesurez, por preguntar porque yo estaba tan confundido como tú, y gracias a WPBeginner por la explicación que me ayudó a entender cómo funciona el CSS agregado con el tema. Yo también pensaba que los códigos CSS solo se almacenaban en el tema, pero ahora finalmente entiendo cómo funciona en segundo plano.
Qasim Saeed
Hola, si quiero agregar un CSS personalizado en una página específica sin ningún plugin, ¿entonces qué? Creo que lo agregamos a través de una función, ¿puedes decirme cómo agregar CSS a través de functions.php y cuál es la mejor y más segura manera de agregar CSS para una página específica?
Soporte de WPBeginner
No necesitas usar funciones para agregar CSS a páginas específicas, apuntarías a la página específica en tu selector CSS para que solo afecte a una sola página en tu sitio.
Administrador
Jiří Vaněk
¿Es mejor insertar tu propio CSS en WordPress usando una plantilla o usando WPCode?
Soporte de WPBeginner
Ambas opciones son válidas, depende de la preferencia personal y si el tema tiene la opción en el editor.
Administrador
Jiří Vaněk
Gracias por la aclaración, no estaba seguro si, por ejemplo, un fragmento que usara WPCode sería más rápido para la respuesta del sitio que integrarlo en la plantilla misma. Así que si no importa, probablemente me apegaré a las mejores prácticas y lo mantendré integrado en la plantilla.
Bavi
La adición de CSS ya no está disponible para el plan gratuito, ¿alguna alternativa??
Soporte de WPBeginner
Nuestros tutoriales son para sitios de WordPress.org, no tenemos detalles específicos para WordPress.com por el momento. Te recomendamos echar un vistazo a nuestra guía a continuación para comparar ambos y si quisieras transferir tu sitio de WordPress.com a un sitio autoalojado de WordPress.org.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
Ben
¡Nunca supe del "truco" de example.com/wp-admin/customize.php! ¡Gracias! ¡Funcionó a la perfección!
Soporte de WPBeginner
Glad we could share this trick with you!
Administrador
Dani
Hola,
Quiero agregar CSS personalizado, pero ¿cómo puedo eliminarlo si algo sale mal?
Bogdan
Hola, este artículo es muy bueno. Una pregunta: ¿No tengo que ver la página HTML para agregar CSS personalizado? ¿Cómo agrego CSS personalizado si no conozco los selectores y todo eso?
Soporte de WPBeginner
Tenemos una guía sobre el uso de la herramienta "Inspeccionar elemento" que puedes consultar a continuación para saber cómo encontrar los selectores:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
cymon
Soy un bloguero nuevo. ¿Hay alguna forma de agregar código CSS específico para cada página?
Soporte de WPBeginner
Necesitarías agregar el ID de la página como parte del CSS, pero sí, puedes hacerlo.
Administrador
Jitin Mishra
Gran artículo para agregar CSS personalizado en un sitio web de WordPress. Esperamos más publicaciones informativas como esta.
Soporte de WPBeginner
Glad you found our guide helpful
Administrador
Mohsin
Quiero cambiar mi menú de WordPress a mega menú con código. ¿Puedo convertir el menú de mi sitio web a mega menú usando HTML, CSS y JS? No quiero usar un plugin para este trabajo. Si agregamos nueva funcionalidad a un sitio web de WordPress con código personalizado, ¿cuáles son las mejores prácticas para que este trabajo personalizado no se pierda al actualizar el tema o WordPress? ¡Gracias!
Soporte de WPBeginner
Querrías crear un tema hijo para mantener tus cambios seguros, pero podrías necesitar algo de código PHP. Tenemos una guía sobre cómo crear un tema hijo que puedes consultar a continuación:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Administrador
vijay v
¿podemos agregar un archivo CSS externo (moviendo el CSS personalizado) para aumentar la velocidad de la página (después de agregar CSS personalizado, la velocidad de carga disminuyó)? si es así, ¿cómo hacerlo?
gracias de antemano
Soporte de WPBeginner
Si estamos entendiendo correctamente lo que buscas, te gustaría echar un vistazo a nuestro artículo a continuación:
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Administrador
billy king
¿Se permite CSS "poco ortodoxo" en un tema secundario o CSS personalizado?
Soporte de WPBeginner
Siempre y cuando el CSS se dirija a lo que está en su sitio, puede usar el CSS que desee.
Administrador
Latonya Moore
Esto es genial, pero ¿hay alguna forma de agregar CSS solo a una página? Por ejemplo, solo quiero mostrar u ocultar al pasar el mouse o al pasar el ratón sobre un texto.
Soporte de WPBeginner
Necesitarías agregar una clase CSS al objeto específico o agregar el ID de la página a tu CSS para limitarlo a esa página específica. Para saber cómo encontrar esa información, te gustaría echar un vistazo a nuestro artículo a continuación sobre cómo usar el elemento de inspección:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
shiva
He realizado algunos cambios en mi sitio web editando algunos códigos CSS en el editor de temas. ¿Qué sucederá si actualizo mi WordPress a la próxima versión? ¿Dará error o volverá al tema base o mi código aparecerá incluso después de actualizar mi WordPress, tal como antes de la actualización?
Soporte de WPBeginner
Si agregó su CSS en el área Apariencia>Personalizador>CSS adicional, sus cambios de CSS permanecerán cuando actualice su sitio.
Administrador
Jo
Todavía no he terminado de construir mi sitio web, pero me he actualizado de la versión gratuita para poder usar CSS para hacer cambios. Mi sitio aún no está en línea. Con la actualización a la versión premium, el botón de actualización ahora ha cambiado a publicar. ¿Significa esto que cuando haga clic en publicar para guardar algún cambio, mi sitio se pondrá en línea?
Además, no recuerdo qué tema usé, ¿cómo puedo saber qué tema estoy usando?
Gracias
Soporte de WPBeginner
Parece que estás en WordPress.com, si publicas una entrada, será visible para quienes puedan ver tu sitio. Con WordPress.com, para un sitio privado, estás limitado a: https://en.support.wordpress.com/settings/privacy-settings
Deberías poder ver el tema activo en Apariencia>Temas
Administrador
Bruce William Taylor
“La pestaña se deslizará para mostrarte un cuadro simple donde puedes agregar tu CSS personalizado. Tan pronto como agregues una regla CSS válida, podrás verla aplicada en el panel de vista previa en vivo de tu sitio web.”
Ya sé DÓNDE agregar el CSS. ¿Cómo sé qué CSS agregar? ¿Cómo sé cuáles son las “reglas CSS válidas”?
Soporte de WPBeginner
Hola Bruce,
Para eso necesitarás aprender algo de CSS básico. Hay varios sitios web que tienen tutoriales de CSS paso a paso para principiantes. Recomendamos w3schools ya que te permiten practicar CSS con una caja de prueba en vivo.
Administrador
Ali
¿Dónde está el almacenamiento de código CSS personalizado porque lo perdí durante una transferencia a un nuevo host?
mahaveer
quiero agregar CSS externo y agregar imágenes en CSS...
Muhammad Adil
¿Cuál fue el método de Bonificación?
¿Es algún Plugin? No lo entendí. ¿Me lo puedes preguntar, por favor?
Gracias
Aditya Khuteta
¡Hola! Quiero cambiar el tamaño del texto del precio en mi sitio web porque el texto del precio es demasiado pequeño allí. Por favor, guíame para hacerlo.
Gracias
Frank Lurz
2 Preguntas:
1. Solo para que quede claro, ¿los "plugins" son sustitutos de escribir CSS, una tarea difícil para aquellos de nosotros que no sabemos nada de CSS, es correcto?
2. Los plugins listados para descargar en la página de plugins de WP solo están disponibles para la instalación de suscriptores que han pagado el Plan "Business", ¿es correcto?
Soporte de WPBeginner
Hola Frank,
1. No, los plugins no son un sustituto de escribir CSS personalizado. Puedes escribir CSS personalizado sin instalar plugins. Por favor, consulta nuestra guía sobre qué son los plugins de WordPress y cómo funcionan para más detalles.
2. Si estás usando WordPress.com, entonces sí, necesitarás actualizar al plan de negocios. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com.
Administrador
Annie Mitchell
Hola,
Soy novata en cuanto a la creación y diseño de sitios web y no tengo conocimientos de CSS. Estoy usando el tema Sydney en mi sitio web – y de alguna manera logré que la fuente de mi párrafo se volviera blanca. He buscado en Google y noté que un caballero tuvo el mismo problema. Lo solucionó descargando un plugin y usando CSS personalizado, sin embargo, lo he intentado y no he tenido suerte.
El CSS que él aconsejó usar es –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
pero no estoy segura de por qué no me funciona. Cualquier ayuda sería muy apreciada.
Gracias,
Annie
Soporte de WPBeginner
Hola Annie,
Primero te recomendamos desactivar todos tus plugins de WordPress. Después de eso, visita tu sitio web para ver si esto resolvió tu problema. Si lo hizo, entonces esto significa que una configuración en uno de tus plugins estaba causando el problema. Si no resuelve el problema, intenta cambiar a un tema predeterminado como Twenty Seventeen. Si eso soluciona tu problema, entonces significa que en algún lugar de tu tema has cambiado la configuración de fuentes.
Si nada funciona, puedes probar este CSS personalizado:
p { color:#000; }1-click Use in WordPress
Administrador
Jose
Uno de los plugins (Simple Custom CSS) no se ha actualizado en 2 años, lo cual en el mundo de los plugins de WordPress es mucho tiempo. Esto es un riesgo de seguridad, así que personalmente buscaría una alternativa.
Rebecca
Hola
Disculpa, no sé nada de CSS y estoy tratando de resolver un problema con no poder buscar plugins, ¡pero esa es otra historia! Estoy publicando aquí ahora porque me sale este mensaje cuando voy a apariencia / editar CSS / CSS adicional
"Hay 1 error que debe corregirse antes de poder guardar.
¿Actualizar de todos modos, aunque pueda dañar tu sitio?"
¿Es esto algo de lo que debería preocuparme?
el texto en el cuadro debajo dice...
y justo aquí hay un punto rojo
Espero que alguien pueda ayudar.
Gracias
Soporte de WPBeginner
Hola Rebecca,
Puedes copiar el CSS y pegarlo en un archivo de texto y guardarlo como copia de seguridad. Ahora borra todo en el cuadro de CSS Adicional y comienza a agregar tu CSS personalizado una regla a la vez hasta que el error aparezca de nuevo. Esto te ayudará a localizar el error y corregirlo.
Administrador
James
Esto ya no funciona para cuentas gratuitas. La opción de CSS ya no está y necesitas una cuenta de negocios para instalar un plugin relevante.
Soporte de WPBeginner
Hola James,
Probablemente estés usando WordPress.com. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com.
Administrador
scott
Antes de la versión 4.9 de WP, solía poder cortar y pegar mi CSS personalizado (desde el personalizador de WP) y pegarlo en el Bloc de notas de Windows (y conservaría el formato). Hacía esto a menudo para guardarlo como copia de seguridad cuando agregaba nuevo CSS personalizado, en caso de que cometiera un error.
Ahora, al pegarlo en el Bloc de notas, simplemente junta todo el CSS sin el formato línea por línea en el Bloc de notas.
¿Alguna idea de por qué o cómo puedo arreglarlo? Ya tengo el modo "ajuste de línea" activado en el Bloc de notas.
Gracias.
Soporte de WPBeginner
Hola Scott,
Puedes intentar guardar el código en otros editores de texto como Notepad++. Si el problema persiste, entonces prueba con consejos de solución de problemas de WordPress.
Administrador
Joe MacMillan
Este sitio es realmente bueno. Mi sitio no tenía colores para los enlaces, así que usé este código /* enlace no visitado azul */
a:link { Color: #196380; }
/* enlace visitado verde */
a:visited { color: #248f24; }
/* al pasar el ratón sobre el enlace naranja */
a:hover {
color: #ff3300;
}
/* enlace seleccionado rojo*/
a:active {
color: #cc0000;
}
pero cambió los colores para todo lo que es un enlace, como los menús, a un color.
Solo quiero los colores para los enlaces.
Agradecería cualquier ayuda con esto. Gracias
Soporte de WPBeginner
Hola Joe,
En tu CSS, no definiste qué áreas deben tener enlaces en estos colores, lo que hace que se apliquen a todo el cuerpo. Para averiguar qué áreas necesitas apuntar, necesitarás usar la Herramienta de Inspección para averiguar la clase CSS que usa tu tema para el bloque de contenido.
Supongamos que el bloque de contenido en tu tema tiene una clase CSS site-content, la usarás en tu CSS de esta manera:
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Administrador
Rob
¡Me encanta tu sitio!
Gracias por todos los artículos útiles.
Tengo una pregunta sobre mi plan premium de WordPress.
Quiero agregar el siguiente script a mi sitio.
var refTagger = {
settings: {
bibleVersion: “NKJV”
}
¿Puedo agregar esto al CSS personalizado?
No tengo la capacidad de acceder a la cabecera o al pie de página en este plan
Gracias,
Rob
Soporte de WPBeginner
Hola Rob,
No, no puedes. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs. blog gratuito de WordPress.com.
Administrador
sammy
este es realmente un gran artículo, tendré que empezar a aprender cómo hacer mi propio CSS para mi sitio
Thomas
Hola,
esta función no está activa para el administrador del sitio en una red de WordPress multisitio.
¿Crees que activarla para el administrador del sitio (con este plugin, por ejemplo:) crearía un problema de seguridad?
¡Gracias!
Soporte de WPBeginner
Hola Thomas,
Sí, puedes usar un plugin para agregar CSS personalizado.
Administrador
Thomas
Hola,
sí, lo sé (ya usé el muy buen plugin Simple Custom CSS), pero preferiría usar la función nativa ya que está implementada en WordPress.
Sin embargo, esta función solo está disponible para el administrador de la red y no para el administrador del sitio en una instalación multisitio.
Los permisos se pueden cambiar fácilmente para permitir que el administrador del sitio agregue su propio CSS personalizado en el personalizador (con la función nativa de WP) (ver este plugin: http://www.wordpress.org/plugins/multisite-custom-css/), y me pregunto si esto crearía un problema de seguridad (basado en la suposición de que no puedo confiar en el administrador del sitio)?
Soporte de WPBeginner
Hola Thomas,
Sorry, we totally misunderstood your question
Estamos de acuerdo en que será una preocupación, por eso la función está desactivada. Si la activas, los usuarios podrán agregar CSS sin filtrar. Deberías mantenerla desactivada.
Brice
No sé mucho de código, así que solo me pregunto si hago cambios y hago clic en "guardar y publicar", ¿hay alguna forma de recuperar el código original si no me gustan los cambios o necesito copiar y guardar el código original en caso de que quiera restaurarlo?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Hola,
Solía ser posible editar style.css desde dentro de la administración de WP, en el menú Apariencia.
En WP multisitio era a través del submenú de temas de la red. ¿Se ha descontinuado esa función?
Salud,
Jos
Judy
¡Gran publicación, gracias!
¿Alguien puede ayudarme con esto? Hice una pequeña personalización en mi logo usando CSS Hero. Luego copié estas 9 cadenas de código exactas en mi plugin Simple Custom CSS, después de desactivar CSS Hero. Pensé que podría reproducir la misma personalización de CSS Hero en mi logo usando Simple Custom CSS, pero en cambio no funciona.
Actualicé la página y borré la caché, pero la personalización aún no surte efecto. ¿Por qué?
Gracias,
Judy
Robin
Esto es todo lo que hay en mi hoja de estilo CSS.
/*
Bienvenido a CSS personalizado
Para aprender cómo funciona esto, consulta
*/
¿Borro esto y agrego mi nuevo código de fuente? ¿Ayuda????
Soporte de WPBeginner
Sí. Estos son solo comentarios para ayudar a los nuevos usuarios a empezar.
Administrador
Paul H.
¡¡¡¡¡PLUGIN EXCEPCIONAL!!!!!
Pasé mucho tiempo tratando de que el Editor de WP incorporado "estilizara" mi página personalizada, sin éxito...
Busqué un plugin para ver si había alguno y encontré el tuyo... en cuestión de minutos instalé tu plugin y lo activé, luego ingresé mi CSS, hice clic en actualizar y luego actualicé mi página personalizada... ¡es perfecto!
A+++
Ian
Hola a todos,
He instalado el plugin Simple custom CSS y lo he activado. Tengo una tabla creada en una de mis páginas web a la que quería ponerle un borde.
Como resultado, he agregado el siguiente código a mi simple plugin CSS personalizado
table { border: 2px solid black; }
y actualicé el CSS personalizado pero no pasó nada – todavía no obtengo ningún borde en la tabla de mi página web.
¿Alguna sugerencia?
Saludos
Ian
Molly Setzer
Hola Ian,
Probablemente no lo estás llamando con el selector CSS correcto. Usa el selector más definido para capturar el elemento. Por ejemplo, si tu tabla tiene una clase "info", entonces llamarla con el más específico table.info te ayudará a alcanzar el elemento. Verifica si tiene más selectores en el HTML.
ramneet
Gracias por compartir. Es una forma maravillosa de aprender WordPress, me gusta.
Estee Peter
¿Cómo agrego CSS personalizado a través de mi plugin de sitio web específico existente?
este es el siguiente código
.mobileonly { display: none; }
@media screen and (max-width: 480px) { .mobileonly { display: inline; } }
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) { .hidemobileonly { display: none; } }
Gary Zielke
¿El plugin Custom CSS funciona en páginas individuales? Es decir, ¿puedo agregar estilo a una sola página y no a todo el tema?
Gracias
Soporte de WPBeginner
No, no funciona en páginas individuales.
Administrador
Tori Tran
gracias ^^
Russell Bruce
¿No sería útil explicar qué hace CSS y por qué es útil?
Joey
Gracias, ojalá hubiera sabido esto antes porque he hecho todos mis cambios de CSS en el archivo style.css ya que estoy haciendo los cambios localmente, pero ¿estás diciendo que si por alguna razón Genesis decide actualizar el tema hijo en particular que usé, perderé esos cambios? No sé si alguna vez los he visto actualizar sus temas hijos, aunque solo he estado usando Genesis por unos meses, así que supongo que es totalmente posible que actualicen algunos aquí y allá. Creo que de ahora en adelante haré mis cambios en el plugin, especialmente si el sitio está en vivo.
suzie
Usa el tema que te guste y crea un 'tema hijo'
El tema hijo es entonces único para tu sitio web.
Realiza cualquier cambio solo en tu tema hijo.
El diseñador del tema puede actualizar su tema, pero tus cambios permanecerán. (Dependiendo de la actualización del diseñador, es posible que necesites ajustar tus cambios, pero es poco probable).
Rodney
Gran artículo.
Solo quería añadir algo aquí. Hay muchas opciones aquí, especialmente en sitios que funcionan con WordPress, crear CSS personalizado es simple. La mayoría de los temas de WordPress suelen admitir la adición de CSS personalizado sin tener que crear o agregar plugins adicionales.
También estoy de acuerdo, y la mejor opción aquí es usar un tema hijo en su lugar.
gracias