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.<\/p>\n
Differenze tra JavaScript nell’Header e nel Footer<\/h2>\n
La posizione in cui inserisci il tuo script JavaScript ha un impatto diretto sulle prestazioni e sul comportamento del sito:<\/p>\n
JavaScript nell’Header<\/h3>\n
Gli script inseriti nell’header ( Gli script nel footer vengono caricati dopo<\/strong> tutto il contenuto HTML. Questo è preferibile nella maggior parte dei casi perché:<\/p>\n Regola generale:<\/strong> inserisci gli script nel footer a meno che non ci sia un motivo specifico per metterli nell’header.<\/p>\n Il processo per creare uno snippet JavaScript è semplice:<\/p>\n Nota importante:<\/strong> se scegli il tipo “JavaScript Snippet”, WPCode aggiunge automaticamente i tag 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.<\/p>\n Snippet CSS<\/strong> (tipo: CSS Snippet):<\/p>\n Snippet JavaScript<\/strong> (tipo: HTML Snippet, posizione: Footer):<\/p>\n 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:<\/p>\n Per usare questo script, crea anche uno snippet HTML che inserisce il contenitore Uno script che genera automaticamente un indice dei contenuti basato sui titoli H2 e H3 presenti nell’articolo:<\/p>\n Questo script è particolarmente utile per articoli lunghi. Usa la logica condizionale di WPCode per caricarlo solo sui post del blog.<\/p>\n Un header che rimane fisso in cima alla pagina quando l’utente scorre verso il basso:<\/p>\n Combina questo con uno snippet CSS per gli stili dell’header sticky (posizione fissa, ombra, transizioni).<\/p>\n Se il tuo tema o plugin di form non offre una validazione sufficientemente chiara, puoi aggiungerne una personalizzata:<\/p>\n WordPress include jQuery, ma lo carica in modalità “noConflict”. Questo significa che il simbolo Tuttavia, per script moderni è consigliabile usare JavaScript nativo (vanilla JS) invece di jQuery. Il JavaScript moderno offre API equivalenti ( Uno dei problemi più comuni con gli script personalizzati è il conflitto con altri script già presenti nel sito. Ecco come prevenirli:<\/p>\n Racchiudi sempre il tuo codice in una IIFE per evitare che le variabili inquinino lo scope globale:<\/p>\n Prima di manipolare un elemento DOM, verifica sempre che esista:<\/p>\n Per script che interagiscono con il DOM, attendi sempre che il documento sia completamente caricato:<\/p>\n Usa try-catch per gestire errori potenziali senza bloccare altri script:<\/p>\n Quando uno script non funziona come previsto, ecco come fare debug:<\/p>\n 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.<\/p>\n 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.<\/p>\n Hai bisogno di sviluppare funzionalità JavaScript personalizzate per il tuo sito WordPress? Contatta il team di G Tech Group<\/a>. I nostri sviluppatori possono creare script su misura per qualsiasi esigenza, dall’interattività avanzata alle integrazioni con API esterne e servizi di terze parti.<\/p>\n Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n 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…<\/p>\n","protected":false},"author":0,"featured_media":167110,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"WPCode: JavaScript Custom per WordPress | Guida","_seopress_titles_desc":"Come aggiungere JavaScript custom a WordPress con WPCode. Event listener, AJAX, DOM e performance.","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[3533,2937,3281,3532,492,3525],"class_list":["post-167155","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","tag-custom","tag-frontend","tag-javascript","tag-script","tag-wordpress","tag-wpcode"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=167155"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167155\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167110"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<head><\/code>) vengono caricati ed eseguiti prima<\/strong> del rendering della pagina. Questo significa che:<\/p>\n\n
DOMContentLoaded<\/code>)<\/li>\nJavaScript nel Footer<\/h3>\n
\n
![\"Inserimento](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/wpc-02-headers.png\")
<\/p>\nCreare uno Snippet JavaScript con WPCode<\/h2>\n
\n
<script><\/code>, WPCode li aggiunge automaticamente<\/li>\n<script><\/code>. Se invece hai bisogno di inserire un tag script con attributi specifici (come async<\/code>, defer<\/code> o un src<\/code> esterno), usa il tipo “HTML Snippet” e includi il tag <script><\/code> completo.<\/p>\nEsempio 1: Scroll to Top Button<\/h2>\n
.scroll-to-top {\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 50px;\n height: 50px;\n background-color: #0073aa;\n color: #ffffff;\n border: none;\n border-radius: 50%;\n font-size: 24px;\n cursor: pointer;\n display: none;\n z-index: 9999;\n transition: opacity 0.3s ease, transform 0.3s ease;\n box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n}\n\n.scroll-to-top:hover {\n background-color: #005a87;\n transform: scale(1.1);\n}\n\n.scroll-to-top.visible {\n display: block;\n}<\/code><\/pre>\n<button class=\"scroll-to-top\" id=\"scrollToTop\" aria-label=\"Torna su\">↑<\/button>\n<script>\n(function() {\n var btn = document.getElementById(scrollToTop);\n\n window.addEventListener(scroll, function() {\n if (window.pageYOffset > 300) {\n btn.classList.add(visible);\n } else {\n btn.classList.remove(visible);\n }\n });\n\n btn.addEventListener(click, function() {\n window.scrollTo({ top: 0, behavior: smooth });\n });\n})();\n<\/script><\/code><\/pre>\nEsempio 2: Conto alla Rovescia per Promozioni<\/h2>\n
document.addEventListener(DOMContentLoaded, function() {\n var countdown = document.getElementById(wpcode-countdown);\n if (!countdown) return;\n\n var endDate = new Date(2026-06-30T23:59:59).getTime();\n\n function updateCountdown() {\n var now = new Date().getTime();\n var distance = endDate - now;\n\n if (distance < 0) {\n countdown.innerHTML = <p>La promozione è terminata!<\/p>;\n return;\n }\n\n var days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\n var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n var minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\n var seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\n\n countdown.innerHTML = days + g + hours + h + minutes + m + seconds + s;\n }\n\n updateCountdown();\n setInterval(updateCountdown, 1000);\n});<\/code><\/pre>\n<div id="wpcode-countdown"><\/div><\/code> nella posizione desiderata.<\/p>\n![\"Gestione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/wpc-01-snippets.png\")
<\/p>\nEsempio 3: Table of Contents Automatico<\/h2>\n
document.addEventListener(DOMContentLoaded, function() {\n var content = document.querySelector(.entry-content);\n if (!content) return;\n\n var headings = content.querySelectorAll(h2, h3);\n if (headings.length < 3) return;\n\n var toc = document.createElement(div);\n toc.className = wpcode-toc;\n toc.innerHTML = <h4>Indice dei Contenuti<\/h4>;\n\n var list = document.createElement(ul);\n\n headings.forEach(function(heading, index) {\n var id = toc- + index;\n heading.id = id;\n\n var li = document.createElement(li);\n li.className = heading.tagName === H3 ? toc-sub : ;\n\n var a = document.createElement(a);\n a.href = # + id;\n a.textContent = heading.textContent;\n a.addEventListener(click, function(e) {\n e.preventDefault();\n heading.scrollIntoView({ behavior: smooth });\n });\n\n li.appendChild(a);\n list.appendChild(li);\n });\n\n toc.appendChild(list);\n content.insertBefore(toc, content.firstChild);\n});<\/code><\/pre>\nEsempio 4: Sticky Header<\/h2>\n
document.addEventListener(DOMContentLoaded, function() {\n var header = document.querySelector(.site-header);\n if (!header) return;\n\n var headerHeight = header.offsetHeight;\n var lastScroll = 0;\n\n window.addEventListener(scroll, function() {\n var currentScroll = window.pageYOffset;\n\n if (currentScroll > headerHeight) {\n header.classList.add(header-sticky);\n\n if (currentScroll > lastScroll) {\n header.classList.add(header-hidden);\n } else {\n header.classList.remove(header-hidden);\n }\n } else {\n header.classList.remove(header-sticky);\n header.classList.remove(header-hidden);\n }\n\n lastScroll = currentScroll;\n });\n});<\/code><\/pre>\nEsempio 5: Validazione Form Personalizzata<\/h2>\n
document.addEventListener(DOMContentLoaded, function() {\n var forms = document.querySelectorAll(.wpcf7-form, .wpforms-form);\n\n forms.forEach(function(form) {\n form.addEventListener(submit, function(e) {\n var email = form.querySelector(input[type=\"email\"]);\n var tel = form.querySelector(input[type=\"tel\"]);\n var valid = true;\n\n if (email && email.value) {\n var emailRegex = \/^[^s@]+@[^s@]+.[^s@]+$\/;\n if (!emailRegex.test(email.value)) {\n email.style.borderColor = #e94560;\n valid = false;\n } else {\n email.style.borderColor = ;\n }\n }\n\n if (tel && tel.value) {\n var telClean = tel.value.replace(\/[s-+()]\/g, );\n if (telClean.length < 9 || telClean.length > 15) {\n tel.style.borderColor = #e94560;\n valid = false;\n } else {\n tel.style.borderColor = ;\n }\n }\n\n if (!valid) {\n e.preventDefault();\n }\n });\n });\n});<\/code><\/pre>\nLavorare con jQuery in WordPress<\/h2>\n
$<\/code> non è disponibile per impostazione predefinita. Se il tuo script usa jQuery, devi racchiuderlo in una funzione wrapper:<\/p>\n(function($) {\n $(document).ready(function() {\n \/\/ Il tuo codice jQuery qui\n $(.my-element).fadeIn();\n });\n})(jQuery);<\/code><\/pre>\ndocument.querySelector<\/code>, addEventListener<\/code>, fetch<\/code>) che non richiedono librerie aggiuntive e sono più performanti.<\/p>\n![\"Configurazione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/wc-06-settings.png\")
<\/p>\nEvitare Conflitti JavaScript<\/h2>\n
1. Usa IIFE (Immediately Invoked Function Expression)<\/h3>\n
(function() {\n \/\/ Il tuo codice qui\n var myVariable = valore; \/\/ Non accessibile fuori dalla funzione\n})();<\/code><\/pre>\n2. Controlla l’Esistenza degli Elementi<\/h3>\n
var element = document.getElementById(my-element);\nif (element) {\n \/\/ Manipola l’elemento solo se esiste\n}<\/code><\/pre>\n3. Usa DOMContentLoaded<\/h3>\n
document.addEventListener(DOMContentLoaded, function() {\n \/\/ Il DOM è pronto\n});<\/code><\/pre>\n4. Gestisci gli Errori<\/h3>\n
try {\n \/\/ Codice che potrebbe generare un errore\n} catch (error) {\n console.error(WPCode snippet error:, error);\n}<\/code><\/pre>\nDebug degli Script JavaScript<\/h2>\n
\n
console.log()<\/code> nel tuo script per verificare i valori delle variabili<\/li>\nPrestazioni e Best Practice<\/h2>\n
\n
requestAnimationFrame<\/code> invece di setInterval<\/code><\/li>\n<\/ul>\nConclusioni<\/h2>\n
📚 Leggi anche gli altri articoli della serie WPCode<\/h3>\n
\n
Migliora il Tuo Sito WordPress<\/h3>\n
\n