hace unos días, me solicitaron realizar un login para un blog wordpress, asi que decidi realizar un plugin.
el modal bootstrap implementado se encuentra activo en la siguiente url http://agkblog.aguakan.com/
aqui les mostrare un plugin similar. ademas subire el código a github para que lo descarguen y lo modifiquen a su gusto.
bueno, vamos a ello.
- Creamos un archivo php con el nombre que gusten. en mi caso se llamará “ventanamodal.php”
- Agregamos las siguientes lineas de codigo y listo. ya tenemos un plugin para wordpress.
<?php
/**Plugin Name: Ventana Modal
Plugin URI: www.carloscordova.com
Description: un simple modal
Version: 1.0
Author: Carlos Cordova
Author URI: https://github.com/CarlosCordova1
*/
- Ahora agregaremos el modal bootstrap. por lo cual se requiere crear una funcion php, el nombre de la función agregarlo a la funcion de wordpress “add_action”, el primer parametro que recibe es la función wordpress de donde se posicionará el modal a la hora de cargarse la página, en este caso se posicionará hasta el final de la página, en el footer, el segundo parámetro es el nombre de la función que previamente creamos. quedando de la siguiente manera.
add_action(‘wp_footer’, ‘modal’);
function modal()
{//aqui va el codigo html del modal bootstrap
}
- Ahora dentro de la función modal, colocamos el CDN de bootstrap y jquery para que el modal bootstrap se muestre correctamente
aqui pudes copiar los CDN https://getbootstrap.com/docs/4.5/getting-started/download/#bootstrapcdn
- Agregamos debajo del CDN el código bootstrap. el modal se puede copiar de aquí. https://getbootstrap.com/docs/4.5/components/modal/
- por último, agregamos el siguiente script javascript (JQuery) para que cuando cargue la página, se muestre el modal.
<script type=»text/javascript»>
jQuery(document).ready(function(e) {
$(‘#exampleModal’).modal(‘show’);
});
</script>
Con esto ya podemos guardar y empaquetar en un formato zip nuestro archivo php y subirlo a nuestro blog wordpress
se verá de la siguiente manera, lo cargue en mi blog de pruebas
aqui puedes descargar el código completo
https://github.com/CarlosCordova1/ModalBootstrapPluginWordpress