Author : Jhon
Publicado : 9 marzo, 2020
Para Utilizar los popovers de bootstrap 4 en wordpress, primero debemos de descargar los archivos que nos proporciona bootstrap los css y js.
una vez descargados deberemos de encolar los archivos en nuestro wordpress, ademas de añadir la libreria de jquery, crearemos una funcion en nuestro archivo functions.php y dentro crearemos los enlaces para encolar los archivos
function atr_enqueue_scripts() {
/**
* Cargando la libreria de jquery 1.4 de wordpress
*/
//wp_enqueue_script('jquery');
//Quitando li libreria 1.4
wp_deregister_script('jquery');
/**
* Cargando la libreria jquery 3.4.1 en el head
* Cuando ponemos false, la cargamos en el head
*/
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', false, '3.4.1');
wp_enqueue_script('jquery');
/**
* Bootstrap popovers js
* https://getbootstrap.com/docs/4.0/getting-started/introduction/
*/
wp_enqueue_script( 'bootstrap-popovers', get_template_directory_uri() . 'helpers/bootstrap-4.2.1/js/popper.min.js', array('jquery'), '4.2.1', true );
/**
* atr-public.js Archivo principal para escribir nuestro código javascript
* lo cargamos en le footer, para eso utilizamos la variable true
*/
wp_enqueue_script( 'atr-script', get_template_directory_uri() . '/js/atr-public.js', array( 'bootstrap-popovers' ), $this->version, true );
/**
* Bootstrap js
* https://getbootstrap.com/docs/4.0/getting-started/introduction/
*/
wp_enqueue_script( 'bootstrap-bundle', get_template_directory_uri() . 'helpers/bootstrap-4.2.1/js/bootstrap.bundle.min.js', array('bootstrap-popovers'), '4.2.1', true );
wp_enqueue_script( 'bootstrap-min', get_template_directory_uri() . 'helpers/bootstrap-4.2.1/js/bootstrap.min.js', array('bootstrap-popovers'), '4.2.1', true );
}
add_action( 'wp_enqueue_scripts', 'atr_enqueue_scripts' );
debemos de tener en cuenta que el orden de los archivos debe ser el siguiente:
Podemos observar que tenemos todos los archivos de bootstrap en un archivo helpers y en otro que llamamos bootstrap-4.2.1, esto es por que helpers es el directorio que utilizo para las librerias.
Una vez esten los archivos encolados en nuestro wordpress comprobamos que el orden de los archivos este bien, para ello revisaremos el codigo fuente:
Podemos ver que el orden es correcto, ahora trabajaremos el codigo html, en mi caso creare un boton popover, para ello ire a la documentacion de bootstrap 4.2.1 y copiare el codigo de un boton, lo modifiacre un poco y le añadire un id para identificar el objeto:
<button type="button" id="pcontacto" class="btn btn-outline-success d-none d-sm-block" data-container="body" data-toggle="popover1" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button>
Ahora solo debo ir a mi archivo atr-public.js, que es mi archivo para escribir el codigo javascript, aqui debo de apuntar al id del boton y activar el metodo popover, para ello escribire lo siguiente:
$(document).ready(function(){
//POPOVER BOOTSTRAP 4.2
$('#pcontacto').on('click', function(){
$(this).popover({
container: 'body'
})
})
})
De este modo activaremos la ventana emergente popover al hacer click en nuestro boton.
Deja una respuesta