it-swarm.com.de

Wie kann ich Stile/Skripte auf bestimmten/wp-admin-Seiten einreihen?

Ich habe zwei einfache Funktionen, die Sachen mit wp_enqueue_style() und wp_enqueue_script() laden:

function admin_custom_css()
{ wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; 

function admin_custom_js 
{ wp_enqueue_script( 'javascript_file', 'script.js') };

... und ein paar Admin-Seiten, erstellt mit add_menu_page() und add_submenu_page()

function my_menu() {
   add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
   add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); 
}
add_action('admin_menu', 'my_menu'); 

Wie lade ich meine beiden Funktionen nur auf diesen Seiten?

Im Moment benutze ich:

add_action('admin_init', 'admin_custom_css' ); 
add_action('admin_init', 'admin_custom_js' );  

Aber es lädt meine Dateien auf jeder Admin-Seite, was überhaupt nicht schön ist.

Kann ich dies über eine einfache Zeile in functions.php tun oder muss ich sie separat in meine Seiten einreihen (ich bevorzuge die erste Option, da ich viele Funktionen zum Erstellen von Administrationsseiten bearbeiten müsste).

Vielen Dank!

48
Wordpressor

add_menu_page und add_submenu_page geben beide das "Hook-Suffix" der Seite zurück, mit dem die Seite mit bestimmten Hooks identifiziert werden kann. Daher können Sie dieses Suffix in Kombination mit den variablen Hooks admin_print_styles-{$hook_suffix} und admin_print_scripts-{$hook_suffix} verwenden, um diese Seiten gezielt auszurichten.

function my_menu() {
   $menu = add_menu_page( 'Page 1', 'bar', 'something', 'else', 'foo' );
   $submenu = add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo' );

   add_action( 'admin_print_styles-' . $menu, 'admin_custom_css' );
   add_action( 'admin_print_styles-' . $submenu, 'admin_custom_css' );

   add_action( 'admin_print_scripts-' . $menu, 'admin_custom_js' );
   add_action( 'admin_print_scripts-' . $submenu, 'admin_custom_js' );
}

Ich halte dies für eine saubere Methode, um all dies hinzuzufügen, da alles in einer Funktion behandelt wird. Wenn Sie diese Funktion entfernen möchten, entfernen Sie einfach den Aufruf der einen Funktion.

30
tollmanz

Das Problem bei der Antwort von @tollmanz ist, dass Sie, da Sie die Hooks -print-styles und -print-scripts deaktivieren, den HTML-Code generieren müssen, um Ihre Skripte manuell zu laden. Dies ist nicht optimal, da Sie nicht die Nice-Abhängigkeit und -Versionierung erhalten, die mit wp_enqueue_script() und wp_enqueue_style() geliefert wird. Es lässt Sie auch nicht Dinge in die Fußzeile setzen, wenn dies ein besserer Ort für sie ist.

Zurück zur Frage des OP: Wie kann ich am besten sicherstellen, dass ich JS/CSS nur auf bestimmten Admin-Seiten in die Warteschlange stellen kann?

  1. Haken Sie die Aktion "load - {$ my_admin_page}" ab, um nur dann Dinge zu tun, wenn die Admin-Seite Ihres spezifischen Plugins geladen ist, und dann

  2. Haken Sie die Aktion "admin_enqueue_scripts" ab, um Ihre wp_enqueue_script-Aufrufe ordnungsgemäß hinzuzufügen.

Scheint ein bisschen schmerzhaft zu sein, aber es ist tatsächlich sehr einfach zu implementieren. Von oben:

    add_action( 'admin_menu', 'add_my_admin_menus' ); // hook so we can add menus to our admin left-hand menu

    /**
     * Create the administration menus in the left-hand nav and load the JavaScript conditionally only on that page
     */
    function add_my_admin_menus(){
        $my_page = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );

        // Load the JS conditionally
        add_action( 'load-' . $my_page, 'load_admin_js' );
    }

    // This function is only called when our plugin's page loads!
    function load_admin_js(){
        // Unfortunately we can't just enqueue our scripts here - it's too early. So register against the proper action hook to do it
        add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
    }

    function enqueue_admin_js(){
        // Isn't it Nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}
55
Tom Auger

Wenn Sie get_current_screen() verwenden, können Sie erkennen, auf welcher Seite Sie sich befinden. In dem von mir verlinkten Codex-Artikel gibt es ein Beispiel, das zeigt, wie man get_current_screen() mit add_options_page() verwendet. Diese Methode funktioniert für jede Admin-Seite.

14
mor7ifer

Sie könnten @tollmanzanswer nehmen und etwas erweitern, um auch die bedingte Verwendung zu ermöglichen ...

Beispiel:

/* Add admin pages */   
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo');
    foreach($menu as $key => $value){
        if($key == 'main_page'){
            /* Print styles on only the main page. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        }
        /* Print scripts on all of our admin pages. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
    }
}
add_action('admin_menu', 'my_admin_pages');
3
Michael Ecklund

Ich habe mich das Gleiche gefragt. Es gibt eine moderne Version, die admin_enqueue_scripts verwendet:

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Settings', 'Mortgage Calculator', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * Include the ember admin scripts only on pages where it's needed.
   */
  add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){
    if($hook !== $settingsPage){
      return;
    }
    // Remove default jQuery since Ember provides its own.
    wp_dequeue_script('jquery');
    wp_enqueue_script('ember-vendor', plugins_url("admin/assets/vendor.js", __FILE__));
    wp_enqueue_script('ember-project', plugins_url("admin/assets/mortgage-plugin-ember-admin.js", __FILE__), ['ember-vendor']);
    wp_enqueue_script('ember-live-reload', "http://localhost:4200/ember-cli-live-reload.js");
  });
});
2
Kit Sunde

Wie @ mor7ifer oben erwähnt, können Sie die native WordPress-Funktion get_current_screen () verwenden. Wenn Sie die Ausgabe dieser Funktion durchlaufen, z.

$current_screen = get_current_screen();
foreach($current_screen as $key => $value) {
    error_log(print_r($key,1));
}

... Sie werden einen Schlüssel mit dem Namen base bemerken. Ich benutze diese Funktion, um zu ermitteln, auf welcher Seite ich mich befinde, und um mich in die Warteschlange zu stellen:

add_action('admin_enqueue_scripts', 'some_hook_function')* ):

public function some_hook_function(){

    // # only register and queue scripts & styles on POST edit screen of admin
    $current_page = get_current_screen()->base;
    if($current_page == 'post' || $current_page == 'page') {

        wp_enqueue_script('datetimepicker', plugins_url('assets/jquery-ui-timepicker-addon.min.js', __FILE__), array('jquery', 'jquery-ui-datepicker', 'jquery-ui-slider'), '1.9.1', true);

        wp_enqueue_style( 'jquery-ui-datepicker', plugins_url('assets/jquery-ui.min.css', __FILE__), array(), '1.11.2', 'all');


    } else { // # if not on post page, deregister and dequeue styles & scripts

        wp_dequeue_script('datetimepicker');
        wp_dequeue_style('jquery-ui-datepicker');

    }
}
2
recurse

Um es zu machen, müssen Sie zuerst den Namen der Admin-Seite finden. Füge admin_enqueue_scripts mit wp_die($hook) hinzu und gehe zu deiner spezifischen Pluginseite. Der Seitenname wird angezeigt.

function my_plugin_scripts($hook) {
    wp_die($hook);
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );

settings_page_plugging_info

Kopieren Sie nun den Seitennamen und verwenden Sie ihn, um die Skripte auf der jeweiligen Seite zu laden.

function my_plugin_scripts($hook) {
    if ( 'settings_page_plugging_info' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugins_url('js/file.js', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );
0
IqbalBary
add_action( 'admin_menu', 'add_my_admin_menus' ); 

function add_my_admin_menus() {
    $GLOBALS['my_page'] = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content');
    add_action( 'admin_enqueue_scripts', 'enqueue_admin_js');
}

function enqueue_admin_js($hook) {
    if($GLOBALS['my_page'] === $hook) {
        wp_enqueue_script( 'jquery-ui-core' );
        wp_enqueue_script( 'jquery-ui-tabs' );
        // Isn't it Nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}
0
Jashwant

Aus der Dokumentation :

admin_print_scripts wird hauptsächlich zum Echo von Inline-Javascript verwendet. admin_print_scripts sollte nicht zum Einreihen von Stilen oder Skripten auf den Administrationsseiten verwendet werden. Verwenden Sie stattdessen admin_enqueue_scripts . "

Gleiches gilt für admin_print_styles .

0
Tolea Bivol