Como añadir estilos css en wordpress


Es una práctica común que al empezar a desarrollar sitios web o practicar en HTML se añadan los estilos dentro de la etiqueta <head></head>, como se muestra en el siguiente código:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Hola mundo</title>
        <link rel="stylesheet" type="text/css" href="estilos.css">
        <script type="text/javascript" src="holamudo.js"></script>
    </head>
    <body>

    </body>
</html>

Posteriormente, cuando se inicia a programar en WordPress es frecuente que añadamos el código CSS (como las etiquetas <link> o <script />) en el archivo header.php o footer.php. Sin embargo, este es un mal hábito que arrastramos con nosotros. Lo correcto es añadirlo en el archivo functions.php usando las funciones wp_enqueue_style o wp_enqueue_script que provee el core del mismo WordPress.

Empecemos por añadir el archivo de estilos en nuestro primer tema de WordPress, para ello es necesario editar el archivo functions.php añadiendo lo siguiente:

<?php

    function add_head_styles_and_scripts(){
        //funcion para añadir los estilos y scripts de nuestro tema de wordpress
        $version = '0.0.1'.(date('Y-m-d H:i:s'));
        
        wp_enqueue_style('style', get_stylesheet_uri(),array(),$version);
    }
    
    add_action( 'wp_enqueue_scripts', 'add_head_styles_and_scripts' );
?>
Como se puede observar, se ha creado una función llamada add_head_styles_and_scripts, que por sí sola no tiene ninguna utilidad. Para cambiar esto se debe ejecutar la función add_action con el tag wp_enqueue_scripts como primer parámetro. Esto quiere decir que en tiempo de ejecución el core de WordPress lanzará la función add_head_styles_and_scripts, y esta a su vez desencadenará la función llamada wp_enqueue_style.

Para llevar el control de versiones añadimos una variable llamada $version. Quiere decir que, en caso de generar un nuevo cambio solo debemos cambiar el número de versión. Esto ayuda a que no se tome la versión de caché almacenada en el navegador, así se podrán visualizar los cambios de manera inmediata.

Nota: cuando mandes a producción recuerda quitar esta línea de código (date(‘Y-m-d H:i:s’)) ya que la función en un entorno de desarrollo local consiste en mostrar los archivos más recientes, omitiendo la versión en caché del navegador.

Según la documentación del códex de WordPress, la función exacta de wp_enqueue_style recibe los siguientes parámetros:

<?php
    wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )
?>

$handle: nombre para identificar el archivo. Este debe ser único, ya que si existe otro con el mismo nombre se tomará el primero que se ejecutó.

$src: URL del archivo. Se puede usar estas tres opciones:

    1. get_stylesheet_uri(), que retoma la URL web donde se ubica el archivo style.css
    2. get_template_directory_uri(), que retoma la URL web de la carpeta de WordPress. Para esto se debe concatenar el nombre del archivo, más adelante se mostrará como hacerlo.
    3. Puedes añadir la url absoluta donde se encuentra el archivo por ejemplo: http://example.com/css/estilos.css

$deps: indica si el archivo depende de otro grupo de archivos. Su uso es muy raro para un estilo de CSS, siendo más común en JavaScript.

$ver: muestra la versión. Puede ser un string o un valor false para no indicar el número de versión.

Cuando WordPress ejecuta esta función retorna un código HTML como el siguiente:

<link rel="stylesheet" href="https://herelodin.com/wp-content/themes/blog/styles.css" media="all">

 

¿Cómo añadir bootestrap a mi tema de WordPress?

Ahora que hemos aprendido como añadir el archivo style.css desde el archivo de WordPress, el siguiente paso es descargar bootstrap 4. A continuación debemos descomprimirlo y pegarlo dentro de nuestro tema. Debe quedar como en la siguiente imagen:

Estructura de wordpress

Como observamos, WordPress viene con varios archivos minificados. Estos ayudan a que el sitio cargue más rápido, puesto que el código es de menor tamaño y sin comprimir. Por el momento, vamos a añadir el archivo boostrap.css a nuestro archivo functions.php

<?php

    function add_head_styles_and_scripts(){
        //funcion para añadir los estilos y scripts de nuestro tema de wordpress
        $version = '0.0.1'.(date('Y-m-d H:i:s'));


        wp_enqueue_style('style', get_stylesheet_uri(),array(),$version);
        wp_enqueue_style('boostrap4.0.0', get_template_directory_uri() . '/css/boostrap.css',array(),$version);
    }

    add_action( 'wp_enqueue_scripts', 'add_head_styles_and_scripts' );
?>

A continuación, debes ir a la ruta en tu navegador localhost/blog. Si inspeccionas la página para ver el código HTML, podrás notar que aún no se imprimen las etiquetas link dentro del head.

Para que WordPress añada las dos etiquetas que configuramos previamente en el archivo functions, debemos colocar la función wp_head() en el archivo header.php

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title></title>
        <?php wp_head(); ?>
    </head>
    <body>

Si examinamos el sitio web, nos daremos cuenta de que WordPress ha generado algunas etiquetas y notaremos los dos estilos que programamos anteriormente

También te puede interesar: cómo añadir código javascript en wordpress Si deseas puedes hacer un donativo de 1 dolar para seguir manteniendo y subir más contenido en este sitio.