\u00bfQu\u00e9 es la edici\u00f3n en CSS?<\/h2>\n
CSS significa Hojas de Estilo en Cascada y es el lenguaje web m\u00e1s popular adem\u00e1s del HTML<\/a>. Los dos van de la mano, ya que CSS se utiliza para estilizar elementos HTML<\/a>. HTML establece la base de la apariencia de un sitio web y el CSS se utiliza para mejorar el estilo.<\/p>\n El CSS te da la posibilidad de hacer que un sitio web responda<\/a>, a\u00f1adir colores, cambiar las fuentes<\/a>, modificar el dise\u00f1o y, en general, afinar la presentaci\u00f3n visual de un sitio web. Al igual que el HTML y el JavaScript, el CSS es un lenguaje del lado del cliente, lo que significa que se ejecuta en el extremo del usuario, en lugar de en el servidor de fondo.<\/p>\n Al sumergirse en el desarrollo de WordPress, HTML, CSS, JavaScript, y PHP<\/a> son los lenguajes que necesitar\u00e1s saber. De esta manera se construye el n\u00facleo del CMS<\/a> , as\u00ed como sus muchos<\/a> temas y plugins<\/a>.<\/p>\n Pero incluso si no eres un dise\u00f1ador<\/a> o desarrollador web<\/a>, es bueno tomar un poco de CSS, ya que puedes usarlo para mover o dar estilo a los elementos de tu sitio web, o hacer peque\u00f1os cambios est\u00e9ticos en tu tema para que se adapte mejor a ti.<\/p>\n\n Dentro de WordPress, el CSS es un poco diferente. Est\u00e1 controlado por temas<\/a>, que se componen de archivos plantilla, etiquetas de plantilla, y por supuesto la hoja de estilos CSS. Aunque generados por tu tema, todos ellos son editables por ti.<\/p>\n Los archivos plantilla dividen<\/a> partes de tu sitio web en secciones (como header.php o archive.php), y las etiquetas plantilla<\/a> se utilizan para llamarlas y otros contenidos de su base de datos. Estos archivos est\u00e1n compuestos principalmente por PHP y HTML, aunque puedes a\u00f1adir CSS si lo necesitas.<\/p>\n Lo que realmente buscas es la hoja de estilo<\/a>, o style.css. Para cambiar el aspecto de tu sitio web, deber\u00e1s aprender a agregar y editar c\u00f3digo<\/a> en este archivo.<\/p>\n Si quieres personalizar tu tema<\/a> y cambiar el aspecto de tu sitio con CSS, tendr\u00e1s que a\u00f1adir tu propio c\u00f3digo o editar lo que ya est\u00e1 ah\u00ed. Hay formas de agregar CSS sin necesidad de tocar ning\u00fan archivo de tema, pero para cambiar el c\u00f3digo de tema existente, tendr\u00e1s que acceder a la hoja de estilos de tu sitio.<\/p>\n Mientras realizas estos cambios, hay algo que debes saber: cuando tu tema se actualice<\/a>, cualquier edici\u00f3n que hayas hecho en style.css<\/em>, functions.php<\/em>, u otros archivos plantilla de temas se borrar\u00e1. En general, no deber\u00edas hacer cambios directos en tu sitio web en el editor sin usar un tema secundario<\/a>.<\/p>\n La hoja de estilos es como una \u00ablista de instrucciones\u00bb para tu sitio web, estableciendo exactamente c\u00f3mo se dise\u00f1a y c\u00f3mo se maneja el c\u00f3digo CSS. Aqu\u00ed es donde har\u00e1s la mayor parte de la edici\u00f3n, pero tambi\u00e9n te mostraremos c\u00f3mo acceder a otros archivos\u00a0 plantilla de temas, como header.php y footer.php<\/a>.<\/p>\n Hay dos maneras de acceder a la hoja de estilos de tu sitio web de WordPress: a trav\u00e9s del panel de control de WordPress<\/a> o a trav\u00e9s de un cliente FTP<\/a>. Cubriremos ambas.<\/p>\n \u00bfNo te sientes c\u00f3modo haciendo esto t\u00fa mismo? Considera la posibilidad de contratar a un desarrollador de WordPress<\/a> para que se encargue de ese paso.<\/p>\n La forma m\u00e1s f\u00e1cil y conveniente de acceder a tu hoja de estilos CSS es justo en el panel de control de WordPress. No hay necesidad de instalar programas FTP o editores de c\u00f3digo<\/a>. Puedes editar directamente cualquier archivo con resaltado de sintaxis y documentaci\u00f3n de funciones incorporada.<\/p>\n Antes de hacer cualquier edici\u00f3n importante en los archivos centrales, siempre debes hacer una copia de seguridad de tu sitio de WordPress<\/a>. Es muy f\u00e1cil cometer accidentalmente un error que podr\u00eda romper la apariencia de tu sitio si eres nuevo en CSS, y podr\u00eda ser dif\u00edcil averiguar c\u00f3mo revertir tus cambios.<\/p>\n Una vez que hayas hecho una copia de seguridad y un tema secundario, entra en tu backend. Puedes encontrar el editor yendo al men\u00fa y haciendo clic en Apariencia > Editor de temas.<\/em><\/p>\n Deber\u00edas ver un popup que te advierte de que no hagas ediciones directas en estos archivos. No te preocupes, s\u00f3lo haz clic en \u00abYo entiendo\u00bb. Es s\u00f3lo una advertencia para usar un tema secundario y hacer una copia de seguridad de tu sitio web antes de hacer cualquier cambio importante. Sigue estos pasos y ser\u00e1 seguro editarlo.<\/p>\n \u00a1Y ahora est\u00e1s dentro! Deber\u00edas estar en la hoja de estilos por defecto, pero mira el men\u00fa de la derecha para ver tus archivos de temas si no es as\u00ed.<\/p>\n Adem\u00e1s de style.css, tambi\u00e9n tendr\u00e1s acceso a archivos plantilla como functions.php, header.php y single.php. Todos ellos afectan a la forma en que act\u00faan ciertas p\u00e1ginas de tu sitio.<\/p>\n Pero deber\u00edas familiarizarte con PHP<\/a> antes de sumergirte en estos archivos en particular<\/p>\n S\u00f3lo recuerda: la mayor\u00eda de los cambios en el CSS que hagas aqu\u00ed ser\u00e1n globales. Por ejemplo, si cambias tus encabezados H1 a una determinada fuente, tendr\u00e1 efecto para cada una de las p\u00e1ginas de tu sitio. Tendr\u00e1s que usar una sintaxis especial para personalizar el estilo de las p\u00e1ginas espec\u00edficas.<\/p>\n \u00bfQu\u00e9 pasa si no puedes acceder al Editor de Temas o prefieres hacer tu trabajo por FTP? Es m\u00e1s f\u00e1cil usar el editor backend, pero algunos temas o plugins pueden desactivarlo. Si ese es el caso, necesitar\u00e1s conectarte a tu sitio web a trav\u00e9s de FTP<\/a>.<\/p>\n El FTP, o Protocolo de Transferencia de Archivos, le permite acceder y modificar remotamente los archivos de un sitio web. Lo primero que tendr\u00e1s que hacer es descargar FileZilla<\/a> o cualquier otro cliente FTP.<\/p>\n A continuaci\u00f3n, debes ponerse en contacto con tu host y pedirle tus credenciales de FTP (host, puerto y nombre de usuario\/contrase\u00f1a si corresponde). Si tu host tiene un panel de control, puede que puedas encontrarlos iniciando sesi\u00f3n.<\/p>\n Las credenciales de los usuarios de Kinsta se encuentran en el panel de control de MyKinsta<\/a> en Sitios > SFTP\/SSH.<\/em><\/p>\n Una vez que los tengas, lanza tu cliente FTP e introduce esa informaci\u00f3n. Si no funciona, intenta poner \u00absftp:\/\/\u00bb antes del URL en la secci\u00f3n de Host.<\/p>\n Una vez dentro, puedes encontrar tu archivo style.css haciendo clic en la carpeta de contenido wp<\/em> para abrirlo, luego en la carpeta de tu tema (como el tema Twenty Twenty<\/em><\/a>), y luego desplaz\u00e1ndote hasta que veas style.css.<\/p>\n Haz doble clic para abrirlo (o haz clic con el bot\u00f3n derecho del rat\u00f3n y selecciona Ver\/Editar<\/em>) y haz tus modificaciones. Recuerda guardar y volver a subir al servidor.<\/p>\n Si necesitas editar otros archivos plantilla<\/a> como home.php, single.php, archive.php, puedes encontrarlos en la misma carpeta que style.css.<\/p>\n La edici\u00f3n de los archivos de temas<\/a>, ya sea a trav\u00e9s de FTP o del panel de control, no siempre es necesaria. De hecho, es mejor evitar hacerlo si s\u00f3lo est\u00e1s a\u00f1adiendo alg\u00fan c\u00f3digo extra.<\/p>\n Para peque\u00f1as adiciones, aqu\u00ed est\u00e1 la mejor manera de a\u00f1adir CSS a tu sitio de WordPress.<\/p>\n Si no est\u00e1s buscando editar el c\u00f3digo CSS existente, y s\u00f3lo quieres a\u00f1adir tu propio estilo en su lugar, se sugiere encarecidamente utilizar uno de los siguientes m\u00e9todos: WordPress Customizer o usar un plugin dedicado.<\/p>\n Para empezar, el c\u00f3digo CSS a\u00f1adido a trav\u00e9s de uno de estos m\u00e9todos es mucho m\u00e1s f\u00e1cil de acceder y usar. No tienes que preocuparte por poner tu nuevo CSS en el lugar equivocado u olvidarte de d\u00f3nde lo has a\u00f1adido si quieres hacer modificaciones m\u00e1s tarde.<\/p>\n Adem\u00e1s, el CSS a\u00f1adido a trav\u00e9s de uno de estos m\u00e9todos no se perder\u00e1 cuando se actualice el tema (aunque a\u00fan puede desaparecer si cambias de tema<\/a>).<\/p>\n Esto significa que no necesitas usar un tema secundario, y si algo se rompe, todo lo que tienes que hacer es quitar el CSS que acabas de a\u00f1adir.<\/p>\n Ten en cuenta que debes mantener una copia de seguridad de tu sitio web<\/a>, ya que algunas personas han informado de la p\u00e9rdida ocasional de su CSS durante las actualizaciones importantes. A\u00fan as\u00ed, este m\u00e9todo es mucho m\u00e1s confiable que la edici\u00f3n directa de los archivos de temas.<\/p>\n Si bien puedes agregar c\u00f3digo a style.css y darlo por terminado, si no quieres crear un tema secundario<\/a>, hacer ediciones importantes a los CSS existentes en tu tema, y potencialmente terminar con todo tu trabajo borrado, es mejor usar la opci\u00f3n de CSS adicional en el personalizador de WordPress o instalar un plugin.<\/p>\n En lugar de usar el Editor de Temas, prueba esto. Inicia sesi\u00f3n en tu backend de WordPress<\/a> y haz clic en Apariencia > Personalizar para<\/em> abrir la pantalla de personalizaci\u00f3n de temas. Ver\u00e1s una vista previa en vivo de tu sitio web, con opciones a la izquierda para personalizar elementos como los colores, los men\u00fas u otros widgets<\/a>.<\/p>\n En la parte inferior de este men\u00fa, deber\u00edas encontrar la caja de CSS adicional<\/em><\/a>.<\/p>\n Haz clic para abrirlo. Se le llevar\u00e1 a una nueva pantalla con un cuadro de entrada de c\u00f3digo y algunas instrucciones. La pantalla de CSS adicional incluye resaltado de sintaxis, al igual que el Editor de temas, junto con una validaci\u00f3n que te permite saber si tu c\u00f3digo es incorrecto.<\/p>\n Cualquier c\u00f3digo que escribas aparece autom\u00e1ticamente en el \u00e1rea de vista previa de la derecha, a menos que tenga un error (aunque puedes elegir publicarlo de todas formas).<\/p>\n Cuando termines de trabajar, puedes publicar tu c\u00f3digo, programar cu\u00e1ndo entrar\u00e1 en vigor, o guardarlo como un borrador para trabajar m\u00e1s tarde. Incluso puedes obtener un enlace de vista previa para compartir con otros.<\/p>\n Como puedes ver, la p\u00e1gina de CSS adicional es en muchos sentidos m\u00e1s potente que el Editor de temas, y mucho m\u00e1s adecuada para a\u00f1adir c\u00f3digo que para jugar con los archivos centrales.<\/p>\n El c\u00f3digo CSS que escribes aqu\u00ed sobrescribe el estilo por defecto de tu tema y no desaparece cuando el tema se actualiza. Si no puedes verlo \u00aben directo\u00bb en tu vista previa, comprueba que est\u00e1s usando los selectores correctos en tu c\u00f3digo CSS.<\/p>\n Al igual que con el Editor de Temas, el CSS es global por defecto, pero puedes escribir c\u00f3digo que apunta a p\u00e1ginas espec\u00edficas<\/a>.<\/p>\n La \u00fanica desventaja es que, si cambias de tema<\/a>, todo lo que hayas escrito ser\u00e1 borrado. Aseg\u00farate de hacer una copia de seguridad de tu CSS antes de cambiar de tema o podr\u00edas terminar perdiendo mucho trabajo.<\/p>\n Si tienes dificultades para usar esta opci\u00f3n, o si quieres una soluci\u00f3n que funcione en todos los temas y que pueda dirigirse m\u00e1s f\u00e1cilmente a determinadas p\u00e1ginas, deber\u00edas probar un plugin.<\/p>\n Hay algunas razones por las que podr\u00edas querer usar un plugin para a\u00f1adir CSS a WordPress. Aunque la funci\u00f3n es similar al men\u00fa de CSS adicional, los estilos normalmente se mantendr\u00e1n aunque cambies\/actualices los temas.<\/p>\n Tambi\u00e9n puedes disfrutar m\u00e1s de tu UI, o te gustan las funciones adicionales como el autocompletado. Algunos plugins incluso te permiten construir CSS a trav\u00e9s de men\u00fas desplegables<\/a>, en lugar de tener que escribirlo t\u00fa mismo.<\/p>\n Simple Custom CSS<\/a> es el plugin de edici\u00f3n de CSS m\u00e1s popular, debido a su facilidad de uso, interfaz m\u00ednima y backend ligero. En resumen, es un plugin de WordPress muy peque\u00f1o que tiene un gran impacto.<\/p>\n El montaje es pan comido y no ver\u00e1s ning\u00fan impacto negativo en el rendimiento<\/a>. Funciona en cualquier tema e incluye resaltado de sintaxis y comprobaci\u00f3n de errores.<\/p>\n Simple Custom CSS and JS<\/a> es una buena alternativa. Tambi\u00e9n te permite apuntar al encabezado, al pie de p\u00e1gina, al frontend, o incluso al backend de administraci\u00f3n.<\/p>\n SiteOrigin CSS<\/a> es otra opci\u00f3n que tambi\u00e9n incluye un editor CSS tradicional. Puedes cambiar entre \u00e9l y el editor visual<\/a> en cualquier momento.<\/p>\n Si tienes dificultades para a\u00f1adir CSS a p\u00e1ginas espec\u00edficas, WP Add Custom CSS<\/a> a\u00f1ade un cuadro de CSS personalizado a la pantalla de edici\u00f3n, y tambi\u00e9n viene con un estilo global.<\/p>\n Tambi\u00e9n puedes considerar probar un editor visual de CSS. Este toma toda la codificaci\u00f3n complicada y la convierte en una serie de campos de entrada y men\u00fas desplegables f\u00e1ciles de usar que manejan toda la programaci\u00f3n por ti.<\/p>\n CSS Hero<\/a> es un plugin de edici\u00f3n visual de primera calidad con algunas caracter\u00edsticas muy potentes (animaci\u00f3n, ediciones espec\u00edficas para cada dispositivo y edici\u00f3n no destructiva, entre otras).<\/p>\n \u00bfListo para sumergirte en el CSS por ti mismo? Estos tutoriales para principiantes establecer\u00e1n los fundamentos y te ense\u00f1ar\u00e1n la sintaxis que necesitar\u00e1s saber para escribir tu propio c\u00f3digo CSS funcional.<\/p>\n Puede ser desalentador, pero a menos que est\u00e9s tratando de hacer algo realmente avanzado, el CSS no es demasiado dif\u00edcil! Cosas simples como cambiar el color de fondo o establecer el estilo de la fuente<\/a> son bastante f\u00e1ciles, y hay muchos ejemplos en l\u00ednea.<\/p>\n La mayor\u00eda de los tutoriales de programaci\u00f3n<\/a> que encontrar\u00e1s en Internet tambi\u00e9n son completamente gratuitos. Hay mucha informaci\u00f3n por ah\u00ed<\/a> sin costo alguno.<\/p>\n Aqu\u00ed hay algunos ejemplos que cubren los mejores tutoriales de CSS para principiantes.<\/p>\n Como usuario de WordPress, saltar al CSS puede ser confuso al principio. Pero una vez que sepas c\u00f3mo editar tus archivos de temas y d\u00f3nde agregarle estilo, no deber\u00edas tener m\u00e1s problemas.<\/p>\n Los archivos de temas pueden ser editados ya sea desde tu backend o a trav\u00e9s de FTP para cambiar la apariencia de tu sitio, pero esto generalmente debe ser evitado a menos que necesites editar el c\u00f3digo existente.<\/p>\n Si s\u00f3lo quieres a\u00f1adir tu propio CSS, utiliza la p\u00e1gina de CSS adicional en Apariencia > Personalizar,<\/em> o prueba un plugin si necesitas algo m\u00e1s potente.<\/p>\n Los cambios en tu hoja de estilo<\/a> se perder\u00e1n al actualizar el tema, a menos que uses un tema secundario<\/a>. No ocurre lo mismo con el CSS adicional. Tu c\u00f3digo est\u00e1 a salvo de las actualizaciones, pero no lo olvides: s\u00f3lo un plugin conservar\u00e1 el CSS cuando cambies de tema<\/a>.<\/p>\n![\"w3school\"](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/w3school-1.png\")
WordPress y CSS<\/h2>\n
\u00bfC\u00f3mo personalizar tu tema de WordPress con CSS?<\/h2>\n
Editar el CSS de WordPress en el panel de control<\/h3>\n
![\"Haciendo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/haciendo-ediciones-directas-archivos.png\")
![\"Editar](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/07\/editar-tema-style-css.png\")
Editar archivos de temas directamente<\/h3>\n
![\"Credenciales](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/07\/mykinsta-ftp.png\")
<\/a>![\"FileZilla\"](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/filezilla-1.png\")
\u00bfC\u00f3mo a\u00f1adir un CSS personalizado en WordPress?<\/h2>\n
1. Edici\u00f3n de CSS a trav\u00e9s del WordPress Customizer<\/h3>\n
![\"CSS](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/css-adicional-1.png\")
2. Agregar CSS personalizado a WordPress usando plugins<\/h3>\n
Simple Custom CSS<\/h4>\n
![\"Simple](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/07\/simple-custom-css-plugin.jpg\")
Simple Custom CSS and JS<\/h4>\n
![\"Simple](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/07\/simple-custom-css-and-js-plugin.jpg\")
SiteOrigin CSS<\/h4>\n
![\"SiteOrigin](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/07\/siteorigin-css-plugin.jpg\")
WP Add Custom CSS<\/h4>\n
![\"WP](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/07\/wp-add-custom-css-plugin.jpg\")
CSS Hero<\/h4>\n
![\"CSS](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/css-hero-1.png\")
\u00bfD\u00f3nde aprender CSS?<\/h2>\n
![\"Learn](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/learn-css-1.png\")
\n
Resumen<\/h2>\n