Caricare Script personalizzato con wp_head

Torna a Articoli

Caricare Script personalizzato con wp_head

Spesso è necessario aggiungere del codice JavaScript personalizzato all’interno della sezione <head> del nostro sito: ad esempio un codice di monitoraggio.

Conoscere il modo corretto di includere file JavaScript e CSS nei tuoi temi e plugin WordPress è molto importante per designer e sviluppatori in quanto se ti attieni alle best practice, corri il rischio di entrare in conflitto con altri temi e plugin e di creare potenzialmente problemi che potrebbero essere facilmente evitati.

In questo caso è bene pensare che WordPress genera il codice HTML in modo dinamico e che esistono diverse strade per aggiungere del codice nella sezione <head>, ma anche nel <footer>:

  • Carica un file JavaScript separato utilizzando il caricatore di script di WordPress
  • Utilizzare gli hook wp_footer o wp_head per aggiungere lo script in linea
  • Utilizzare un plug-in per aggiungere script di intestazione o piè di pagina
  • Modifica il tuo tema per includere lo script (cattiva idea)
  • Usa l’editor di post di WordPress (davvero una pessima idea da non discutere)

 

Non modificare i file di intestazione o piè di pagina del tuo tema.
Ogni tema di WordPress ha un file del tema header.php e footer.php. Tali file dovrebbero generare l’intestazione e il piè di pagina del tema. Tecnicamente potresti semplicemente incollare il codice di monitoraggio o altro JavaScript lì. Funzionerebbe, ma è sempre sconsigliabile tale operazione perchè cambiando il tema verrebbero persi tutti gli script.

 

Aggiunta di script tramite un plug-in

Inserire del codice con un plug-in è un ottima scelta, si possono trovare molti plug-in già pronti semplici e facili da utilizzare.

 

Aggiunta di JavaScript in linea con gli hook di WordPress

Ti consiglio di creare un plugin WordPress per caricare piccoli frammenti di codice nell’intestazione o piè di pagina del tuo sito tramite un’azione. Questo è l’equivalente della modifica di header.php o footer.php con nessuno dei lati
negativi che ho discusso sopra. Le azioni di WordPress sono un tipo di hook che ti consentono di fare qualcosa quando tale azione viene rilevata da WordPress.

wp_head();

In tutti i temi (almeno così dovrebbe essere!) è presente la seguente linea di codice
<?php wp_head(); ?>

Quando il tuo tema esegue header.php, si avvia l’esecuzione dell’azione wp_head tramite la funzione wp_head().

Nel momento in cui l’esecuzione di  wp_head viene “attivata” vengono avviati tutti gli script presenti nei plugin richiamati tramite

add_action('wp_head','nome_script');

Ecco un plugin WordPress completo che puoi caricare nella tua directory di plugin e utilizzare:

<? Php
/ **
Nome plug-in: Script di intestazione
* /
add_action ( ' wp_head ' , ' my_header_scripts ' );
funzione my_header_scripts () {
? >
< script > mioScript </ script >
<? Php
}

Un plug-in di piè di pagina sarebbe quasi identico, tranne per l’uso dell’azione “wp_footer”.

<? Php
/ **
Nome plug-in: Script piè di pagina
* /
add_action ( ' wp_footer ' , ' my_footer_scripts ' );
funzione my_footer_scripts () {
? >
< script > alert ( ' Hi Roy ' ); </ script >
<? Php
}

Questo è fondamentalmente ciò che fa qualsiasi plug-in di script di intestazione e piè di pagina, solo in modo molto più efficiente: infatti mentre quei plugin devono avere un’interfaccia utente, query di database e altro questo metodo è del tutto personalizzato e richiede solo qualche minuto in più di lavoro, ma consente di risparmiare tempo di caricamento e meno problemi nel futuro.

 

Caricare più script contemporaneamente

WordPress ha un sistema per caricare file JavaScript e CSS. Per i file JavaScript, è possibile utilizzare la funzione wp_enqueue_scripts, all’interno di una funzione di callback collegata all’azione wp_enqueue_script per caricare un file. Per grandi quantità di JavaScript questa funzione risulta una buona idea.

Potresti semplicemente scrivere un normale script HTML includendo il tag in header.php o footer.php, ma questa è una cattiva pratica. Il sistema wp_enqueue_script gestisce l’ordine in cui gli script vengono caricati, gli script da cui dipendono e genera dinamicamente l’URL.

Ecco un esempio di caricamento di uno script chiamato “custom-scripts.js”, che si trova nella directory principale del tema figlio, usando wp_enqueue_scripts:

In function.php del tema child

<?php 
add_action ('wp_enqueue_scripts', 'my_custom_script_load');
funzione my_custom_script_load () {
wp_enqueue_script ('my-custom-script', get_stylesheet_directory_uri (). '/ custom-scripts', array ('jquery'));
}
?>

get_stylesheet_directory_uri () genera dinamicamente l’URL sul tema child invece di scrivere il percorso dell’URL. Questa è una best practice importante: se il tuo sito cambia la sua URL, il codice continua a funzionare.

get_stylesheet_directory_uri (). '/ custom-scripts'

Questa riga di codice fornisce la posizione del file dello script che deve essere caricato.

Se passi da HTTP non sicuro a HTTPS (cosa che ti consiglio!) dovrai caricare gli script su HTTPS o riceverai avvisi di contenuto misto che potrebbero compromettere la funzionalità.

A proposito, nota che il terzo argomento è un array con un valore “jquery”. Questo dice a WordPress che prima di caricare questo script, per caricare jQuery. WordPress include una copia di jQuery. Caricare la tua versione di jQuery può essere una mossa rischiosa e deve essere eseguita correttamente . Caricare una copia aggiuntiva di jQuery è una cattiva idea.

 

Se si desidera creare un plug-in che carica JavaScript personalizzato, sarebbe molto simile, ma è necessario utilizzare la funzione plugin_dir_url () per generare l’URL. Ecco un esempio in cui il file JavaScript si trova nella stessa directory del plug-in:

<?php

add_action (‘wp_enqueue_scripts’, ‘my_custom_script_load’); funzione my_custom_script_load () { wp_enqueue_script (‘my-custom-script’, plugin_dir_url (__FILE__). ‘/ custom-scripts’, array (‘jquery’)); }

?>

Includere CSS e Js del tema

Quando, devono essere caricati fogli di stile o script legati esclusivamente al tema possono essere inclusi in function.php poichè pe runa qualsiasi modifica al tema questi non servirebbero più!

function StileTema() {
wp_enqueue_style( 'fonts', fonts_url(), array(), null );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '3.3.7' );
// Theme stylesheet.
wp_enqueue_style( 'stylesheet', get_stylesheet_uri(), array('bootstrap'), '1.3.4' );
// Load Font Awesome css.
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.7.0' );
}

add_action( 'wp_enqueue_scripts', 'StileTema' );


function Tema_js() {
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '3.3.7', true );
wp_enqueue_script( 'envo-magazine-theme-js', get_template_directory_uri() . '/js/customscript.js', array( 'jquery' ), '1.3.4', true );
}

add_action( 'wp_enqueue_scripts', 'Tema_js' );

 

 

Condividi questo post

Lascia un commento

Torna a Articoli