Cómo crear un plugin de WordPress que permita añadir popups que se abren con botones

Hace un tiempo, en el curso de «Aprende a usar la clase WP_Query«, vimos un ejemplo práctico sobre cómo mostrar las lecciones de un curso online mediante el uso de una ventana modal, dentro de la cual cargábamos el contenido utilizando AJAX.

Recientemente me vi con la necesidad de querer mostrar contenido dentro de un popup (sinónimo de ventana modal) pero de una forma más simple y directa, es decir, cuando un usuario pulsara un botón.

Y sí, ya sé que existen plugins súper completos como Popup Maker, pero este ofrece muchas más cosas de las que yo necesitaba y quería algo más liviano.

Es por eso que tras realizar varias pruebas di con una posible solución. Esta consiste en:

• Crear un shortcode que permita mostrar un botón.
• El texto del botón lo indicará el usuario.
• El shortcode a su vez generará el popup.
• Que primero estará oculto y cuando el usuario haga clic en el botón, se abrirá.
• Además, el contenido del popup lo obtendremos de un custom post type.
• Y elegiremos qué post mostrar mediante un post_id.

Por lo que su uso será:

[popup post_id="999" text="Texto del botón"]

Y para lograr todo esto tendremos que trabajar con HTML, CSS, JS y PHP.

1- Creamos un shortcode estático

Empezamos creando el shortcode que hará la magia de forma estática. Por lo tanto, por el momento, el contenido lo meteremos a casco porro y ya nos calentaremos la cabeza más adelante para obtenerlo de forma dinámica .

Como siempre puedes meter el código en el functions.php de tu tema, en tu plugin de funciones o en uno propio.

<?php
/*
* Plugin Name: Popups SCV
* Plugin URI: https://silicodevalley.com/lab/popups
* Description: Crea popups en el contenido con un shortcode.
* Version: 1.0
* Author: David Perálvarez
* Author URI: https://silicodevalley.com
* License: GPL2
*/

add_shortcode( 'popup', 'scv_popup_shortcode' );

function scv_popup_shortcode() {
 	
  ob_start();
  ?>
  <section class="scv-popup">

	  <button class="popup-btn">Texto del botón</button>

	  <div class="popup-content">
	    Contenido del popup
	    <button class="close">&#x2715;</button>
	  </div>

  </section>
  <?php
  return ob_get_clean();
}

El anterior código define el shortcode popup que por el momento no recibe ningún parámetro y retorna un contenedor section que incluye:

• Un botón para abrir el popup.
• El contenido del popup (que a su vez dentro tiene el botón que permitirá cerrarlo).

2- Incluimos la hoja de estilos y el script

Ahora para poder dar estilos y funcionalidad a nuestro popup, crearemos la hoja de estilos popup-style.css y el script popup-script.js.

Y los incluiremos en nuestro plugin gracias al action hook wp_enqueue_scripts:

add_action( 'wp_enqueue_scripts', 'scv_popup_enqueue_scripts' );

function scv_popup_enqueue_scripts() {
  wp_enqueue_style( 'popup-style', plugin_dir_url( __FILE__ ) . 'assets/popup-style.css' );
  wp_enqueue_script( 'popup-script', plugin_dir_url( __FILE__ ) . 'assets/popup-script.js', array(), '1.0', true );
}

3- Definimos los estilos

Lo siguiente que haremos es dar estilos tanto al botón como al popup.

Primero nos encargaremos de eliminar los estilos que por defecto tiene el tag button y luego le asignaremos los nuestros.

.popup-btn {
	display: inline-block;
	border: none;
	padding: 1rem 2rem;
	margin: 0 0 30px;
	text-decoration: none;
	background-image: linear-gradient(224deg, #25c7b0 0%, #20c789 100%);
	color: white;
	font-family: sans-serif;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition: background 250ms ease-in-out;
        -webkit-appearance: none;
	-moz-appearance: none;
}

.popup-btn:hove,
.popup-btn:focus {
	background-image: linear-gradient(224deg, #20c789 0%, #25c7b0 100%);	
}

Y luego daremos estilos al contenido del popup, que se mostrará centrado en la pantalla y oculto por defecto, ya que será el JS quien se encargue de abrirlo:

.popup-content {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 600px;
	background-color: white;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	z-index: 100;
	padding: 25px;
}

Y por último, damos estilos al botón de cierre:

.popup-content .close {
	border: none;
	padding: 5px;
	text-decoration: none;
	background-color: black;
	color: white;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: absolute;
	top: 0;
	right: 0;
}

4- Abrimos y cerramos el popup

Ahora que ya hemos definido los estilos, lo siguiente que haremos es darle funcionalidad, es decir:

• Que al pulsar el botón .popup-btn se abra el popup.
• Que al pulsar el botón .popup-content .close que contiene la X, se cierre.

Esto lo logramos gracias a JavaScript:

document.addEventListener('click', function(event) {
  if (event.target.matches('.popup-btn')) {
    event.target.nextElementSibling.style.display = 'block';
  }
  else if (event.target.matches('.popup-content .close')) {
    event.target.parentNode.style.display = 'none';
  }
});

5- Dinamizamos el shortcode

Ahora que ya hemos logrado que el popup funcione correctamente, es momento de obtener el contenido desde un CPT que llamaremos scv-popup.

Así que primero de todo lo definiremos gracias a la función register_post_type:

add_action( 'init', 'scv_popup_create_post_type' );

function scv_popup_create_post_type() {
  register_post_type( 'scv-popup',
    array(
      'labels' => array(
        'name' => 'Popups',
        'singular_name' => 'Popup'
      ),
      'public' => true,
      'supports' => array( 'title', 'editor' ),
      'show_in_rest' => true
    )
  );
}

Una vez lo hayas definido, da de alta varias entradas.

Ahora debemos modificar el shortcode para que acepte el parámetro post_id, donde le indicaremos que entrada deseamos mostrar:

function scv_popup_shortcode( $atts ) {
 	
  $atts = shortcode_atts( array(
    'post_id' => '',
  ), $atts );

  $post_id = $atts['post_id'];
  
  if ( ! empty( $post_id ) ):
    $popup_post = get_post( $post_id );
    $content = $popup_post->post_content;
  else:
    $content = 'Contenido por defecto.';
  endif;
  
  ob_start();
  ?>
  <section class="scv-popup">

	  <button class="popup-btn">Texto del botón</button>

	  <div class="popup-content">
	    <?php echo $content; ?>
	    <button class="close">&#x2715;</button>
	  </div>

	</section>
  <?php
  return ob_get_clean();
}

Te animo a realizar varias pruebas y ver qué contenido se muestra bien y cuál no. Por ejemplo si dentro del popup intentas mostrar un vídeo con el bloque de Youtube, este no se mostrará, en cambio si el vídeo lo muestras pegando el iframe en el bloque de HTML, sí funciona.

Ya solo nos queda un último paso que es permitir al usuario modificar el texto del botón, para ello añadimos un nuevo parámetro text al shortcode, quedando:

function scv_popup_shortcode( $atts ) {
 	
  $atts = shortcode_atts( array(
    'post_id' => '',
    'text' => '',
  ), $atts );

  $post_id = $atts['post_id'];
  $text = $atts['text'];
  
  if ( ! empty( $post_id ) ):
    $popup_post = get_post( $post_id );
    $content = $popup_post->post_content;
  else:
    $content = 'Contenido por defecto.';
  endif;
  
  ob_start();
  ?>
  <section class="scv-popup">

	  <button class="popup-btn"><?php echo $text; ?></button>

	  <div class="popup-content">
	    <?php echo $content; ?>
	    <button class="close">&#x2715;</button>
	  </div>

	</section>
  <?php
  return ob_get_clean();
}

Y con esto habremos terminado nuestro plugin.

¡Espero que te haya gustado y que puedas aprovecharlo en tus futuros proyectos o los de tus clientes!

Descárgate el código completo aquí.