enqueue admin styling and scripts only on plugin page

admin管理员组

文章数量:1318032

I'm still learning so please bear with me if I sound a little confusing. Having lots of fun BTW while I learn.

I'm creating a plugin with admin specific JS and CSS but I don't want those scripts and styles to load elsewhere in the admin area. I used a boilerplate to generate the plugin for me.

The top level page I'm loading it on is uwc. eg /wp-admin/options-general.php?page=uwc

In the admin folder/fluffy-plugin.php I have this.

class Fluffy_Plugin_Admin {

/**
 * The ID of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $plugin_name    The ID of this plugin.
 */
private $plugin_name;

/**
 * The version of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $version    The current version of this plugin.
 */
private $version;

/**
 * Initialize the class and set its properties.
 *
 * @since    1.0.0
 * @param      string    $plugin_name       The name of this plugin.
 * @param      string    $version    The version of this plugin.
 */
public function __construct( $plugin_name, $version ) {

    $this->plugin_name = $plugin_name;
    $this->version = $version;

}

/**
 * Register the stylesheets for the admin area.
 *
 * @since    1.0.0
 */
 public function enqueue_styles() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Fluffy_Plugin_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Fluffy_Plugin_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */

     wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/fluffy-plugin-admin.css', array(), $this->version, 'all' );

 }


/**
 * Register the JavaScript for the admin area.
 *
 * @since    1.0.0
 */
public function enqueue_scripts() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Fluffy_Plugin_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Fluffy_Plugin_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-color-picker-script.js', array( 'wp-color-picker' ), false, true );


}

}

PS. You may have to ELI5

I'm still learning so please bear with me if I sound a little confusing. Having lots of fun BTW while I learn.

I'm creating a plugin with admin specific JS and CSS but I don't want those scripts and styles to load elsewhere in the admin area. I used a boilerplate to generate the plugin for me.

The top level page I'm loading it on is uwc. eg /wp-admin/options-general.php?page=uwc

In the admin folder/fluffy-plugin.php I have this.

class Fluffy_Plugin_Admin {

/**
 * The ID of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $plugin_name    The ID of this plugin.
 */
private $plugin_name;

/**
 * The version of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $version    The current version of this plugin.
 */
private $version;

/**
 * Initialize the class and set its properties.
 *
 * @since    1.0.0
 * @param      string    $plugin_name       The name of this plugin.
 * @param      string    $version    The version of this plugin.
 */
public function __construct( $plugin_name, $version ) {

    $this->plugin_name = $plugin_name;
    $this->version = $version;

}

/**
 * Register the stylesheets for the admin area.
 *
 * @since    1.0.0
 */
 public function enqueue_styles() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Fluffy_Plugin_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Fluffy_Plugin_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */

     wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/fluffy-plugin-admin.css', array(), $this->version, 'all' );

 }


/**
 * Register the JavaScript for the admin area.
 *
 * @since    1.0.0
 */
public function enqueue_scripts() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Fluffy_Plugin_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Fluffy_Plugin_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-color-picker-script.js', array( 'wp-color-picker' ), false, true );


}

}

PS. You may have to ELI5

• wp-enqueue-script
• wp-enqueue-style
• admin-css

Share Improve this question asked Feb 11, 2019 at 2:03 John CookJohn Cook 6733 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use $screen = get_current_screen(); functions to get the current screen and add warp your enqueue method with the if conditions to check the screen.

https://codex.wordpress/Function_Reference/get_current_screen

public function enqueue_scripts() {

$screen = get_current_screen();

  // Check screen base and page
  if ( 'options-general' === $screen->base && $_GET['page'] ==='uwc' )
 {
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-color-picker-script.js', array( 'wp-color-picker' ), false, true );

 } 
}

本文标签： enqueue admin styling and scripts only on plugin page