Il metodo più efficace per aggiungere script in linea in WordPress

Pubblicato: 2022-06-16

Gli script inline sono due semplici parole che fanno venire i brividi agli sviluppatori. Gli script in linea sono un modo semplice per aggiungere JavaScript (JS), CSS e HTML nel testo del tuo post WordPress. Sebbene possano essere utilizzati per molti scopi, un uso generale è apportare modifiche al volo quando pubblichi un nuovo articolo di WordPress. Alcuni potrebbero obiettare che non è necessario, ma così facendo assicurerai che il tuo sito web funzioni in modo fluido ed efficiente.

Una cosa che la maggior parte degli utenti di WordPress trascura è l'integrazione degli script sui propri siti. Sia che tu voglia implementare un testo in linea su una singola pagina o sull'intero sito web, ci sono molti modi per realizzarlo con WordPress. L'aggiunta di script inline al tuo sito Web WordPress può essere semplice una volta compresi i metodi corretti per farlo correttamente. Questo post del blog discuterà i modi più efficaci per aggiungere facilmente script inline in WordPress. Continua a leggere per saperne di più.

Aggiunta tramite Wp_print_scripts

Se stai cercando di aggiungere testi in linea di WordPress, allora la funzione wp_print_scripts o/e admin_print_scripts di WordPress è la tua risposta. WordPress wp_print_scripts può visualizzare tag di testo nell'intestazione di un documento, cosa che in genere viene eseguita quando si includono file JS o CSS. Questa funzione di WordPress ti consentirà di rendere il tuo sito più interattivo o di aggiungere nuove funzionalità. Come con qualsiasi funzione di WordPress, ci sono alcune semplici regole da seguire prima di utilizzarla sul tuo sito web.

Questa funzione stabilisce tre variabili basate sulle opzioni del plugin di WordPress e le emette sul front-end (la sezione head) usando l'hook admin_print_scripts. Per aggiungere i caratteri inline all'area Admin, puoi anche sostituire wp_print_scripts con la funzione admin_print_scripts e chiamarlo un giorno.

Quando WordPress viene installato per la prima volta, viene fornito con molti testi che vengono aggiunti automaticamente al sito. Ciò può comportare un aumento del tempo di caricamento e dell'utilizzo della CPU sul server. Un modo per combattere questo è usare la funzione wp_print_scripts, quindi carichi i testi solo quando sono necessari o desiderati. Detto questo, diamo una rapida occhiata ad alcuni pro e contro dell'utilizzo della funzione wp_print_script per aggiungere caratteri inline nel tuo post WordPress:

Professionisti:

È sempre semplice aggiungere qualsiasi testo in linea alla "sezione principale" delle pagine di WordPress;
Il codice che aggiungi non avrà alcuna restrizione, il che significa che puoi aggiungere variabili JS, funzioni, metodi, condizionali o qualsiasi cosa tu voglia aggiungere al tuo sito.

Contro:

Non esiste un modo specifico per associare il codice aggiunto agli script registrati;
Nella maggior parte dei casi, il codice di output su vari fattori potrebbe non essere un modo reale e coerente per controllare la posizione del codice di output. Tuttavia, puoi sempre utilizzare il parametro <priority> sotto <add_action> per controllare la posizione del codice aggiunto.

Utilizzare la funzione wp_add_inline_script()

Di recente, WordPress ha lanciato una nuova funzione applicata per aggiungere JavaScript in linea ai post di WordPress. Tuttavia, questa nuova integrazione è compatibile, a partire dalla versione 4.5 di WordPress, ed è un modo più importante per aggiungere testi in linea rispetto ad altre opzioni disponibili. Stiamo definendo la funzione wp_add_inline_script() e ti aspetti che svolga il lavoro in modo impeccabile. Anche lo sviluppatore WordPress più esperto là fuori può confermare questo fatto.

La funzione wp_add_inline_script() è un modo per aggiungere caratteri inline al tuo sito senza modificare alcun codice sulla pagina di WordPress. Ciò ti consente di apportare modifiche in tempo reale senza dover accedere a FTP o utilizzare un plug-in. Questa funzione è anche una delle integrazioni essenziali che puoi utilizzare per personalizzare il tuo sito WordPress. La procedura ti consente di aggiungere testi in linea all'interno del codice del tuo sito web, il che significa che verranno aggiunti direttamente nei tag HTML della tua pagina web. Ciò consente una personalizzazione molto maggiore rispetto all'utilizzo di file JS esterni o collegamenti ad altri siti Web.

Professionisti:

La funzione wp_add_inline_script() è un modo prezioso per aggiungere caratteri inline al tuo blog WordPress;
Può essere un modo semplice e conveniente per gli sviluppatori di aggiungere codice JS senza modificare il tema WordPress o i file plug-in o modificare il file modello header.php;
Questo può essere utile per aggiungere script come il codice di Google Analytics. Ti evita di modificare il file header.php ogni volta che c'è un aggiornamento con le funzionalità o le impostazioni di Google Analytics.

Contro:

L'unico inconveniente della funzione wp_add_inline_script() è che è disponibile solo a partire dalla versione 4.5 di WordPress.

Utilizzare la funzione wp_localize_script()

La funzione wp_localize_script() è un'utile utilità di WordPress per aggiungere caratteri in linea a singole pagine del tuo sito Web WordPress. È perfetto se hai bisogno di funzionalità rapide e temporanee sui tuoi siti, come un evento o una promozione. Questa funzione accetta un numero variabile di argomenti e genera un elenco di stringhe JS aggiunte all'intestazione del documento. Ciò può essere utile se, ad esempio, stai utilizzando jQuery e desideri che il codice dello script solo su determinate pagine.

Wp_localize_script() accoda il tuo file JS e gli fornisce un ID/handle di "shapeSpace_script", che definisce un array associativo che contiene le tue variabili. Infine, queste variabili JS vengono passate a wp_localize_script() per essere incluse in linea con shapeSpace_script registrato. Di conseguenza, ti consente di applicare qualsiasi variabile JS come shapeSpace.varl, tra le altre. Questa funzione è dedicata alla localizzazione delle variabili JS da utilizzare con la traduzione linguistica e l'internazionalizzazione. Tuttavia, la maggior parte degli sviluppatori di WordPress lo utilizza come un modo comune per aggiungere caratteri in linea ai propri siti.

Professionisti:

Wp_localize_script() abilita l'associazione "read:require" con lo script registrato esistente. Ciò significa che fornisce un modo eccellente e coerente per controllare la posizione relativa dell'output di testo personalizzato del tuo sito web.

Contro:

L'unico inconveniente è che puoi solo aggiungere variabili JS ( var = 'value' ). Quindi è impossibile aggiungere altri script inline come funzioni, condizionali, equazioni, tra gli altri, usando wp_localize_script().

Usa fallback

Come accennato in precedenza, metodi specifici come wp_add_inline_script() sono disponibili solo a partire dalla versione 4.5 di WordPress o superiore. Tuttavia, mettendo tutto insieme, puoi creare un metodo a prova di errore per aggiungere caratteri inline ai tuoi file WordPress indipendentemente dalla versione di WordPress che stai utilizzando. Il modo più efficace per farlo è tramite tre funzioni nel post plug-in della sezione head (front-end).

La prima cosa essenziale da fare è accodare il file JS e chiamare la seguente funzione per aggiungere righe inline tramite la funzione wp_add_inline_script(). La terza funzione è il fallback a qualcosa di precedente alla versione 4.5. Questo funzionerà senza dubbio su WordPress 4.5 e qualsiasi versione distintiva. È qui che avviene la vera magia. Puoi procedere con il metodo di fallback che porterà a termine il tuo lavoro sulla variante WordPress di tua scelta tornando alla 2.1 o altro.

Professionisti:

Puoi avere più file JS sul tuo sito web senza aggiungere ulteriori richieste HTTP per caricarli contemporaneamente. Ciò significa che sarai in grado di ridurre il tempo di caricamento per i visitatori del tuo sito web.
Se uno script non riesce, altri script all'interno della stessa funzionalità di fallback continueranno a funzionare perché vengono caricati in modo asincrono da thread diversi a causa della loro dipendenza reciproca.

Contro:

Quando lo script non riesce, in alcuni casi l'utente vedrà uno spazio vuoto invece del codice. Potrebbe sembrare che non sia un grosso problema, ma è una cosa fondamentale da notare come sviluppatore di WordPress.

Riepilogo sull'aggiunta di script in linea in WordPress

La limitazione delle tecniche alternative a tua disposizione rende la funzione wp_add_inline_script() il metodo migliore per aggiungere caratteri inline di WordPress. Questa è considerata la soluzione più efficace al giorno d'oggi e, contrariamente alla credenza popolare, questa funzione può essere utilizzata su qualsiasi versione di WordPress se si utilizza la tecnica di fallback. Per tua informazione, di seguito è riportato un breve riepilogo dei modi più efficaci per aggiungere script inline nel core di WordPress:

wp_add_inline_script() consente di aggiungere qualsiasi codice JS a qualsiasi script registrato;
wp_print_scripts o admin_print_scripts ti consente di installare qualsiasi codice nella sezione front-end o intestazione;

wp_localize_script() consente anche di aggiungere variabili JS a qualsiasi script registrato;
Fallback ti consente di modellare una tecnica completa che funziona esattamente con qualsiasi versione di WordPress.

Nota: se desideri aggiungere uno stile in linea/CSS invece di JavaScript, WordPress ti fornisce una serie di funzioni di "aggiungi stile" simili a quelle utilizzate per aggiungere gli script. Ad esempio, controlla wp_print_styles e wp_add_inline_styles.

Conclusione

Gli script in linea sono un modo semplice e veloce per aggiungere funzionalità al tuo sito Web WordPress. Scrivendo lo script in JavaScript, puoi creare uno script inline che fa tutto ciò che vuoi che faccia sulla pagina senza richiedere plug-in o codice aggiuntivi. Questo tutorial delinea i metodi più efficaci per aggiungere script inline in WordPress.

Sei un editor di WordPress con una certa esperienza nell'aggiunta di script ai siti WP? Quale metodo consiglieresti a uno sviluppatore alle prime armi che cerca di portare a termine il lavoro rapidamente? Sentiti libero di usare la sezione commenti per condividere la tua opinione e porre domande preoccupanti.

Biografia dell'autore:

Arthur è uno specialista di marketing digitale e business blogger. Sviluppa startup interessanti attraverso vari social media e condivide la sua esperienza con i clienti per promuovere al meglio il loro business. Nel tempo libero, Arthur studia giapponese e scrive articoli sulle tendenze della trasformazione digitale.