Saltar al contenido

Cómo agregar CSS en WordPress (La manera fácil)

How to Add CSS in WordPress (The Easy Way)

Una de las razones por las que WordPress es el sistema de administración de contenido (CMS) más popular es porque es muy amigable para principiantes. No tiene que tener ningún conocimiento técnico, habilidades de codificación o experiencia en desarrollo web para crear un sitio web completamente funcional desde cero.

Dicho esto, para aquellos que están listos para mejorar su juego y hacer que su sitio sea un poco más atractivo visualmente, hay una manera de personalizar su sitio con solo un poco de codificación del conocimiento.

Aprender a usar CSS en WordPress no tiene que ser aterrador. De hecho, en realidad es muy fácil de hacer.

Si estás listo para dar el paso y aprender a usar algún código en tu sitio web de WordPress para que se destaque de la competencia, sigue leyendo. Hoy explicaremos qué es CSS y cómo puede usarlo para realizar cambios en el diseño de su sitio web.

¿Qué es CSS en WordPress?

Cascading Style Sheets (CSS) es un lenguaje utilizado en diseño web para cambiar la apariencia visual de un sitio web. Por ejemplo, puede usarlo para cambiar el diseño, las fuentes, los colores y mucho más de su sitio. Y lo mejor de usar CSS en WordPress es que te permite anular algunas de las configuraciones predeterminadas de tu tema.

Esto es útil para aquellos que usan un tema popular de WordPress. Cuando un tema se usa ampliamente, aunque el contenido difiere de un sitio a otro, el diseño básico es el mismo. Esto dificulta que su sitio web se vea diferente de todos los otros sitios web que usan el mismo tema con los mismos elementos de diseño.

¿Cómo funciona CSS?

¿Alguna vez has oído hablar del lenguaje de marcado de hipertexto (HTML)?

HTML es el idioma principal utilizado para crear su sitio web de WordPress. Su trabajo es decirle a los navegadores web cómo se ve su sitio web. De esta manera, cuando un visitante del sitio hace clic en su sitio web, ve cosas como colores, imágenes y contenido escrito. Sin HTML, su sitio web sería páginas de código que nadie podría entender.

Para ver cómo se ve HTML, todo lo que tiene que hacer es hacer clic en los tres puntos en la esquina superior derecha del Editor Gutenberg y seleccionar Editor de código:

ejemplo html

El problema con la edición de HTML para que su sitio web se vea de cierta manera es que consume mucho tiempo (sin mencionar que tienes que entender el código) Por ejemplo, supongamos que desea cambiar todos los títulos de sus publicaciones para que sean de un color diferente. Tendría que ir a cada publicación de blog que haya escrito y editar manualmente el código HTML para cambiar el color.

Es por eso que usar CSS en su lugar es tan útil.

CSS ayuda a determinar cómo se verán los elementos HTML de su sitio web en su sitio web. Y la mejor parte es que es un lenguaje general que puede aplicarse a todos los elementos en tu sitio web con unas pocas líneas simples de código.

El uso de CSS en WordPress le brinda un control completo sobre el aspecto de su sitio y hace que cambiar ciertos elementos sea muy fácil. Y ni siquiera tiene que entender cómo funciona HTML. Simplemente puede agregar un código CSS a su sitio web y cambiar su apariencia. Es realmente así de simple.

Cómo agregar CSS en WordPress

Entonces, sabes que quieres hacer algunos cambios de diseño en tu sitio web de WordPress. Y ahora sabe que usar CSS es una opción, incluso si no tiene conocimientos de codificación.

Pero, ¿cómo se agrega CSS en WordPress?

1. Hojas de estilo de temas de WordPress

Puede agregar fragmentos de código CSS directamente a las hojas de estilo de su tema de WordPress para realizar cambios en la apariencia general de su sitio web.

Dicho esto, este método es no recomendado para la mayoria de la gente. Agregar código a su tema principal plantea algunos riesgos:

  • Realmente podrías estropear la apariencia de tu sitio web si no sabes lo que estás haciendo
  • Cada vez que actualice el tema, todos los cambios que haya realizado al agregar CSS se perderán, lo que significa que tendrá que comenzar de nuevo cada vez que ejecute una actualización
  • Puede romper su sitio web si realiza cambios en el lugar equivocado

Si es un usuario avanzado de WordPress y desea agregar CSS directamente a las hojas de estilo de su tema, al menos debe hacerlo con un tema secundario. De esta manera, si comete un error, no arruina todo su sitio web. Además, cada vez que actualice su tema principal, su tema secundario mantendrá sus cambios de CSS.

Para obtener más información, consulte nuestro artículo sobre todo lo que necesita saber sobre los temas secundarios de WordPress.

Mientras tanto, echa un vistazo a formas más amigables para principiantes de agregar CSS en WordPress.

2. Personalizador de temas

En su panel de WordPress, hay una manera de acceder al Personalizador de temas. Todo lo que tienes que hacer es navegar a Apariencia > Personalizar.

tablero de wp, apariencia

Esto lo llevará a la interfaz del Personalizador de temas. Verá una vista previa de su sitio web y un montón de opciones en el lado izquierdo.

Para agregar CSS a su WordPress, haga clic en CSS adicional.

agregar css

Cuando haga esto, verá un cuadro de texto en blanco al que puede agregar su código CSS.

agregar personalizador de tema css

Cuando se agrega una regla CSS válida, verá los cambios reflejados en el panel de vista previa del Personalizador de temas.

Por ejemplo, supongamos que queríamos cambiar el título de la publicación de negro a azul. Agregaríamos CSS en el cuadro de texto en blanco y veríamos esto en el panel de vista previa:

cambiar el título de la publicación con css

Observe cómo «Hello World» ya no es negro.

Además, vea cómo usamos la palabra «azul» en el código CSS. Si desea un tono específico de azul, siempre puede ingresar códigos hexadecimales. Por ejemplo, podríamos reemplazar la palabra «azul» con «# 61d4f4» para obtener este color para el título de la publicación:

cambio de título de publicación con código hexadecimal css

Puede agregar tantos fragmentos de código a esta sección como desee. Solo recuerde, cualquier cambio que haga aquí se aplicará a todo su sitio web. Además, los cambios que realiza en un tema no aparecerá en otro tema si lo activas. Si cambia de tema, deberá volver a hacer todas las personalizaciones de CSS.

Hacer clic Publicar cuando hayas terminado.

3. Complemento CSS

Si no desea utilizar el Personalizador de temas para agregar CSS en WordPress, siempre puede usar un complemento gratuito de WordPress como Simple Custom CSS.

Este complemento ligero creará un nuevo elemento de menú en su panel de WordPress en Apariencia. Será etiquetado CSS personalizado. Cuando haga clic en él, verá un cuadro de texto en blanco similar al que se encuentra en el Personalizador de temas.

CSS personalizado simple

Después de agregar los fragmentos de código CSS, haga clic en Actualizar CSS personalizado para guardar tus cambios.

La ventaja de usar un complemento CSS como este es que incluso si cambia de tema, su CSS personalizado estará disponible. Esto significa que no tendrá que volver a ingresarlo nuevamente.

Otras herramientas útiles para personalizar su sitio de WordPress usando CSS incluyen:

Fragmentos de código CSS de ejemplo

Puede cambiar casi cualquier elemento de diseño en su sitio de WordPress con CSS utilizando este desglose básico:

  • Primera linea: qué elemento está modificando, como el título de una publicación (h1), el texto dentro de un párrafo (p) o un área de widget (widget)
  • Todas las otras líneas: instrucciones específicas para lo que se va a cambiar, entre paréntesis

Hay toneladas de fragmentos de código CSS diferentes que se pueden utilizar para personalizar su sitio web. Y sería imposible enumerarlos a todos.

Dicho esto, si desea personalizar su sitio web usando CSS, aquí hay algunos fragmentos de código de ejemplo para mostrarle cómo funciona.

Familia de fuentes y tamaño

Para cambiar la fuente y su tamaño, agregue este código CSS:

p {
font-family: Georgia;
font-size: 20px;
}
familia de fuentes y tamaño css

Puede reemplazar la familia de fuentes con el estilo de fuente que desee y cambiar el número para que el tamaño de fuente sea tan grande o pequeño como desee.

Personalización de la barra lateral

Supongamos que desea agregar algo de personalización a los widgets de la barra lateral de su sitio web. Para agregar un bonito color de fondo y relleno, agregue este código CSS a una nueva línea:

.widget {
background: #B9EBFA;
padding: 25px;
}
widget css

Recuerde, este CSS se aplicará a todas las áreas de widgets en tu sitio web. Si desea aplicar el cambio a un área de widget específica, su CSS deberá reflejar eso.

Por ejemplo, supongamos que desea que el CSS se aplique solo al widget de la barra de búsqueda. Para hacer esto, cambie el CSS para que se vea así:

.widget_search {
background: #B9EBFA;
padding: 25px;
}
widget css específico

Para obtener más formas de personalizar su sitio, asegúrese de consultar estos 5 códigos CSS simples.

Dónde aprender más sobre CSS

Si te gusta trabajar con CSS, hay muchos lugares para aprender CSS para WordPress:

Si tiene problemas para encontrar un código CSS para realizar un cambio específico en su sitio web, por lo general, una simple búsqueda en Google lo ayudará. Pero si realmente quiere sumergirse y hacer algunos cambios serios en su sitio web, consulte algunos de los recursos anteriores y aprenda CSS de manera integral.

Pensamientos finales

Tener un sitio web único que se destaque entre todos los demás es una parte importante de su éxito general. Y resulta que agregar CSS en WordPress es una forma fácil de personalizar su sitio.

Aprender CSS no es difícil de hacer si sabes por dónde empezar. Y aunque puede tomar un poco de tiempo aprender algunos de los fragmentos de código más comunes, antes de que se dé cuenta, podrá realizar todo tipo de cambios en la apariencia de su sitio con muy poco esfuerzo.

Solo recuerde usar el Personalizador de temas o un complemento CSS para agregar CSS en WordPress. No tiene sentido romper su sitio y arriesgarse a un tiempo de inactividad serio con algunos cambios de diseño.

¿Alguna vez has agregado CSS en WordPress? ¿Hay fragmentos de código de acceso que le gustaría compartir? Si es así, nos encantaría saberlo en los comentarios a continuación.