Capitolo 6 javascript nel plugin

28 Agosto 2022 programmazione plugin wordpress, programmazione wordpress, wordpress

programmazione Plugin programmare wordpress

Per includere javascript in un plugin di wordpress è buona norma, dopo aver definito le variabili, includere i file php che contengono le funzioni che punteranno al file js utilizzando wp_enqueue_script e wp_enqueue_script e aggingerle a wordpress con add_action, come visto nel capitol o 5, utilizzati anche in questo caso per le pagine admin e frontend.

<?php

// Load JS on all admin pages
function mioplugin_admin_scripts() {

  wp_enqueue_script(
    'mioplugin-admin',
    MIOPLUGIN_URL . 'admin/js/mioplugin-admin.js',
    ['jquery'],
    time()
  );

}
add_action( 'admin_enqueue_scripts', 'mioplugin_admin_scripts', 100 );


// Load JS on the frontend
function mioplugin_frontend_scripts() {

  wp_enqueue_script(
    'mioplugin-frontend',
    MIOPLUGIN_URL . 'frontend/js/mioplugin-frontend.js',
    [],
    time()
  );
}
add_action( 'wp_enqueue_scripts', 'mioplugin_frontend_scripts', 100 );

<?php

// Load JS on all admin pages

function mioplugin_admin_scripts() {

wp_enqueue_script(

'mioplugin-admin',

MIOPLUGIN_URL . 'admin/js/mioplugin-admin.js',

['jquery'],

time()

);

}

add_action( 'admin_enqueue_scripts', 'mioplugin_admin_scripts', 100 );

// Load JS on the frontend

function mioplugin_frontend_scripts() {

wp_enqueue_script(

'mioplugin-frontend',

MIOPLUGIN_URL . 'frontend/js/mioplugin-frontend.js',

[],

time()

);

}

add_action( 'wp_enqueue_scripts', 'mioplugin_frontend_scripts', 100 );

Nella funzione wp_enqueue_script vengono passati i sseguenti parametri:

nome univoco
URL completo dello script o percorso dello script relativo alla directory principale di WordPress.
Dipende da un array di script registrati che gestisce questo script. Valore predefinito: array()
Stringa che specifica il numero di versione dello script, se presente, che viene aggiunto all’URL come stringa di query per scopi di busting della cache. Se la versione è impostata su false, viene automaticamente aggiunto un numero di versione uguale alla versione corrente di WordPress installata. Se impostato su null, non viene aggiunta alcuna versione.
Se accodare lo script prima di </body> anziché in <head>. Predefinito “falso”

Nelle funzioni abbiamo 2 file js: mioplugin-admin.js per la pagina admin che si trova nel percorso admin/js e mioplugin-frontend.js per il frontend che si trova nel percorso frontend/js.
Al primo comando add_action viene passato l’hook admin_enqueue_scripts serve per accodare gli script per tutte le pagine di amministrazione.
Al secondo comando add_acction passiamo l’hook wp_enqueue_scripts usato quando si accodano script e stili che dovrebbero apparire sul front-end.

In caso si voglia registrare uno script js e avviarlo solo in determinate pagine si usa la funzione wp_register_script all’interno di una funzione alla quale viene passata una variabile con la quale si può controllare in quale pagina ci troviamo nel caso di pagine admin, per controllare in quale pagina siamo durante la navigazione del sito stesso, basta fare un controllo con i tag condizionali di wordpress.
Esempio:

<?php

// Conditionally load JS on plugin settings pages only
function mioplugin_admin_scripts( $hook ) {

  wp_register_script(
    'mioplugin-admin',
    MIOPLUGIN_URL . 'admin/js/mioplugin-admin.js',
    ['jquery'],
    time()
  );

  wp_localize_script( 'mioplugin-admin', 'wpplugin', [
      'hook' => $hook
  ]);

  if( 'toplevel_page_wpplugin' == $hook ) {
      wp_enqueue_script( 'mioplugin-admin' );
  }

}
add_action( 'admin_enqueue_scripts', 'mioplugin_admin_scripts' );


// Conditionally load JS on single post pages
function mioplugin_frontend_scripts() {

  wp_register_script(
    'mioplugin-frontend',
    MIOPLUGIN_URL . 'frontend/js/mioplugin-frontend.js',
    [],
    time()
  );

  if( is_single() ) {
      wp_enqueue_script( 'mioplugin-frontend' );
  }

}
add_action( 'wp_enqueue_scripts', 'mioplugin_frontend_scripts', 100 );

<?php

// Conditionally load JS on plugin settings pages only

function mioplugin_admin_scripts( $hook ) {

wp_register_script(

'mioplugin-admin',

MIOPLUGIN_URL . 'admin/js/mioplugin-admin.js',

['jquery'],

time()

);

wp_localize_script( 'mioplugin-admin', 'wpplugin', [

'hook' => $hook

]);

if( 'toplevel_page_wpplugin' == $hook ) {

wp_enqueue_script( 'mioplugin-admin' );

}

add_action( 'admin_enqueue_scripts', 'mioplugin_admin_scripts' );

// Conditionally load JS on single post pages

function mioplugin_frontend_scripts() {

wp_register_script(

'mioplugin-frontend',

MIOPLUGIN_URL . 'frontend/js/mioplugin-frontend.js',

[],

time()

);

if( is_single() ) {

wp_enqueue_script( 'mioplugin-frontend' );

}

add_action( 'wp_enqueue_scripts', 'mioplugin_frontend_scripts', 100 );

Il parametro $hook verrà riempito da una stringa toplevel_page_ seguito dal nome assegnato al menu descritto al capitolo 2.
Riporto il codice in esame:

<sup>function wpplugin_settings_page()
{
    add_menu_page(
        'Plugin Name',                    //titolo pagina
        'Plugin Menu',                    //titolo menu
        'manage_options',                 //permessi di visualizzazione
        <mark style="background-color:#7bdcb5" class="has-inline-color">'mioplugin',                      //nome slug</mark>
        'mioplugin_settings_page_markup', //callback
        'dashicons-wordpress-alt',        //icona
        100                               //posizione nel menu
    );

}
add_action( 'admin_menu', 'wpplugin_settings_page' );</sup>

<sup>function wpplugin_settings_page()

{

add_menu_page(

'Plugin Name', //titolo pagina

'Plugin Menu', //titolo menu

'manage_options', //permessi di visualizzazione

<mark style="background-color:#7bdcb5" class="has-inline-color">'mioplugin', //nome slug</mark>

'mioplugin_settings_page_markup', //callback

'dashicons-wordpress-alt', //icona

100 //posizione nel menu

);

}

add_action( 'admin_menu', 'wpplugin_settings_page' );</sup>

Lascia un commento Annulla risposta