NoticiasBlog.

Creación de un modal mediante Shortcodes en WordPress

26 febrero, 2018 | Desarrollo

Para este ejemplo vamos a crear shortcode que nos dibuje un botón que lance un modal, además vamos a integrar un   formulario de contacto dentro de este usando el plugin Contact Form 7 para la maquetación de formulario como framework

javascript/css usaremos Bootstrap para este ejemplo ya que nuestro tema base ya tiene cargado este framework,.

Podemos encararlo de varias formas pero vamos a realizarlo con un único shortcode  de la siguiente forma:

[shmodal id="id-xxxxx" btn-titulo="XXXXXXXX" btn-class="class1 class2"  modal-titulo="YYYYYYY"]

//CONTENIDO DE MODAL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

//CONTACTO FORM SHORTCODE

[contact-form-7 404 "Not Found"]

[/shmodal]

Primero creamos una carpeta donde alojar nuestro fichero .PHP dentro de nuestro  tema, en nuestro caso ya existe una carpeta “inc” en la que existen ficheros que se solicitan durante la ejecución del function.php de nuestro tema.

Dentro de esta carpeta  creamos el fichero modals-sh.php y al final del function.php agregaremos una línea para agregar nuestro fichero a la carga del tema :

//SH  Modales

require get_template_directory() . '/inc/modals-sh.php';

Dentro de este fichero agregaremos todo nuestro código.

<?php

//[shmodal id="modal1" btn-titulo="Pulsame" btn-class="btn btn-success" modal-titulo="Prueba modal"]

function shmodal_func( $atts , $content = null) {

//Recojemos los atributos en el Array $a

$a = shortcode_atts(

array(

'id' => 'something',    //id único del modal en la pagina

'btn-titulo' => 'something else',     //Texto del boton

'btn-class' => 'something else',    //Class del boton

'modal-titulo' => 'something else',    //Class del boton

), $atts );

//realizamos la acción de agregar el cuerpo de nuestro modal al footer

add_action( 'wp_footer', function() use ($a, $content) {

$modalBodyContent = $content;

//si el contenido del modal tiene el shortcode de contact form cambiamos el diseño de modal a uno grip de 2 columnas izquierda texto derecha formulario

if ( has_shortcode( $content, 'contact-form-7' ) ) {

//recojemos el shortcode del cotnact form 7

preg_match('/\[contact-form-7 404 "Not Found"]/s', $content , $shContactForm7);

//Lo eliminamos del contenido

$contentTrue = preg_replace ('/\[contact-form-7 404 "Not Found"]/s' , '', $content);

$modalBodyContent ='<div class=row>

<div class="col-md-6">'. $contentTrue .'</div>

<div class="col-md-6">'.do_shortcode($shContactForm7[0]).'</div>

</div>';

}

$html = '<div id="'. $a['id'] .'" class="modal fade" role="dialog">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>

<h4 class="modal-title">'.$a['modal-titulo'].'</h4>

</div>

<div class="modal-body">'. $modalBodyContent.' </div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>';

echo $html;

} );

//devolvemos el botón que lanzara el modal

echo '<a href="javascript:void(0)" data-toggle="modal" data-target="#'.$a['id']. ' "  class=" '.$a['btn-class'] . ' " >' . $a['btn-titulo']. '</a>';

}

//registramos nuestro shortcode

add_shortcode('shmodal', 'shmodal_func' );

?>

Deja tu comentario

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