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

  • 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

Publicado por carloscordova

Creador y administrador del blog

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *