• Saltar a la navegación principal
  • Saltar al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Gratis
  • Acceder
  • Suscríbete ahora

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.

Para ver este vídeo del tutorial, primero debes suscribirte.

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

Para ver este vídeo del tutorial, primero debes suscribirte.

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

Para ver este vídeo del tutorial, primero debes suscribirte.

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.

Para ver este vídeo del tutorial, primero debes suscribirte.

.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:

Para ver este vídeo del tutorial, primero debes suscribirte.

.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:

Para ver este vídeo del tutorial, primero debes suscribirte.

.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

Para ver este vídeo del tutorial, primero debes suscribirte.

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

Para ver este vídeo del tutorial, primero debes suscribirte.

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.

Para ver este vídeo del tutorial, primero debes suscribirte.

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í.

Únete al boletín: Diario de un desarrollador web freelance

Importante: envío correos con frecuencia y en cada uno además de contarte historias, consejos y marrones de mi día a día, ofrezco mis productos y servicios. Si esto te supone un problema, no te suscribas. Y si te cansas, podrás darte de baja y tan amigos.

Responsable: David Perálvarez Fernández. Finalidad: Gestionar el envío de información y prospección comercial y dar acceso a los productos online. Legitimación: Consentimiento del interesado. Destinatarios: Empresas proveedoras nacionales y encargados de tratamiento acogidos a privacy shield. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional.

¡Ya casi estamos! Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Para dejar dudas en este tutorial, primero debes suscribirte.

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Mostrar detalles
Nombre Proveedor Propósito Duración
_ga Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 2 años
_gat Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para limitar el porcentaje de solicitudes. 1 minuto
_gid Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 24 horas
Política de cookies

Más información sobre nuestra política de cookies