Cómo crear un popup en WordPress sin plugins
¿Quieres saber cómo hacer un pop up en WordPress sin plugin? En este artículo, te enseñaré a crear ventanas emergentes en WordPress sin necesidad de usar plugins costosos o pesados. Esta técnica te permitirá añadir pop ups personalizados a tus entradas y páginas, mejorando la interacción con tus visitantes sin sacrificar el rendimiento de tu sitio.
Este método para crear pop ups en WordPress es ideal para quienes buscan una solución sin depender de plugins de pop up para WordPress.
- Tiempo de implementación:15/20 min
- Nivel de dificultad: Medio
A continuación, veremos cómo implementar una ventana emergente en WordPress usando código PHP personalizado. Esta técnica es perfecta si quieres evitar usar un plugin de popup para WordPress.
Añadir el Checkbox y los Campos de Texto en el Editor de Entradas/Páginas
Vamos a añadir un metabox en el editor de entradas y páginas que contenga el checkbox y los campos para el texto y el enlace.
Añade el siguiente código en el archivo functions.php de tu tema:
/*Mostrar POPUP*/
function agregar_metabox() {
add_meta_box('popup_metabox', 'Configuración del Pop-up', 'mostrar_metabox', ['post', 'page'], 'side', 'default');
}
add_action('add_meta_boxes', 'agregar_metabox');
function mostrar_metabox($post) {
$activar_popup = get_post_meta($post->ID, '_activar_popup', true);
$texto_popup = get_post_meta($post->ID, '_texto_popup', true);
$enlace_popup = get_post_meta($post->ID, '_enlace_popup', true);
?>
<label for="activar_popup">Activar Pop-up:</label>
<input type="checkbox" name="activar_popup" id="activar_popup" <?php checked($activar_popup, 'on'); ?>><br>
<label for="texto_popup">Texto del Pop-up:</label>
<textarea name="texto_popup" id="texto_popup" rows="4" cols="50"><?php echo esc_textarea($texto_popup); ?></textarea><br> <!-- Cambiado a textarea -->
<label for="enlace_popup">Enlace del Botón:</label>
<input type="text" name="enlace_popup" id="enlace_popup" value="<?php echo esc_attr($enlace_popup); ?>">
<?php
}
function guardar_metabox($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
$allowed_html = array(
'br' => array(),
'a' => array(
'href' => array(),
'rel' => array(),
),
);
update_post_meta($post_id, '_activar_popup', $_POST['activar_popup']);
update_post_meta($post_id, '_texto_popup', wp_kses($_POST['texto_popup'], $allowed_html));
update_post_meta($post_id, '_enlace_popup', esc_url_raw($_POST['enlace_popup']));
}
add_action('save_post', 'guardar_metabox');Con este método, habrás logrado crear un pop up en WordPress sin plugin, lo que te da más control sobre la funcionalidad y el rendimiento de tu sitio.
Mostrar el Pop-up en la Página o Entrada
Ahora, vamos a añadir el código necesario para mostrar el pop-up en la página o entrada si el checkbox está marcado.
Añade el siguiente código en el archivo footer.php de tu tema:
<!-- PopUp -->
<?php
if (is_single() || is_page()) {
$activar_popup = get_post_meta(get_the_ID(), '_activar_popup', true);
$texto_popup = get_post_meta(get_the_ID(), '_texto_popup', true);
$enlace_popup = get_post_meta(get_the_ID(), '_enlace_popup', true);
$allowed_html = array(
'br' => array(),
'a' => array(
'href' => array(),
'rel' => array(),
),
);
if ($activar_popup == 'on') {
?>
<div id="popup" style="display:none;">
<div style="position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center;">
<div style="background:#fff; padding:20px; position:relative;">
<a href="#" id="cerrar_popup" style="position:absolute; top:10px; right:10px;">X</a>
<p><?php echo wp_kses($texto_popup, $allowed_html); ?></p> <!-- Aquí se utiliza wp_kses con $allowed_html -->
<a href="<?php echo esc_url($enlace_popup); ?>" style="background:blue; color:white; padding:10px; text-decoration:none; display:block; width:100px; margin:0 auto; text-align:center; border-radius:5px;">LLÉVAME</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
document.getElementById('popup').style.display = 'block';
}, 3000);
document.getElementById('cerrar_popup').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('popup').style.display = 'none';
});
});
</script>
<?php
}
}
?>Este código añadirá un pop-up en las páginas o entradas donde el checkbox esté marcado, y mostrará el texto y el enlace que hayas introducido en los campos correspondientes.
A partir de ahora dispondrás de esta caja en la barra lateral de configuración de la Entrada/Página, donde podrás activar el Pop Up, introducir el mensaje (puedes usar formarto HTML), e incluir el enlace al que dirigirá el botón.
El PopUp se abre a los tres segundos de entrar en la página, pero puedes cambiar este tiempo modificando el 3000 de este código, por la cantidad de milisegundos que desees:
setTimeout(function() {
document.getElementById('popup').style.display = 'block';
}, 3000);Ahora ya sabes cómo hacer un pop up en WordPress sin recurrir a plugins. Esta técnica de crear ventanas emergentes en WordPress te permite mantener tu sitio ligero y personalizado. Recuerda que puedes ajustar el diseño y comportamiento del pop up según tus necesidades específicas.
Nota de Seguridad
Este enfoque implica un riesgo de seguridad si los usuarios no confiables tienen la capacidad de editar entradas o páginas, ya que podrían insertar JavaScript malicioso u otro código dañino. Si solo los administradores y editores de confianza tienen acceso para editar entradas y páginas, este riesgo es mínimo.
