Categorie
CMS Javascript Programmazione Wordpress

Metodi per aggiungere JS a wordpress

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:

  1. in un pagina specifica o post specifico
  2. 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

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *