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:
// 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.
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.
//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()
wp_enqueue_style('Owlcarousel', get_template_directory_uri() . '/assets/owl-carousel/owl.carousel.css');