Cómo NO añadir un CSS en WordPress
Es uno de los errores más comunes que veo en desarrolladores web que no tienen experiencia en WordPress, y es editar el header.php de un tema para añadir una etiqueta link con su archivo CSS. Esto está terminantemente prohibido en WordPress.
Las colas en WordPress
WordPress es muy inteligente, pero hay que conocerlo. Cuando nuestra web se tiene que mostrar en pantalla, WordPress tiene que enlazar todos los archivos CSS que va a usar, tanto del tema como la todos los plugins activados que lo necesiten.
WordPress crea la estructura de nuestro sitio y añade lo que va necesitando en un determinado momento. Cuando va a añadir el CSS, WordPress mira todos los CSS registrados que necesita mostrar, tanto del tema activo como de los plugins que lo necesiten y ejecuta la acción wp_enqueue_scripts.
Esto se llama «action» y es lo que nos permite añadir ciertas cosas a nuestras plataformas de WordPress en el momento de ejecución en el cual lo necesitemos.
Registrando nuestro archivo CSS
Como hemos visto primero tenemos que registrar y poner en la cola a nuestro archivo CSS, para eso usaremos la función:
wp_enqueue_style( $name, $src, $deps, $ver, $media );
Donde las variables son:
- $name: nombre del CSS que queremos usar. Obligatorio.
- $src: ruta del archivo CSS que vamos a aplicar. Obligatorio.
- $deps: es un array opcional, y sirve para identificar si nuestro CSS depende de otro.
- $ver: un string opcional para indicar la versión de nuestro archivo.
- $media: valor opcional. Con esta variable podemos indicar si es un CSS para la versión de impresión.
Por ejemplo:
wp_enqueue_style( 'new_header', get_template_directory_uri() . '/css/new-header.css', '1.0' );
Con este código tenemos nuestro nuevo CSS registrado, pero tenemos que avisar a WordPress de que lo añada a nuestra web en el momento apropiado, es decir, cuando realiza la acción «wp_enqueue_scripts«.
Esto lo hacemos creando una función que será llamada cuando WordPress realice la acción de «wp_enqueue_scripts«, y se hace así de fácil:
function adding_my_new_header() {
wp_enqueue_style( 'new_header', get_template_directory_uri() . '/css/new-header.css', '1.0' );
}
add_action( 'wp_enqueue_scripts', 'adding_my_new_header' );
Con esta función que he llamado «adding_my_new_header» le estamos diciendo a WordPress: «oye, cuando hagas la acción de añadir los scripts, llama a esta función que acabo de crear para añadir este CSS que he registrado y lo pones en cola«.
Esta función tendremos que crearla en nuestro plugin o en el archivo functions.php de nuestro tema de WordPress.