Guida Pratica: Creare Popup Personalizzati in WordPress Senza Plugin

Ogni tanto aggiorniamo il nostro sito ed oggi vogliamo aiutarvi a creare popup su wordpress senza usare plugin ma solo con codice html.

Se desideri aggiungere popup al tuo sito WordPress senza dover ricorrere a plugin aggiuntivi, puoi farlo facilmente utilizzando HTML, CSS e JavaScript. In questa guida, ti spiegheremo come creare un popup personalizzato utilizzando il codice fornito di seguito. Il codice è diviso in tre parti: HTML, CSS e JavaScript, e ogni parte è commentata per una comprensione chiara.

Amazon Music Ascolta la tua musica ovunque

Passo 1: Creare il Codice HTML del Popup

<!-- Inizia la sezione HTML del popup -->
<div id="myPopup" class="popup">
    <div class="popup-content">
        <span class="popup-close" onclick="closePopup()">&times;</span> <!-- Icona per chiudere il popup -->
        <h2>Titolo Popup!</h2> <!-- Titolo del popup -->
        <p>Descrizione del popup</p> <!-- Testo del popup -->
    </div>
</div>
<!-- Termina la sezione HTML del popup -->

Passo 2: Definire lo Stile del Popup con CSS

/* Inizia la sezione CSS per lo stile del popup */
.popup {
    display: none; /* Il popup è nascosto di default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo semitrasparente */
    z-index: 9999; /* Per assicurarsi che il popup sia in primo piano */
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Posiziona al centro della schermata */
    background-color: #fff; /* Sfondo del popup */
    padding: 20px;
    border-radius: 5px; /* Bordo arrotondato */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ombra per effetto tridimensionale */
    max-width: 90%; /* Larghezza massima del popup */
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px; /* Dimensione dell'icona di chiusura */
    cursor: pointer;
}
/* Termina la sezione CSS per lo stile del popup */

Passo 3: Gestire l’Apertura e la Chiusura del Popup con JavaScript

/* Inizia la sezione JavaScript per la gestione del popup */
function openPopup() {
    const popup = document.getElementById("myPopup");
    if (popup.style.display !== "block") {
        popup.style.display = "block"; /* Mostra il popup */
    }
}

function closePopup() {
    document.getElementById("myPopup").style.display = "none"; /* Nasconde il popup */
}

// Mostra il popup solo una volta per sessione
const sessionKey = 'popupDisplayed';

if (!sessionStorage.getItem(sessionKey)) {
    openPopup();
    sessionStorage.setItem(sessionKey, 'true');
}

// Chiudi il popup quando si fa lo scroll
window.onscroll = function() {
    closePopup();
}
/* Termina la sezione JavaScript per la gestione del popup */

Conclusione

Ora hai tutti gli elementi necessari per creare un popup personalizzato in WordPress senza l’uso di plugin aggiuntivi. Personalizza il codice per soddisfare le tue esigenze specifiche e migliorare l’esperienza dei visitatori sul tuo sito. Con questo metodo, hai il controllo completo sullo stile e il comportamento del tuo popup, consentendoti di creare messaggi accattivanti e informativi. Inoltre, il popup si chiuderà automaticamente quando i visitatori faranno lo scroll, garantendo un’esperienza utente ottimale.

Alla Prox 🙂