Plugin WordPress: specificare in quali sezioni del backend verranno inseriti i file CSS e JavaScript aggiuntivi

In WordPress possiamo specificare dove inserire i file CSS e JavaScript dei nostri plugin nel backend.

Partiamo dalla seguente configurazione di base:


<?php

add_action( 'admin_menu', 'my_setup_plugin_pages' );

function my_plugin_page() {
    
}

function my_sub_page() {
   
}

function my_setup_plugin_pages() {
  add_menu_page( __( 'My Plugin', 'textdomain' ), __( 'My Plugin', 'textdomain' ), 'manage_options',
    'my_plugin_settings', 'my_plugin_page', 'dashicons-cart', 2 );
  add_submenu_page( 'my_plugin_settings', __( 'Sub page', 'textdomain' ), __( 'Sub page', 'textdomain' ), 'manage_options', 'my_sub_page', 'my_sub_page' );
}

my รจ il prefisso usato per contraddistinguere le nostre pagine. La funzione usata nell'hook admin_enqueue_scripts accetta come argomento il nome della sezione corrente del backend di WordPress. Quindi avremo:


<?php

function my_add_admin_assets( $hook ) {
  if( strstr( $hook, 'my' ) === false ) {
    return;
  }
  wp_register_style( 'dtstyle', plugins_url() . '/my-plugin/js/datatables/media/css/jquery.dataTables.min.css', array(), '2.0' );
  wp_enqueue_style( 'dtstyle' );
  wp_register_script( 'dt', plugins_url() . '/my-plugin/js/datatables/media/js/jquery.dataTables.js', array( 'jquery' ) );
  wp_enqueue_script( 'dt' );
  wp_register_style( 'bs', plugins_url() . '/my-plugin/js/bootstrap/css/bootstrap.css', array(), time() );
  wp_enqueue_style( 'bs' );
  wp_register_script( 'bsjs', plugins_url() . '/my-plugin/js/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
  wp_enqueue_script( 'bsjs' );
}

add_action( 'admin_enqueue_scripts', 'my_add_admin_assets' );

Se il nome della sezione non contiene il nostro prefisso, i file CSS e JavaScript da noi specificati non verranno inseriti.

Torna su