Cómo editar CSS en WordPress (Editar, agregar y personalizar el aspecto de su sitio)

¿Quiere intentar editar el CSS de WordPress, pero no sabe por dónde empezar? Con el estilo CSS, puede editar la apariencia de su sitio globalmente o en ciertas páginas. Agregue colores, espacie ciertos elementos, diseñe un diseño y, básicamente, cambie exactamente cómo se ve cualquier cosa en su tema de WordPress.

Si desea familiarizarse más con el entorno de desarrollo de WordPress, o simplemente tener un control más preciso sobre la apariencia de su sitio web, deberá saber cómo agregar CSS en WordPress (además de cómo cambiar lo que ya está allí).

Al editar su tema e incluir su propio CSS adicional, podrá optimizar todos y cada uno de los elementos visuales de su sitio. Hoy, vamos a echar un vistazo más de cerca.

¿Listo para empezar? ¡Vamos a hacerlo!

¿Prefieres ver la versión en video?

¿Qué es la edición de CSS?

CSS significa hojas de estilo en cascada y es el lenguaje web más popular además de HTML. Los dos van de la mano, ya que CSS se usa para diseñar elementos HTML. HTML sienta las bases de la apariencia de un sitio web y CSS se usa para mejorar su estilo.

CSS le brinda la capacidad de hacer que un sitio web responda, agregar colores, cambiar fuentes, modificar el diseño y, en general, ajustar la presentación visual de un sitio web. Al igual que HTML y JavaScript, CSS es un lenguaje del lado del cliente de interfaz, lo que significa que se ejecuta en el extremo del usuario, en lugar de en el servidor de fondo.

Cuando se sumerja en el desarrollo de WordPress, HTML, CSS, JavaScript y PHP son los lenguajes que necesitará saber. Esto es en lo que está integrado el CMS central, así como sus muchos temas y complementos.

Pero incluso si no es un diseñador o desarrollador web, es bueno aprender un poco de CSS, ya que puede usarlo para mover o diseñar elementos en su sitio web, o hacer pequeños cambios estéticos en su tema para que se adapte mejor a usted.

WordPress y CSS

Dentro de WordPress, CSS es un poco diferente. Está controlado por temas, que se componen de archivos de plantilla, etiquetas de plantilla y, por supuesto, la hoja de estilo CSS. Aunque generado por su tema, todos estos son editables por usted.

Los archivos de plantilla dividen partes de su sitio web en secciones (como header.php o archive.php), y las etiquetas de plantilla se utilizan para llamarlos y otro contenido de su base de datos. Estos archivos en realidad están compuestos principalmente de PHP y HTML, aunque podría agregar CSS si fuera necesario.

Lo que realmente estás buscando es la hoja de estilo o style.css. Para cambiar el aspecto de su sitio web, deberá aprender a agregar y editar código en este archivo.

Cómo personalizar tu tema de WordPress con CSS

Si desea personalizar su tema y cambiar la apariencia de su sitio con CSS, deberá agregar su propio código o editar lo que ya está allí. Hay formas de agregar CSS sin necesidad de tocar ningún archivo de tema, pero para cambiar el código de tema existente, deberá acceder a la hoja de estilo de su sitio.

A medida que realiza estos cambios, hay una cosa que debe saber: cuando su tema se actualiza, cualquier edición que haya realizado en style.css , functions.php u otros archivos de plantilla de tema se borrará. En general, no debería realizar cambios directos en su sitio web en el editor sin usar un tema secundario.

La hoja de estilo es como una "lista de instrucciones" para su sitio web, que establece exactamente cómo se diseña y cómo se maneja el código CSS. Aquí es donde realizará la mayor parte de su edición, pero también le mostraremos cómo acceder a otros archivos de plantilla de tema, como header.php y footer.php.

Hay dos formas de acceder a la hoja de estilo de su sitio web de WordPress: a través del panel de control de WordPress o mediante un cliente FTP. Los cubriremos a ambos.

¿No te sientes cómodo haciendo esto tú mismo? Considere contratar a un desarrollador de WordPress para que maneje ese paso por usted.

Edición de CSS de WordPress en el Panel de control

La forma más fácil y conveniente de acceder a su hoja de estilo CSS es directamente en el panel de control de WordPress. No es necesario instalar programas FTP o editores de código. Puede editar directamente cualquier archivo con resaltado de sintaxis y documentación de funciones integradas.

Antes de realizar modificaciones importantes en los archivos principales, siempre debe hacer una copia de seguridad de su sitio de WordPress. Es muy fácil cometer un error accidentalmente que podría alterar la apariencia de su sitio si es nuevo en CSS, y podría ser difícil averiguar cómo revertir los cambios.

Una vez que haya realizado una copia de seguridad y un tema secundario, inicie sesión en su backend. Puede encontrar el editor yendo al menú y haciendo clic en Apariencia > Editor de temas .

Debería ver una ventana emergente advirtiéndole que no realice ediciones directas en estos archivos. No se preocupe, simplemente haga clic en "Entiendo". Es solo una advertencia para usar un tema secundario y hacer una copia de seguridad de su sitio web antes de realizar cambios importantes. Siga esos pasos, y es seguro editar.

¡Y ahora estás dentro! Debería estar en la hoja de estilo de forma predeterminada, pero mire el menú de la derecha para ver los archivos de su tema si no es así.

Además de style.css, también tendrá acceso a archivos de plantilla como functions.php, header.php y single.php. Todos estos afectan cómo actúan ciertas páginas en su sitio.

Pero debe familiarizarse con PHP antes de sumergirse en estos archivos en particular.

Solo recuerda: la mayoría de los cambios de CSS que hagas aquí serán globales. Por ejemplo, si cambia sus encabezados H1 a una fuente determinada, tendrá efecto para cada página de su sitio. Deberá usar una sintaxis especial para personalizar el estilo de páginas específicas.

Editar archivos de temas directamente

¿Qué sucede si no puede acceder al Editor de temas o prefiere hacer su trabajo a través de FTP? Es más fácil usar el editor de fondo, pero algunos temas o complementos pueden desactivarlo. Si ese es el caso, deberá conectarse a su sitio web a través de FTP.

FTP, o Protocolo de transferencia de archivos, le permite acceder y modificar de forma remota los archivos de un sitio web. Lo primero que tendrás que hacer es descargar FileZilla o cualquier otro cliente FTP.

A continuación, debe comunicarse con su host y solicitar sus credenciales de FTP (host, puerto y nombre de usuario/contraseña, si corresponde). Si su host tiene un tablero, es posible que pueda encontrarlos iniciando sesión.

Las credenciales de los usuarios de Kinsta se encuentran en el panel de MyKinsta en Sitios > SFTP/SSH .

Una vez que los tenga, inicie su cliente FTP e ingrese esa información. Si no funciona, intente colocar "sftp://" antes de la URL en la sección Host .

Una vez que esté dentro, puede encontrar su archivo style.css haciendo clic en la carpeta wp-content para abrirlo, luego en la carpeta de su tema (como el tema T goingy Twenty ), luego desplazándose hasta que vea style.css.

Haga doble clic para abrirlo (o haga clic con el botón derecho y seleccione Ver/Editar ) y realice sus modificaciones. Recuerde guardar y volver a subir al servidor.

Si necesita editar otros archivos de plantilla como home.php, single.php, archive.php, puede encontrarlos en la misma carpeta que style.css.

No siempre es necesario editar los archivos de su tema, ya sea a través de FTP o del tablero. De hecho, es mejor evitar hacerlo si solo agrega un código adicional.

Para pequeñas adiciones, esta es la mejor manera de agregar CSS a su sitio de WordPress.

Cómo agregar CSS personalizado en WordPress

Si no está buscando editar el código CSS existente y solo desea agregar su propio estilo, se recomienda encarecidamente utilizar uno de los siguientes métodos: personalizador de WordPress o usar un complemento dedicado.

Por un lado, el código CSS agregado a través de uno de estos métodos es mucho más fácil de acceder y usar. No necesita preocuparse por colocar su nuevo CSS en el lugar equivocado u olvidar dónde lo agregó si desea realizar modificaciones más adelante.

Regístrese para recibir el boletín

¿Quiere saber cómo aumentamos nuestro tráfico en un 1000 %?

¡Únase a más de 20,000 personas que reciben nuestro boletín semanal con consejos internos de WordPress!

Suscríbase ahora

Además, el CSS agregado a través de uno de estos métodos no se perderá cuando se actualice el tema (aunque aún puede desaparecer si cambia de tema).

Esto significa que no necesita usar un tema secundario, y si algo falla, todo lo que tiene que hacer es eliminar el CSS que acaba de agregar.

Tenga en cuenta que aún debe mantener una copia de seguridad de su sitio web, ya que algunas personas informaron que ocasionalmente perdieron su CSS durante las actualizaciones importantes. Aún así, este método es mucho más confiable que editar directamente los archivos de temas.

Si bien puede simplemente agregar código a style.css y llamarlo un día, si no desea crear un tema secundario, realice modificaciones importantes en el CSS existente en su tema y potencialmente termine con todo su trabajo borrado, es mejor para usar la opción CSS adicional en el personalizador de WordPress o instalar un complemento.

1. Edición de CSS a través del personalizador de WordPress

En lugar de usar el Editor de temas, prueba esto. Inicie sesión en su backend de WordPress y haga clic en Apariencia > Personalizar para abrir la pantalla de personalización del tema. Verá una vista previa en vivo de su sitio web, con opciones a la izquierda para personalizar elementos como los colores, menús u otros widgets.

En la parte inferior de este menú, debe encontrar el cuadro CSS adicional .

Haga clic para abrirlo. Accederá a una nueva pantalla con un cuadro de entrada de código y algunas instrucciones. La pantalla CSS adicional incluye resaltado de sintaxis, al igual que el Editor de temas, junto con una validación que le permite saber si su código es incorrecto.

Cualquier código que escriba aparece automáticamente en el área de vista previa a la derecha a menos que tenga un error (aunque puede optar por publicarlo de todos modos).

Cuando haya terminado de trabajar, puede publicar su código, programar cuándo entrará en vigor o guardarlo como borrador para trabajar más tarde. Incluso puede obtener un enlace de vista previa para compartir con otros.

Como puede ver, la página CSS adicional es, en muchos sentidos, más poderosa que el Editor de temas y mucho más adecuada para agregar código que para jugar con los archivos principales.

El código CSS que escribe aquí sobrescribe el estilo predeterminado de su tema y no desaparece cuando se actualiza su tema. Si no puede verlo "en vivo" en su vista previa, verifique que esté usando los selectores correctos en su código CSS.

Al igual que con el Editor de temas, CSS es global de forma predeterminada, pero puede escribir código que se dirija a páginas específicas.

El único inconveniente es que, si cambias de tema, todo lo que hayas escrito se borrará. Asegúrate de hacer una copia de seguridad de tu CSS antes de pasar a un nuevo tema o podrías terminar perdiendo mucho trabajo.

Si tiene dificultades para usar esta opción, o desea una solución que funcione en todos los temas y pueda dirigirse más fácilmente a ciertas páginas, debe probar un complemento en su lugar.

2. Agregar CSS personalizado a WordPress usando complementos

Hay algunas razones por las que podría querer usar un complemento para agregar CSS a WordPress. Si bien la función es similar al menú CSS adicional, los estilos generalmente se mantendrán incluso si cambia/actualiza los temas.

También puede disfrutar más de su interfaz de usuario o disfrutar de funciones adicionales como el autocompletado. Algunos complementos incluso le permiten crear CSS a través de menús desplegables, en lugar de tener que escribirlo usted mismo.

CSS personalizado simple

Simple Custom CSS es el complemento de editor de CSS más popular, debido a su facilidad de uso, interfaz mínima y backend liviano. En resumen, es un complemento de WordPress muy pequeño que tiene un gran impacto.

La configuración es muy sencilla y no verá ningún impacto negativo en el rendimiento. Funciona en cualquier tema e incluye resaltado de sintaxis y verificación de errores.

CSS y JS personalizados simples

Simple Custom CSS y JS es una buena alternativa. También le permite apuntar al encabezado, pie de página, interfaz o incluso al administrador.

CSS de origen del sitio

SiteOrigin CSS es otra opción que también incluye un editor de CSS tradicional. Puede cambiar entre él y el editor visual en cualquier momento.

WP Agregar CSS personalizado

Si tiene dificultades para agregar CSS a páginas específicas, WP Add Custom CSS agrega un cuadro de CSS personalizado a la pantalla de edición y también viene con un estilo global.

Héroe de CSS

También puede considerar probar un editor visual de CSS. Estos toman toda la codificación complicada y la convierten en una serie de campos de entrada y menús desplegables fáciles de usar que manejan toda la programación por usted.

CSS Hero es un complemento de edición visual premium con algunas características realmente poderosas (animación, ediciones específicas del dispositivo y edición no destructiva, por nombrar algunas).

Dónde aprender CSS

¿Listo para sumergirte en CSS por ti mismo? Estos tutoriales para principiantes establecerán los conceptos básicos y le enseñarán la sintaxis que necesitará saber para escribir su propio código CSS funcional.

Puede ser desalentador, pero a menos que esté tratando de hacer algo realmente avanzado, ¡CSS no es demasiado difícil! Las cosas simples como cambiar el color de fondo o configurar el estilo de la fuente son bastante fáciles y hay muchos ejemplos en línea.

(Lectura sugerida: más de 50 fuentes modernas para usar en su sitio web de WordPress)

La mayoría de los tutoriales de programación que encontrarás en Internet también son completamente gratuitos. Hay un montón de información por ahí sin costo o a bajo costo.

Aquí hay algunos ejemplos que cubren los mejores tutoriales de CSS para principiantes.

• Tutorial CSS de W3Schools: Hay una tonelada absoluta de información que se puede encontrar aquí: tutoriales detallados, ejemplos y referencias con las que puede trabajar. Los tutoriales de W3Schools son lo más simples y fáciles de seguir posible, por lo que incluso si es un principiante total, este es un excelente lugar para comenzar.
• Codeacademy Aprenda CSS: a través de seis lecciones prácticas gratuitas, aprenderá los conceptos básicos de CSS. Este no es un simple tutorial en video, sino una lección interactiva que lo hace trabajar con código real. Con la versión pro, también obtiene cuestionarios y proyectos de forma libre para trabajar.
• Aprenda CSS en una hora: muchas personas quieren aprender un nuevo lenguaje de programación, pero simplemente no tienen tiempo para dedicarlo. Pero si puede reservar solo una hora, puede aprender CSS con este curso gratuito de 20 partes. Incluso si no eres un maestro al final, debes tener una buena comprensión de los conceptos básicos.
• Introducción a HTML y CSS básicos para usuarios de WordPress: ¿Busca algo específico para WordPress? Si siempre ha tenido problemas para escribir HTML y CSS, este curso es perfecto para usted. Es de pago, pero viene con 52 conferencias y cinco horas de video para aprender.

Resumen

Como usuario de WordPress, saltar a CSS puede resultar confuso al principio. Pero una vez que sepa cómo editar sus archivos de tema y dónde agregar estilo, no debería tener más problemas.

Los archivos de temas se pueden editar desde su backend o a través de FTP para cambiar la apariencia de su sitio, pero esto generalmente debe evitarse a menos que necesite editar el código existente.

Si solo desea agregar su propio CSS, use la página CSS adicional en Apariencia > Personalizar , o pruebe un complemento si necesita algo más potente.

Las ediciones de su hoja de estilo se perderán con la actualización del tema, a menos que use un tema secundario. No ocurre lo mismo con el CSS adicional. Su código está a salvo de actualizaciones, pero no lo olvide: solo un complemento conservará CSS cuando cambie de tema.

Independientemente del método que elija, siempre debe mantener copias de seguridad periódicas de su sitio web, incluida la hoja de estilo y el código personalizado que ha agregado. Ahora es el momento de repasar los conceptos básicos de CSS utilizando los recursos que proporcionamos.

¡Feliz estilismo!

Lectura sugerida: Los mejores cursos de diseño web en línea