Vamos a ver como incluir tus propios javascript y css en WordPress de manera sencilla.
Tenemos varias formas de trabajar con un tema sobre todo cuando es un tema que no hemos creado nosotros y lo mejor es, no modificarlo y trabajar con un tema hijo. Cuando el autor del tema lo actualice todas aquellas modificaciones se borraran al actualizarlo nosotros y las perderemos.
Por eso se suele o crear un tema hijo o crear un plugin sencillo para añadir estas modificaciones.
Veamos el siguiente codigo:
1 2 3 4 5 | // Register Style function custom_styles() { } add_action( 'wp_enqueue_scripts', 'custom_styles' ); |
Nos creamos una funcion en este caso custom_styles. Mediante la funcion add_action podemos hacer un hook o gancho a la funcion wp_enqueue_scripts y modificar la informacion.
Para poder añadir o quitar styles utilizamos las funciones:
- funcion wp_register_style nos permite añadir una hoja de estilos
- funcion wp_deregister_style nos permite quitarla.
- funcion wp_enqueue_style nos permite registrar un estilo
Aqui os dejo un ejemplo de como añadir boostrap un framework css.
1 2 3 4 5 6 7 8 9 10 | function custom_styles() { wp_deregister_style( 'bootstrap' ); wp_register_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, '3.3.6' ); wp_enqueue_style( 'bootstrap' ); } add_action( 'wp_enqueue_scripts', 'custom_styles' ); |
Ahora que hemos visto como añadir hojas de estilo a nuestro Tema de WordPress vamos a ver como añadir un javascript, el proceso es el mismo, registramos el script y lo encolamos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //Registramos javascripts function custom_scripts() { // Registramos JQUERY wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://code.jquery.com/jquery-2.1.1.min.js', false, '2.1.1', false ); wp_enqueue_script( 'jquery' ); //REGISTRAMOS BOOTSTRAP wp_deregister_script( 'bootstrap' ); wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array( 'jquery' ), '3.3.6', false ); wp_enqueue_script( 'bootstrap' ); } add_action( 'wp_enqueue_scripts', 'custom_scripts' ); |
En este caso usamos las funciones:
El proceso de ambos casos es muy similar. Si quisieramos subir un css que tenemos en una carpeta dentro del tema.
Podemos usar get_template_directory_uri()
1 | wp_enqueue_style('Owlcarousel', get_template_directory_uri() . '/assets/owl-carousel/owl.carousel.css'); |