in ,

Cómo agregar CSS en WordPress (de la manera más fácil)

Una de las razones por las que WordPress es el sistema de gestión de contenido (CMS) más popular es porque es muy amigable para principiantes. No es necesario que tengas 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 intensificar su juego y hacer que su sitio sea un poco más atractivo visualmente, hay una manera de personalizar tu sitio con solo un poco de conocimiento de codificación.

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

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

¿Qué es CSS en WordPress?

Cascading Style Sheets (CSS) es un lenguaje utilizado en el diseño web para cambiar la apariencia visual de un sitio web. Por ejemplo, puedes usarlo para cambiar el diseño, las fuentes, los colores y mucho más de tu sitio. Y la gran parte 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 es ampliamente utilizado, aunque el contenido difiere de un sitio a otro, el diseño básico es el mismo. Esto hace que sea difícil que tu sitio web se vea diferente de todos los demás sitios web que utilizan 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 lenguaje principal utilizado para crear tu sitio web de WordPress. Su trabajo es decirle a los navegadores web cómo se ve tu sitio web. De esta manera, cuando un visitante del sitio hace clic en tu sitio web, ve cosas como colores, imágenes y contenido escrito. Sin HTML, tu sitio web sería páginas de código que nadie podría entender.

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

El problema con la edición de HTML para que tu sitio web se vea de cierta manera es que lleva mucho tiempo (sin mencionar que debe comprender el código). Por ejemplo, supongamos que deseas cambiar todos los títulos de tus publicaciones para que sean de un color diferente. Tendrías 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 tu lugar es tan útil.

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

El uso de CSS en WordPress brinda un control completo sobre la forma en que se ve tu sitio y hace que cambiar ciertos elementos sea muy fácil. Y ni siquiera tienes que entender cómo funciona HTML. Simplemente puedes agregar un poco de código CSS a tu sitio web y cambiar tu apariencia. Realmente es así de simple.

Cómo agregar CSS en WordPress

Por lo tanto, sabes que deseas realizar algunos cambios de diseño en tu sitio web de WordPress. Y ahora sabes que usar CSS es una opción, incluso si no tienes conocimientos de codificación.

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

1. Hojas de estilo del tema de WordPress

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

Dicho esto, este método no se recomienda para la mayoría de las personas. Agregar código a tu tema principal plantea algunos riesgos:

  • Es posible que realmente arruine la apariencia de tu sitio web si no sabes lo que está haciendo.
  • Cada vez que actualices el tema, todos los cambios que hayas realizado al agregar CSS se perderán, lo que significa que tendrás que comenzar de nuevo cada vez que ejecute una actualización.
  • Puedes romper tu sitio web si realizas cambios en el lugar equivocado

Si eres un usuario avanzado de WordPress y quieres agregar CSS directamente a las hojas de estilo de tu tema, al menos debes hacerlo usando un tema secundario. De esta manera, si cometes un error, no arruinas todo tu sitio web. Además, cada vez que actualices tu tema principal, tu tema secundario se aferrará a tus cambios de CSS.

Para obtener más información, consulta nuestro artículo sobre todo lo que necesitas 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 tu panel de WordPress, hay una forma de acceder al Personalizador de temas. Todo lo que tienes que hacer es navegar a Apariencia > Personalizar.

Esto te llevará a la interfaz de Theme Customizer. Verás una vista previa de tu sitio web y un montón de opciones en el lado izquierdo.

Para agregar CSS a tu WordPress, haz clic en CSS adicional.

Cuando hagas esto, verás un cuadro de texto en blanco al que puedes agregar tu código CSS.

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

Por ejemplo, digamos 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:

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

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

Puedes agregar tantos fragmentos de código a esta sección como desees. Solo recuerda, cualquier cambio que realices aquí se aplicará a todo tu sitio web. Además, los cambios que realices en un tema no aparecerán en otro tema si lo activas. Si cambias de tema, tendrás que volver a hacer todas las personalizaciones de CSS.

Haz clic en Publicar cuando hayas terminado.

3.CSS Plugin

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

Este complemento ligero creará un nuevo elemento de menú en tu panel de WordPress en Apariencia. Se etiquetará css personalizado. Cuando hagas clic en él, verás un cuadro de texto en blanco similar al que se encuentra en el Personalizador de temas.

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

La ventaja de usar un complemento CSS como éste es que incluso si cambias de tema, tu CSS personalizado estará disponible. Esto significa que no tendrás que volver a ingresarlo de nuevo.

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

  • Elementor
  • Beaver Builder

Ejemplo de fragmentos de código CSS

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

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

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

Dicho esto, si deseas personalizar tu sitio web utilizando CSS, aquí hay algunos fragmentos de código de ejemplo para mostrarle cómo funciona.

Familia y tamaño de fuente

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

p {
font-family: Georgia;
font-size: 20px;
}

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

Personalización de la barra lateral

Digamos que deseas agregar algo de personalización a los widgets de la barra lateral de tu sitio web. Para agregar un buen color de fondo y relleno, agrega este código CSS a una nueva línea:

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

Recuerda, este CSS se aplicará a todas las áreas de widgets en tu sitio web. Si deseas aplicar el cambio a un área de widget específica, tu CSS deberás reflejarlo.

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

.widget_search {
background: #B9EBFA;
padding: 25px;
}

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

Dónde obtener más información sobre CSS

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

Si tienes problemas para encontrar un código CSS para realizar un cambio específico en tu sitio web, generalmente una simple búsqueda en Google te ayudará. Pero si realmente deseas sumergirte y hacer algunos cambios serios en tu sitio web, consulta algunos de los recursos anteriores y aprende CSS de manera integral.

Reflexiones finales

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

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

Solo recuerda usar el Personalizador de temas o un complemento CSS para agregar CSS en WordPress. No tiene sentido romper tu sitio y arriesgarte a un tiempo de inactividad grave por algunos cambios de diseño.

¿Alguna vez has añadido CSS en WordPress? ¿Hay algún fragmento de código de acceso que te gustaría compartir? Si es así, nos encantaría escuchar todo al respecto en los comentarios a continuación.

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las 6 mejores herramientas de optimización de imágenes comparadas

17 de las mejores fuentes de Google para 2021 (y cómo usarlas en WordPress)