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

53

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

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()undadd_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 tun functions.phpoder 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!

Wordpressor
quelle

Antworten:

33

add_menu_pageund add_submenu_pagebeide geben das "Hook-Suffix" der Seite zurück, mit dem die Seite mit bestimmten Hooks identifiziert werden kann. Als solches können Sie dieses Suffix in Kombination mit den variablen Hooks verwenden admin_print_styles-{$hook_suffix}und admin_print_scripts-{$hook_suffix}diese Seiten gezielt ansprechen.

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.

tollmanz
quelle
5
Diese Antwort ist technisch nicht korrekt. Der Codex füradmin_print_scripts() Staaten " admin_print_scripts sollte nicht zum Einreihen von Stilen oder Skripten verwendet werden ." Die Antwort von @TomAuger ist tatsächlich die richtige, wenn auch nicht optimale. Es wäre jedoch von Vorteil, wenn das WP-Team einen admin_enqueue_scripts-(hookname)Hook hinzufügen würde ...
David Gard,
Ich brauchte 3 Tage, um diese Antwort zu finden, die für mich wirklich hilfreich war :) Danke :)
Asfandyar Khan
@DavidGard, Sie sollten sich diese wahrscheinlich ansehen developer.wordpress.org/reference/hooks/… , developer.wordpress.org/reference/hooks/…
hkchakladar
1
@hkchakladar Mein Kommentar ist fast vier Jahre alt ... Wenn er nicht mehr relevant ist, fügen Sie auf jeden Fall einen aktuelleren Kommentar hinzu, der erklärt, warum.
David Gard
61

Das Problem mit 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 nette Abhängigkeit und Versionierung erhalten, die mit wp_enqueue_script()und geliefert wird wp_enqueue_style(). 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 einreihen kann?

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

  2. Haken Sie die Aktion "admin_enqueue_scripts" ab, um Ihre wp_enqueue_scriptAnrufe 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' ) );
    }
}
Tom Auger
quelle
4
+1 - Dies ist der Weg zu IMO. Die einzelnen Namespace-Hooks (someaction- $ hook) eignen sich für 1 oder 2 Aktionen. Wenn Sie jedoch ein Plugin erstellen, müssen Sie möglicherweise viele verschiedene Aktionen nur auf Ihren Optionsseiten ausführen, wodurch diese Methode wirklich funktioniert praktisch. Normalerweise füge ich dem load-$hookHook, der meine option_page_actionsFunktion auslöst, nur eine Aktion hinzu, zu der ich möglicherweise viele andere Hooks / Filter usw. hinzufüge. Da diese Aktionen nur auf der Seite der Wahl aufgerufen werden, müssen Hooks, die über diesen Punkt hinausgehen, keine mit Namespaces versehenen Hooks verwenden (wie Sie gezeigt haben), was viel effizienter und intuitiver ist.
Evan Mattson
Hallo, wird dieser Weg noch unterstützt? load_admin_js ruft nie an
IAmJulianAcosta
Sicher, es wird immer noch unterstützt. Zeile 206 von admin.php. Ich bin seit 2.6 dort und werde wahrscheinlich nicht mehr so ​​bald (je) weg sein.
Tom Auger
Wenn ich mir jetzt meine Antwort anschaue, glaube ich, dass das explizite Einreihen von jquery-ui-core und jquery-ui-tabs völlig überflüssig ist, da diese Skripte bereits registriert sind. Sie müssen sie nur in der Abhängigkeit aufrufen. Ich werde meine Antwort entsprechend aktualisieren.
Tom Auger
Funktioniert perfekt mit WordPress 4.9.6
ethmz
13

Wenn Sie verwenden get_current_screen(), können Sie erkennen, auf welcher Seite Sie sich befinden. Es gibt ein Beispiel in dem Kodex Artikel, den ich verbunden , die zeigt , wie die Verwendung get_current_screen()mit add_options_page()dieser Methode für jede Admin - Seite arbeiten.

mor7ifer
quelle
3

Sie können die Antwort übernehmen und leicht erweitern, wobei auch die bedingte Verwendung berücksichtigt wird ...@tollmanz

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');
Michael Ecklund
quelle
3

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

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

... Sie werden einen Schlüssel namens 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');

    }
}
rekursieren
quelle
2

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

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");
  });
});
Kit Sunde
quelle
0
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' ) );
    }
}
Jashwant
quelle
0

Um es zu machen, müssen Sie zuerst den Namen der Admin-Seite finden. Fügen Sie admin_enqueue_scriptsmit wp_die($hook)und gehen Sie zu Ihrer spezifischen Plug-in-Seite. Sie sehen den Seitennamen.

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' );
IqbalBary
quelle