Cómo agregar CSS a un sitio web con WordPress

Para los principiantes, agregar CSS a un sitio web de WordPress no es una tarea fácil. Sin embargo, a veces es muy necesario. En realidad, hay muchas formas de personalizar su sitio (con creadores de páginas, varios complementos y configuraciones de temas de WordPress, etc.), pero a veces, todo lo que necesita hacer es cambiar uno o dos aspectos muy específicos de un diseño, que es donde entra CSS Pero, ¿cómo haces esto? ¿Por dónde empiezas en WordPress? No temas, tenemos las respuestas …

Esto es lo que necesita saber:

Cómo agregar CSS a WordPress:

– (nota: créditos de video para Topher DeRosia – creador de HeroPress)

Transcripción del video:

¡Hola! Este es Topher con WinningWP. En este video, veremos cómo agregar CSS personalizado a WordPress de la manera correcta. Imagine por un momento que desea realizar un pequeño cambio en la apariencia de su sitio. Buscas en Google un poco y encuentras un pequeño fragmento de CSS y te dicen: «Pon esto en tu sitio». Pero, ¿dónde lo pones? ¿Y cómo sabe que se hace de la manera correcta? Deja que te enseñe. Primero tenemos que determinar para qué sirve su CSS. En realidad, solo hay dos áreas en las que es posible que desee aplicar CSS. Uno es para el diseño general del sitio, que es el diseño, los colores, etc. El otro es el diseño del contenido y así es como se ve su contenido específico: tratamiento de la imagen, tamaño de las citas, etc. En el futuro, es posible que desee cambiar el diseño de su sitio. Obtenga un tema completamente nuevo y, sin embargo, mantenga los pequeños ajustes que hizo para el aspecto de su contenido. Déjame mostrarte lo que quiero decir. Aquí tenemos un sitio bastante simple y es fácil describir el diseño. Hay una barra de búsqueda en la parte superior, una barra de encabezado, un área de contenido y es difícil de ver porque está vacía, pero tengo una barra lateral aquí. El fondo es todo blanco, el pie de página es gris y la barra de búsqueda es negra. Este es el tipo de cosas que cambiarías relacionadas con tu tema. Aquí tenemos nuestro contenido, y tenemos una cierta cantidad de relleno a la derecha de las imágenes y los subtítulos están en cursiva. Esos serían cambios relacionados con el contenido, así que echemos un vistazo a cómo hacer ambos. Los cambios en el diseño del sitio están vinculados a su tema, lo que tiene sentido. Si cambia su tema en el futuro, no querrá mantener el CSS porque se trata de cómo se ve. Así que queremos cambiar su tema actual y luego hacer que desaparezca si alguna vez se deshace de ese tema. Tiene dos opciones, una es el Personalizador y la otra es editar style.css. Ninguno de los dos es muy difícil, pero el Personalizador es realmente el más fácil. Déjame mostrarte lo que quiero decir. Me gustaría cambiar el encabezado de mi sitio para que sea rojo. Entonces, lo primero que voy a hacer es encontrar su nombre. En Chrome, hago clic derecho y presiono inspeccionar. Y aquí dice site-header-main. Entonces eso es lo que quiero cambiar. Ahora aquí, en la parte superior de mi sitio, está el botón Personalizar. Si me desplazo hasta la parte inferior del Personalizador, puedo hacer clic en CSS adicional. Aquí hay algunas instrucciones sobre cómo usarlo. Si hace clic en cerrar, aparece aquí. Así que voy a escribir site-header-main y, entre llaves, pondré el color de fondo rojo. Ahora no es necesario que sepa cómo usar el inspector como yo lo hice y no necesita saber que f es rojo. Es posible que haya obtenido este código de un sitio web en algún lugar y está bien, no tiene que saber cómo encontrarlo usted mismo. Solo te estoy mostrando cómo ponerlo aquí. Ahora que está allí, puedo hacer clic en publicar y ahora puedo cerrar esta pestaña y ahora tengo un encabezado rojo. Puede poner tanto CSS como desee. Puede cambiar completamente todo el diseño de su sitio si lo desea. Pero ahora quiero mostrarte la otra forma de editar el CSS. Voy a eliminar el código que puse antes y guardarlo y ahora vamos a editar el archivo style.css de nuestro tema. Ir al Panel de control, en Apariencia, Temas. Ahora su tema activo siempre está aquí en la parte superior izquierda. Realmente solo desea hacer este método en particular si está utilizando un tema hijo. Puede ver aquí que tengo make install pero mi tema activo es make – child theme. Esto hace que, si make hace una actualización, no borre mis personalizaciones que estarán en mi tema secundario y mi tema secundario nunca se actualizará porque los temas secundarios no se actualizan. Si puede confirmar que está usando un tema hijo, en el menú de aquí hay un enlace para el Editor. Y aquí mismo te dirán todo lo que acabo de decir sobre temas infantiles. Así que continúe y haga clic en Comprendo si está utilizando un tema secundario. El primer archivo que aparece es su style.css. Siempre sera de esa manera. Y todo este texto aquí es información sobre su tema. No es necesario que le prestes atención. Vaya directamente a la parte inferior y verá aquí que el mío dice «Agrega tus estilos personalizados a continuación». Antes de realizar cualquier edición en este archivo, quiero recomendarle que haga una copia de seguridad. Y eso es realmente simple. Simplemente vamos a copiarlo y pegarlo en otro archivo en algún lugar. Entonces, si estás en Windows, puedes hacer Control + A o en una Mac puedes hacer Command + A. Resaltará todo y ya sea Control o Command + C y lo copia. Y puede pegar en cualquier otro archivo que pueda contener texto. Realmente no necesita mantenerlo permanentemente, solo lo mantiene mientras edita este y si este funciona perfectamente, una vez que haya terminado, simplemente elimine su copia de seguridad. Pero si este se rompe y te pierdes, simplemente puedes borrar este y pegar de nuevo lo que copiaste. Así que voy a pegar exactamente el mismo código que hice con el Personalizador y haré clic en Actualizar archivo. Y luego recarga mi sitio. Y ahí estamos, también es rojo. Ahora bien, si el Personalizador es tan fácil, ¿por qué querrías poner tu archivo style.css? La razón es que su archivo style.css se carga mucho antes que el Personalizador. Entonces, si lo hizo con el Personalizador, es posible que obtenga una instancia en la que la página se cargue por completo, se vea blanca durante una fracción de segundo y luego parpadee en rojo. Pero si lo pones en style.css, no hace eso. Otra de las cosas que me encantó del Personalizador es que puede ver los cambios a medida que los escribe. Entonces, un flujo de trabajo común para mí es escribir todo mi CSS en el Personalizador y luego copiarlo y pegarlo en style.css. No tienes que hacer eso. Podrías dejarlo todo en el Personalizador y funcionaría para siempre. Si recién está comenzando, mi recomendación es que haga solo el Personalizador. Es rápido, fácil, indoloro y los negativos son mínimos. Si desea experimentar y mojarse un poco con el funcionamiento interno de WordPress, siga adelante y edite su archivo style.css. Ahora, el otro tipo de CSS con el que es posible que desee trabajar es para administrar su contenido. Ahora, para esto, no lo quieres atado al tema. Quieres que se mantenga incluso si cambias de tema. Es posible que siempre desee que las leyendas de las imágenes no estén en cursiva, independientemente del tema que esté utilizando. En ese caso, desea utilizar un complemento. Estoy usando este complemento llamado Simple Custom CSS. Luego, en Apariencia, hay un elemento de menú CSS personalizado. Y le permite simplemente escribir CSS aquí mismo. Así que voy a averiguar el nombre de esta leyenda. Hago clic derecho e inspecciono. Y dice que se llama wp-caption-text. Así que aquí puedo escribir .wp-caption-text, font-style: normal; Hago clic en Actualizar CSS personalizado y luego recargaremos nuestra página. Y puede ver que ya no está en cursiva. Así que ahora voy a cambiar mi tema a. Y verá que el título de mi imagen todavía no está en cursiva y, sin embargo, todo el concepto de un encabezado rojo se ha ido porque todo ese código estaba vinculado al otro tema. Entonces, para revisar, si desea administrar su tema, usaría el Personalizador o, en Apariencia, vaya a Editor y edite su hoja de estilo. Si desea administrar el CSS para su contenido, entonces desea un complemento que mantenga su CSS separado del tema.