Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
Senza categoria

WPCode e JavaScript: Aggiungere Script Custom al Tuo Sito

· 9 min di lettura

JavaScript e WordPress: Un Binomio Essenziale

JavaScript è il linguaggio che dà vita alle pagine web. Mentre HTML definisce la struttura e CSS l’aspetto, JavaScript aggiunge interattività: animazioni, validazioni dei form, caricamento dinamico dei contenuti, popup, slider, e molto altro. Nel contesto di WordPress, JavaScript è fondamentale per widget di terze parti, script di tracciamento, personalizzazioni dell’interfaccia utente e integrazioni con servizi esterni.

WPCode semplifica enormemente l’aggiunta di JavaScript al tuo sito WordPress, eliminando la necessità di modificare i file del tema o di creare un tema child solo per inserire qualche riga di script. In questo articolo vedremo come utilizzare WPCode per aggiungere script JavaScript personalizzati, con esempi pratici e best practice per evitare conflitti e problemi di prestazioni.

Differenze tra JavaScript nell’Header e nel Footer

La posizione in cui inserisci il tuo script JavaScript ha un impatto diretto sulle prestazioni e sul comportamento del sito:

JavaScript nell’Header

Gli script inseriti nell’header (<head>) vengono caricati ed eseguiti prima del rendering della pagina. Questo significa che:

JavaScript nel Footer

Gli script nel footer vengono caricati dopo tutto il contenuto HTML. Questo è preferibile nella maggior parte dei casi perché:

Regola generale: inserisci gli script nel footer a meno che non ci sia un motivo specifico per metterli nell’header.

Inserimento di script JavaScript nella sezione Header e Footer di WPCode

Creare uno Snippet JavaScript con WPCode

Il processo per creare uno snippet JavaScript è semplice:

  1. Vai su Code Snippets → Add Snippet → Add Your Custom Code
  2. Assegna un titolo descrittivo
  3. Seleziona JavaScript Snippet come tipo di codice
  4. Scrivi il tuo codice JavaScript nell’editor — non includere i tag <script>, WPCode li aggiunge automaticamente
  5. Nella sezione Insertion, scegli la posizione (Site Wide Header o Site Wide Footer)
  6. Attiva e salva

Nota importante: se scegli il tipo “JavaScript Snippet”, WPCode aggiunge automaticamente i tag <script>. Se invece hai bisogno di inserire un tag script con attributi specifici (come async, defer o un src esterno), usa il tipo “HTML Snippet” e includi il tag <script> completo.

Esempio 1: Scroll to Top Button

Uno degli script più richiesti è il pulsante “torna su” che appare quando l’utente scorre la pagina verso il basso. Questo richiede due snippet: uno CSS e uno JavaScript.

Snippet CSS (tipo: CSS Snippet):

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #0073aa;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: none;
    z-index: 9999;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.scroll-to-top:hover {
    background-color: #005a87;
    transform: scale(1.1);
}

.scroll-to-top.visible {
    display: block;
}

Snippet JavaScript (tipo: HTML Snippet, posizione: Footer):

<button class="scroll-to-top" id="scrollToTop" aria-label="Torna su">&uarr;</button>
<script>
(function() {
    var btn = document.getElementById(scrollToTop);

    window.addEventListener(scroll, function() {
        if (window.pageYOffset > 300) {
            btn.classList.add(visible);
        } else {
            btn.classList.remove(visible);
        }
    });

    btn.addEventListener(click, function() {
        window.scrollTo({ top: 0, behavior: smooth });
    });
})();
</script>

Esempio 2: Conto alla Rovescia per Promozioni

Un timer countdown che mostra il tempo rimanente per una promozione. Perfetto da combinare con la logica condizionale di WPCode per mostrarlo solo su pagine specifiche:

document.addEventListener(DOMContentLoaded, function() {
    var countdown = document.getElementById(wpcode-countdown);
    if (!countdown) return;

    var endDate = new Date(2026-06-30T23:59:59).getTime();

    function updateCountdown() {
        var now = new Date().getTime();
        var distance = endDate - now;

        if (distance < 0) {
            countdown.innerHTML = <p>La promozione è terminata!</p>;
            return;
        }

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdown.innerHTML = days + g  + hours + h  + minutes + m  + seconds + s;
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
});

Per usare questo script, crea anche uno snippet HTML che inserisce il contenitore <div id="wpcode-countdown"></div> nella posizione desiderata.

Gestione degli snippet JavaScript in WPCode

Esempio 3: Table of Contents Automatico

Uno script che genera automaticamente un indice dei contenuti basato sui titoli H2 e H3 presenti nell’articolo:

document.addEventListener(DOMContentLoaded, function() {
    var content = document.querySelector(.entry-content);
    if (!content) return;

    var headings = content.querySelectorAll(h2, h3);
    if (headings.length < 3) return;

    var toc = document.createElement(div);
    toc.className = wpcode-toc;
    toc.innerHTML = <h4>Indice dei Contenuti</h4>;

    var list = document.createElement(ul);

    headings.forEach(function(heading, index) {
        var id = toc- + index;
        heading.id = id;

        var li = document.createElement(li);
        li.className = heading.tagName === H3 ? toc-sub : ;

        var a = document.createElement(a);
        a.href = # + id;
        a.textContent = heading.textContent;
        a.addEventListener(click, function(e) {
            e.preventDefault();
            heading.scrollIntoView({ behavior: smooth });
        });

        li.appendChild(a);
        list.appendChild(li);
    });

    toc.appendChild(list);
    content.insertBefore(toc, content.firstChild);
});

Questo script è particolarmente utile per articoli lunghi. Usa la logica condizionale di WPCode per caricarlo solo sui post del blog.

Esempio 4: Sticky Header

Un header che rimane fisso in cima alla pagina quando l’utente scorre verso il basso:

document.addEventListener(DOMContentLoaded, function() {
    var header = document.querySelector(.site-header);
    if (!header) return;

    var headerHeight = header.offsetHeight;
    var lastScroll = 0;

    window.addEventListener(scroll, function() {
        var currentScroll = window.pageYOffset;

        if (currentScroll > headerHeight) {
            header.classList.add(header-sticky);

            if (currentScroll > lastScroll) {
                header.classList.add(header-hidden);
            } else {
                header.classList.remove(header-hidden);
            }
        } else {
            header.classList.remove(header-sticky);
            header.classList.remove(header-hidden);
        }

        lastScroll = currentScroll;
    });
});

Combina questo con uno snippet CSS per gli stili dell’header sticky (posizione fissa, ombra, transizioni).

Esempio 5: Validazione Form Personalizzata

Se il tuo tema o plugin di form non offre una validazione sufficientemente chiara, puoi aggiungerne una personalizzata:

document.addEventListener(DOMContentLoaded, function() {
    var forms = document.querySelectorAll(.wpcf7-form, .wpforms-form);

    forms.forEach(function(form) {
        form.addEventListener(submit, function(e) {
            var email = form.querySelector(input[type="email"]);
            var tel = form.querySelector(input[type="tel"]);
            var valid = true;

            if (email && email.value) {
                var emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
                if (!emailRegex.test(email.value)) {
                    email.style.borderColor = #e94560;
                    valid = false;
                } else {
                    email.style.borderColor = ;
                }
            }

            if (tel && tel.value) {
                var telClean = tel.value.replace(/[s-+()]/g, );
                if (telClean.length < 9 || telClean.length > 15) {
                    tel.style.borderColor = #e94560;
                    valid = false;
                } else {
                    tel.style.borderColor = ;
                }
            }

            if (!valid) {
                e.preventDefault();
            }
        });
    });
});

Lavorare con jQuery in WordPress

WordPress include jQuery, ma lo carica in modalità “noConflict”. Questo significa che il simbolo $ non è disponibile per impostazione predefinita. Se il tuo script usa jQuery, devi racchiuderlo in una funzione wrapper:

(function($) {
    $(document).ready(function() {
        // Il tuo codice jQuery qui
        $(.my-element).fadeIn();
    });
})(jQuery);

Tuttavia, per script moderni è consigliabile usare JavaScript nativo (vanilla JS) invece di jQuery. Il JavaScript moderno offre API equivalenti (document.querySelector, addEventListener, fetch) che non richiedono librerie aggiuntive e sono più performanti.

Configurazione avanzata degli script JavaScript in WPCode

Evitare Conflitti JavaScript

Uno dei problemi più comuni con gli script personalizzati è il conflitto con altri script già presenti nel sito. Ecco come prevenirli:

1. Usa IIFE (Immediately Invoked Function Expression)

Racchiudi sempre il tuo codice in una IIFE per evitare che le variabili inquinino lo scope globale:

(function() {
    // Il tuo codice qui
    var myVariable = valore; // Non accessibile fuori dalla funzione
})();

2. Controlla l’Esistenza degli Elementi

Prima di manipolare un elemento DOM, verifica sempre che esista:

var element = document.getElementById(my-element);
if (element) {
    // Manipola l’elemento solo se esiste
}

3. Usa DOMContentLoaded

Per script che interagiscono con il DOM, attendi sempre che il documento sia completamente caricato:

document.addEventListener(DOMContentLoaded, function() {
    // Il DOM è pronto
});

4. Gestisci gli Errori

Usa try-catch per gestire errori potenziali senza bloccare altri script:

try {
    // Codice che potrebbe generare un errore
} catch (error) {
    console.error(WPCode snippet error:, error);
}

Debug degli Script JavaScript

Quando uno script non funziona come previsto, ecco come fare debug:

Prestazioni e Best Practice

Conclusioni

WPCode rende l’aggiunta di script JavaScript personalizzati a WordPress semplice e sicura. Che tu debba aggiungere un pulsante “torna su”, un conto alla rovescia per una promozione, un indice dei contenuti automatico o qualsiasi altra funzionalità interattiva, WPCode ti offre gli strumenti per farlo senza modificare i file del tema.

Ricorda sempre di testare i tuoi script, gestire gli errori e seguire le best practice per le prestazioni. Un sito veloce e privo di errori JavaScript offre un’esperienza utente migliore e può influire positivamente anche sul posizionamento nei motori di ricerca.

📚 Leggi anche gli altri articoli della serie WPCode

Hai bisogno di sviluppare funzionalità JavaScript personalizzate per il tuo sito WordPress? Contatta il team di G Tech Group. I nostri sviluppatori possono creare script su misura per qualsiasi esigenza, dall’interattività avanzata alle integrazioni con API esterne e servizi di terze parti.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#Custom #Frontend #JavaScript #Script #Wordpress #WPCode