Metodi per aggiungere JS a wordpress – CINQUEPUNTOZERO.it – Full Stack Developer Logbook

Esistono diversi modi per aggiungere codice Javascript personalizzato al tuo sito WordPress:

1. All'interno del file functions.php

All'interno del file functions.php è possibile inserire codice js:

in un pagina specifica o post specifico
in tutte le pagine

1.1 function.php per pagine/post specifici

Questa modifica del codice utilizzerà il file functions e la funzione is_page() di wordpress

https://developer.wordpress.org/themes/basics/conditional-tags/

Aggiungiamo il codice di seguito alla fine del file delle function.php del nostro tema

function collectray_load_js_script() {
  if( is_page(ID) ) {
    wp_enqueue_script( 'js-file', get_template_directory_uri() . 'PATH_TO_JS_FILE');
      }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

ID: andiamo alla pagina in cui desideri aggiungere il file, fai clic su Modifica e quindi prendi l'ID della pagina dall'URL
Esempio: https://www.cinquepuntozero.it/wp-admin/post.php?post=165&action=edit

https://www.cinquepuntozero.it/wp-admin/post.php?post=165&action=edit

PATH_TO_JS_FILE: url del nostro file js
Esempio: /js/myscript.js

Possiamo utilizzare varie altre opzioni se desideri aggiungere lo script solo in condizioni specifiche:

is_single(),
is_front_page(),
is_home,
is_admin

Nello specifico la funzione is_single() prevede la possibilità di aggiungere diversi argomenti:

is_single( '17' ) - utilizza l'ID del post
is_single( 'My Post Title' ) - utilizza il titolo del post
is_single( 'my-post-title' ) - verifica lo slug del post
is_single( array( 17, 'my-post-title', 'My Post-title' ) ) - controlla se una delle condizioni post ID è "17", slug è "my-post-title" o il titolo è " Il mio titolo del post"

1.2 function.php per tutte le pagine

In questo caso, invece di creare una condizione per aggiungere il contenuto a pagine specifiche, aggiungeremo una funzione generica:

function collectray_theme_scripts_function() {
  wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_theme_scripts_function');

Note: Se stiamo 
usando un tema figlio , dovremo usare get_stylesheet_directory_uri() invece di get_template_directory_uri()

2. all'intestazione del tuo nostro header.php

Possiamo inserire script come script di terze parti (Es. Google Anlytics) in tutte le tue pagine inserendolo all'interno del file header.php del nostro tema.
Non è l'ideale in quanto se aggiorniamo il tema, potremmo perdere queste modifiche. Un rimedio potrebbe essere quello di creare un tema figlio.

Per "aggiungere" il file Javascript al nostro sito, nel head, utilizzi il seguente codice:

<script type="text/javascript" src="/scripts/myscript.js"></script>

Possiamo utilizzare anche la seguente forma:

<script type="text/javascript"> 
...codice javascript...
</script>

Fonti utili: https://www.collectiveray.com/add-javascript-to-wordpress