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

Una de las razones por las cuales WordPress es el sistema de gestión de contenido más popular (CMS) es que es muy amigable con los principiantes. No tiene que tener conocimiento técnico, habilidades de codificación o experiencia en el desarrollo web para crear un sitio web completamente funcional desde la base. Dicho esto, para aquellos que están listos para intensificar su juego y hacer que su sitio sea un poco más atractivo visualmente atractivo, hay una manera de personalizar su sitio con solo un poco de conocimiento de codificación. Aprender a usar CSS en WordPress no debe dar miedo. De hecho, es muy fácil de hacer.
Si está listo para dar el paso y averiguar cómo usar un código en su sitio de WordPress para distinguirlo de la competencia, continúe leyendo. Hoy explicaremos qué es CSS y cómo puede usarlo para hacer cambios en el diseño de su sitio web. ¿Qué es CSS en WordPress? Las hojas de estilo de cascada (CSS) es un idioma utilizado en el diseño web para cambiar el aspecto visual de un sitio web. Por ejemplo, puede usarlo para cambiar el aspecto del sitio, fuentes, colores y más. Y la mejor parte del uso de CSS en WordPress es que le permite reemplazar algunas de las configuraciones predeterminadas de su base.
Esto es útil para aquellos que usan una WordPress popular. 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 demás 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 de WordPress. Su tarea 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 de Gutenberg y seleccionar el editor de código:
El problema con la edición de HTML para que su sitio se vea de cierta manera es consumir mucho tiempo (sin mencionar, debe comprender el código). Por ejemplo, suponga que quería cambiar todas las publicaciones de publicaciones para tener un color diferente. Debe acceder a cada publicación de blog que ha escrito y editar manualmente el código HTML para cambiar el color. Por lo tanto, el uso de CSS es muy útil.

CSS ayuda a determinar cómo se mostrarán los elementos HTML de su sitio web. Y la mejor parte es que es un idioma general que se puede aplicar a todos los elementos de su sitio web con algunas líneas de código simples. El uso de CSS en WordPress le brinda un control completo sobre cómo se ve su sitio y hace que cambiar ciertos elementos sea muy simple. Y no tienes que entender cómo funciona HTML. Solo puede agregar código CSS a su sitio web y cambiar su aspecto. Es tan simple. Cómo agregar CSS a WordPress para que sepa que desea hacer algunos cambios de diseño en su sitio web de WordPress. Y ahora sabe que el uso de CSS es una opción, incluso si no tiene conocimiento de codificación. Pero, ¿cómo agrega CSS a WordPress? 1. Las hojas temáticas de WordPress pueden agregar fragmentos de código CSS directamente a sus hojas de estilo WordPress para realizar cambios en el aspecto general de su sitio web. Dicho esto, este método no se recomienda para la mayoría de las personas. Agregar código de tema principal presenta algunos riesgos:
Puede destruir el aspecto de su sitio si no sabe lo que está haciendo
Cada vez que actualice el tema, todos los cambios realizados al agregar CSS se perderán, lo que significa que tendrá que comenzar de nuevo cada vez que realice una actualización
Es posible que rompa su sitio si realiza cambios en el lugar incorrecto
Si usted es un usuario avanzado de WordPress y desea agregar CSS directamente a las hojas de estilo de su base, debe hacerlo al menos usando un tema de niños. De esta manera, si comete un error, no arruine todo su sitio. Además, cada vez que actualiza el tema de su padre, el tema de su hijo mantendrá CSS. Para obtener más información, consulte nuestro artículo sobre todo lo que necesita saber sobre los niños de WordPress. Mientras tanto, verifique las formas más amigables para que los principiantes agregen CSS a WordPress. 2. Personalice el tema en su tablero de WordPress, hay una manera de acceder al cliente temático. Todo lo que tienes que hacer es navegar para mirar> personalización.
Esto lo traerá a la interfaz de tema personalizador. Verá una vista previa de su sitio web y una serie de opciones en el lado izquierdo. Para agregar CSS a WordPress, haga clic en el CSS adicional.
Cuando haga esto, verá un cuadro de texto vacío al que puede agregar el código CSS.
Al agregar una regla CSS válida, verá los cambios reflejados en el panel de vista previa del personalizador del tema. Por ejemplo, supongamos que queríamos cambiar el título de negro en azul. Agregaríamos CSS al cuadro de texto vacío y veríamos esto en el panel de vista previa:

Observe cómo “Hola Mundo” ya no es negro.

Además, ve cómo usamos la palabra “azul” en el código CSS. Si desea un tono azul específico, puede introducir códigos hexadecimales en cualquier momento. Por ejemplo, podríamos reemplazar la palabra “azul” con “# 61D4F4” para obtener este color para el título:

Puede agregar cuántos fragmentos de código desea en esta sección. Recuerde, cualquier cambio que realice aquí se aplicará a todo el sitio web. Además, los cambios que realice en un tema no aparecerán en otro tema si lo activa. Si cambia la tarea, deberá restaurar todas las personalizaciones de CSS. Haga clic en Publicar cuando haya terminado. 3. Plugin CSS Si no desea usar el tema Customizer para agregar CSS en WordPress, puede usar un complemento gratuito de WordPress en cualquier momento. Este complemento de luz creará un nuevo elemento de menú en el tablero de WordPress. Será etiquetado como CSS personalizado. Al hacer clic en él, verá un cuadro de texto vacío similar al de la costumbre temática. La ventaja de usar un complemento CSS como este es que incluso si cambia su tarea, su CSS personalizado estará disponible. Esto significa que no tendrá que volver a ingresarlo. Otras herramientas útiles para personalizar su sitio de WordPress utilizando CSS incluyen:

Elementor (nuestra revisión)

Beaver Builder (nuestra revisión)

Ejemplos de fragmentos de código CSS Puede cambiar casi cualquier elemento de diseño en su sitio web de WordPress con CSS utilizando este desglose básico:

Primera línea: el elemento que cambias, tal
Todas las demás líneas: instrucciones específicas para lo que se modificará, incluidas entre los soportes
Hay muchos fragmentos de código CSS diferentes que se pueden usar para personalizar su sitio. Y sería imposible enumerarlos a todos. Dicho esto, si desea personalizar su sitio web utilizando CSS, aquí hay algunos ejemplos de fragmentos de código para mostrarle cómo funciona. Fuera y tamaño de la fuente Para cambiar su fuente y tamaño, agregue este código CSS: P {
Font-Family: Georgia;
Tamaño de fuente: 20px;
}
Puede reemplazar a la familia de fuentes con el estilo de fuente que desea y puede cambiar el número para que el tamaño de la fuente sea tan grande o pequeño como desee. Personalización de la barra lateral para suponer que desea agregar algunas personalizaciones a los widgets en la barra lateral en su sitio web. Para agregar un hermoso color de fondo y relleno, agregue este código CSS a una nueva línea:
.Widget {
Antecedentes: #B9EBFA;
Relleno: 25px;
}

Recuerde, este CSS se aplicará a todas las áreas de widgets en su sitio web. Si desea aplicar un área de widget en particular, su CSS deberá reflejar esto. Por ejemplo, suponga que desea que CSS se aplique solo al widget de la barra de búsqueda. Para hacer esto, cambie CSS para que se vea así:
.widget_search {
Antecedentes: #B9EBFA;
Relleno: 25px;
}

Para obtener más formas de personalizar su sitio, asegúrese de verificar estos 5 códigos CSS simples. Dónde aprender más sobre CSS Si le gusta trabajar con CSS, hay muchos lugares para el aprendizaje de CSS de WordPress:
W3schools.com (gratis)
Codeacademy (gratis)
Documentos web MDN (GRATIS)
Udemy (pagado)

Lynda.com (pagado)