Cómo agregar CSS a WordPress: 5 métodos

Publicado: 2021-12-11

¿Quieres aplicar CSS y editar el estilo de tu sitio? Si es así, esta publicación es para ti. En esta guía, le mostraremos diferentes formas de agregar CSS a WordPress para que pueda personalizar su sitio web e impresionar a sus visitantes.

Aunque WordPress tiene muchos temas y plantillas que puede usar, si desea cambiar la apariencia de su sitio, tarde o temprano terminará agregando código CSS.

Agregar CSS a un sitio web es bastante fácil. Anteriormente vimos cómo aplicar CSS usando la herramienta de desarrollo del navegador, pero hay otras formas. Todos estos métodos diferentes tienen ventajas y desventajas, por lo que puede ser difícil para los principiantes comprender cuál es la mejor manera de agregar CSS para su situación específica. Es por eso que en esta guía, le mostraremos diferentes formas de agregar estilo CSS a un sitio web de WordPress .

Cómo agregar CSS a WordPress

Hay varias formas de aplicar el estilo CSS a un sitio de WordPress:

  1. A través del personalizador de temas
  2. Edición de archivos de temas secundarios
  3. Cargando su propio archivo CSS
  4. Aplicar CSS al encabezado con ganchos
  5. Agregar CSS al backend

Echemos un vistazo a cada método, para que pueda elegir el más apropiado para usted.

NOTA : No vamos a explicar en detalle la estructura de CSS en esta publicación, por lo que le recomendamos que tenga un conocimiento básico de CSS para poder seguir esta guía sin problemas.

Como paso previo a la aplicación de CSS, le recomendamos que utilice la herramienta de desarrollo del navegador para encontrar elementos HTML específicos que desee cambiar. Si no está seguro de cómo hacerlo, consulte nuestra guía sobre cómo aplicar CSS utilizando la herramienta de desarrollo del navegador.

1) Aplicar CSS con el personalizador de temas

La forma más fácil y rápida de agregar código CSS personalizado a WordPress es insertándolo en el editor de CSS adicional del personalizador de temas. Este es el editor de CSS de WordPress incorporado y está presente en todos los sitios web de forma predeterminada. Sin embargo, tenga en cuenta que algunos temas y complementos pueden desactivar esta función.

Para aplicar su CSS usando el personalizador de temas, vaya a su tablero y diríjase a Apariencia > Personalizar > CSS adicional para abrir el editor de CSS . Allí, verá el código CSS de su sitio y podrá agregar su código.

aplicar su CSS personalizado es insertarlo en el editor de CSS adicional del personalizador de temas.

Una de las mayores ventajas de este método es que puede obtener una vista previa del resultado de la personalización de CSS en tiempo real en el lado derecho de la pantalla.

Una vez que agregue su código, se guardará en la base de datos en la tabla *_posts , bajo el tipo de publicación custom_css . Aunque puede aplicar todo tipo de personalización aquí, no es una práctica recomendada para una gran lista de reglas CSS debido al rendimiento.

2) Edición de archivos de temas secundarios

Otra forma de agregar estilo CSS a WordPress es editar los archivos CSS del tema secundario. Este método tiene un mejor rendimiento que aplicar código directamente desde el Personalizador porque se carga sin necesidad de recuperarlo de la base de datos.

La mayoría de los temas secundarios tienen un archivo style.css , por lo que simplemente puede agregar su CSS personalizado allí. Para encontrar el archivo style.css de su tema hijo, en su tablero de WordPress, vaya a Apariencia > Editor de temas . Luego presione el menú desplegable en la parte superior derecha, seleccione su tema secundario y haga clic en el archivo style.css como se muestra a continuación.

Incluir el código CSS directamente en los archivos del tema secundario

Si su tema hijo no tiene un archivo style.css o cualquier otro archivo con una extensión .css , puede crearlo y aplicarlo como se describe en la siguiente sección.

Alternativamente, algunos temas secundarios tienen una carpeta CSS con varios archivos. Si ese es su caso, asegúrese de editar el archivo style.css correcto.

3) Cargue su propio archivo CSS

Si desea agregar un código CSS personalizado grande a WordPress, es una buena práctica tenerlo en un archivo separado y cargarlo en los archivos de su sitio web en el servidor. Veamos cómo hacerlo paso a paso.

3.1) Cree el archivo CSS usando un editor de código

Para hacer esto, debe usar un editor de código como Visual Studio Code, Sublime text o cualquier otro que admita archivos CSS.

Cree un nuevo archivo con la extensión CSS y pegue su código allí. En este ejemplo, llamamos al archivo my-styles.css .
Cree el archivo CSS usando un editor de código

Después de pegar su código, guarde el archivo y continúe con el próximo paso.

3.2) Sube el archivo a la carpeta Child Theme

Si su tema hijo tiene un directorio CSS, simplemente copie y pegue su archivo allí. Alternativamente, también puede cargarlo directamente en el directorio principal de temas secundarios. No se preocupe por la ubicación en la carpeta del tema secundario, nos centraremos en la ruta del archivo en el siguiente paso.

Ahora use cPanel o un cliente FTP como FileZilla para cargar el archivo.

Si está en un servidor localhost, simplemente puede copiar y pegar el archivo en la carpeta del tema secundario ubicada en la carpeta pública de su servidor localhost.

Siguiendo nuestro ejemplo, pegaremos nuestro archivo my-styles.css en el tema secundario.

Cargue el archivo en la carpeta Child Theme.

3.3) Ponga en cola su archivo .CSS personalizado

Ahora debe poner en cola su archivo CSS personalizado en el archivo functions.php de su tema secundario para que funcione. Pegue el siguiente script PHP después de cualquier código presente en functions.php Archivo.

 función mis_estilos() {
wp_register_style( 'mis-estilos', get_stylesheet_directory_uri() . '/mis-estilos.css');
wp_enqueue_style('mis-estilos');
}
add_action('wp_enqueue_scripts', 'mis_estilos');

Asegúrese de que la ruta llame correctamente al archivo recién creado dependiendo de dónde se encuentre el archivo en el directorio del tema. Además, recuerde cambiar el nombre del archivo ( my-styles.css en este ejemplo).

Puede utilizar el siguiente fragmento de código para comprobar si la ruta es correcta o no.

 add_action('wp_head',función(){
echo get_stylesheet_directory_uri() . '/mis-estilos.css';
});

Ponga en cola su archivo CSS PERSONALIZADO

¡Eso es! Así es como puede aplicar CSS a WordPress cargando su propio archivo CSS.

4) Aplicar CSS a la sección de encabezado usando un gancho

Si tiene algunas habilidades de codificación, también puede agregar CSS a su sitio usando ganchos .

El gancho wp_head() es muy útil cuando se desarrollan sitios web. Aunque no se recomienda usarlo para incluir un script en la etiqueta HTML <head> , permite realizar pruebas rápidas y depuración.

Si está trabajando con varias hojas de estilo CSS o en sitios web complejos y algo no funciona como se esperaba, puede agregar su código CSS directamente en la sección <head> usando este gancho.

 add_Action('wp_head','my_head_css');
función my_head_css(){
echo "<estilo>
.marca del sitio{
    fondo: rojo;
    ancho: 200px;
    relleno: 11px;
    borde-radio: 23px; }
</estilo>
";}

Por ejemplo, con este script, estamos cambiando el tamaño del encabezado, el color de fondo, el borde y el relleno.

De esta manera, puede asegurarse de que el script CSS se aplique a la interfaz sobre cualquier otro archivo CSS, o se incluya en el sitio web de cualquier otra manera.

5) Agregue CSS al backend

Finalmente, hay una forma más de agregar estilo CSS a WordPress. Puede aplicar CSS personalizado al backend usando el gancho admin_head() de la siguiente manera:

 add_Action('admin_head', 'my_custom_fonts');
función mis_fuentes_personalizadas() {
echo '<estilo>
#adminmenu{
    fondo: #602e93;}
</estilo>';
}

En este ejemplo, estamos cambiando el color de fondo (#602e93).

Los métodos 4 y 5 pueden ser muy útiles y pueden ayudarlo a ahorrar tiempo al insertar un script CSS directamente en la sección HTML <head> . Sin embargo, no es una práctica recomendada y no debe usar este método para aplicar estilos de forma permanente.

Conclusión

Con todo, con un poco de CSS puedes personalizar la apariencia de tu sitio. Agregar CSS es fácil, pero hay varias formas de hacerlo, por lo que puede ser difícil saber qué método debe usar.

En este tutorial, le mostramos cinco métodos diferentes para agregar CSS a su sitio de WordPress:

  1. A través del personalizador de temas
  2. Edición de archivos de temas secundarios
  3. Cargando su propio archivo CSS
  4. Aplicar CSS al encabezado con ganchos
  5. Agregar CSS al backend

Cada método tiene sus pros y sus contras. Por ejemplo, agregar CSS desde el personalizador de temas es fácil y viene con una vista previa en tiempo real. Sin embargo, no es una práctica recomendada para una gran lista de reglas CSS. Alternativamente, puede editar los archivos de su tema hijo o subir su propio archivo CSS a su tema hijo.

Aunque no es una práctica recomendada, puedes usar ganchos para incluir un script en la etiqueta HTML <head> para hacer pruebas rápidas y depurar tu sitio.

¿Ha agregado CSS a su sitio web? ¿Qué método usaste? ¿Conoces algún otro método que debamos incluir? ¡Háganos saber en los comentarios a continuación!