Per la realizzazione di un Sito Web Professionale, vi possono essere davvero mille soluzioni più o meno … OK.
Il metodo BRiDWEB vede e prevede l’uso di due strumenti non solo eccezionali dal punto di vista del supporto (vitale) ma, soprattutto, da quello relativo alle prestazioni ed alla scalabilità.
Stiamo ovviamente parlando del tema nr.1° per WordPress, WP Astra (il più veloce e professionale) e del builder leader assoluto fra quelli che si appoggiano ai temi (appunto), Elementor.
Oxygen (altro eccezionale builder) è leggermente più prestazionale ma è un builder atipico e non adatto a tutti i Clienti.
Ora, come spesso accade durante la costruzione di un progetto Web o semplicemente quando, in pieno supporto post-rilascio, si aggiornano gli elementi (temi, plugin, file, core, ecc), è possibile incappare in fastidiosissimi errori di codice.
Le motivazioni possono essere davvero infinite, quello che conta è cercare approfonditamente e professionalmente di capire la causa e come correggere il problema per salvaguardare il Brand del Cliente.
Questo è un caso recente che mi è capitato e, poiché in rete non vi era nulla a proposito e neppure il supporto Astra ne era a conoscenza, dopo averlo risolto, ho deciso di metterlo a tua disposizione … caso mai 😉
Usiamo Elementor Header per sovrascrivere quello Astra
Come detto poc’anzi, Astra è un tema eccezionale e, nella sua versione PRO (Astra Addon), offre molteplici soluzioni per la realizzazione della struttura di un Sito Web. Una di queste è il builder per l’Header (parte superiore) del Sito Web che contiene, di solito, info, CTA, menu ed icone.
Le opzioni disponibili sono tante ma, in short, si potrebbero riassumere come Header fisso, Header trasparente (in caso di Hero).
All’interno dell’Header, come detto, viene inserito il menu principale del Sito Web. Per rispondere alle esigenze responsive, nella versione Tablet e Mobile, la parte Off-Canvas (quella nascosta ma che appare quando si clicca sulla classica icona a tre linee nota come Hamburger) può apparire come Flyout, Full-Screen o Dropdown.
Decisamente la più carina e senza dubbio la più usata è la versione Flyout.
Fino a qui … ok, se non si usasse il noto builder Elementor.
Premesso che la convivenza fra i due è assolutamente certificata, consigliata e funzionale, è possibile che, nel tempo, vi possano essere problemi. Un Sito Web che usa Astra con il proprio Header ed Elementor (sia nella versione free che PRO) come costruttore di pagine, funziona … benissimo!
Tuttavia, se appunto è disponibile la versione PRO di Elementor, allora è auspicabile il suo utilizzo in toto. Fra le numerose funzioni anche quelle relative alla realizzazione e gestione dell’Header e del Footer (la parte bassa del Sito Web) delle pagine, molto più complete.
Usare Elementor Header per sovrascrivere quello di Astra, in genere non crea problemi … e invece.
getElementsByTagName. Errore JS Astra
Poniamo come dato di fatto saper realizzare l’Header con Elementor, il problema è apparso immediatamente quando l’ho impostato come attivo su tutto il Sito Web.
Apparentemente non significativo, da Chrome Inspector, veniva rilevato il seguente errore:
Uncaught TypeError: Cannot read properties of null (reading 'getElementsByTagName')
at frontend.min.js?ver=3.7.5:formatted:209
at HTMLDocument. (frontend.min.js?ver=3.7.5:formatted:242)
Eccolo qui! Un bellissimo errore JS sul file frontend.min.js appartenente ad Atra e che risiede nella relativa cartella / assets / js.
Come risolvere l'errore getElementsByTagName
In questi casi … calma, pazienza ed una buona dote di analisi step-by-step a ritroso.
Cerchi di ripartire da capo analizzando, impostazioni, eventuali codici hack inseriti nel file functions.php di WordPress fino alla misurazione dell’integrità dei file in questione.
In short? Brainstorming con il supporto di Astra ed ore di lavoro minuzioso. Tuttavia, salvo grossolani errori, quasi sempre, il problema è … semplice … e si sclera inutilmente 🙂
Il problema, infatti, in questo caso era dettato dall’impostazione del menu Off-Canvas di Astra precedentemente visto. Per risolvere il conflitto, infatti, è bastato tornare temporaneamente sull’impostazione dell’header del tema e variare il settaggio da Flyout a Dropdown.
Dopo aver pubblicato la nuova impostazione, è stato sufficiente aggiornare la pagina nel browser per verificare che l’errore è stato … finalmente … risolto!
Conclusioni
Realizzare un Sito Web Professionale è davvero sempre eccitante e creativo non c’è che dire. Ergo, come si dice … non capita, ma se capita … ora sai come comportarti e come risolverlo 🙂
