特定の/ wp-adminページでスタイル/スクリプトをエンキューするにはどうすればよいですか?


53

とを使用wp_enqueue_style()してwp_enqueue_script()、次のようなものをロードする2つの単純な関数があります。

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

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

...として作成された少数の管理ページ、add_menu_page()および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'); 

これらのページにのみ2つの関数を読み込むにはどうすればよいですか?

今私は使用しています:

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

しかし、それはすべての管理ページに私のファイルをロードします。

1つの簡単な行でこれを行うこともfunctions.php、ページ内で個別にキューに入れる必要がありますか(多くのadmin-page-creating-functionsを編集する必要があるため、最初のオプションを強く好みます)。

ありがとう!


回答:


33

add_menu_pageそして、add_submenu_pageの両方が、特定のフックでページを識別するために使用することができるページの「フック接尾辞」を、返します。そのため、その接尾辞を変数フックadmin_print_styles-{$hook_suffix}と組み合わせて使用​​し、admin_print_scripts-{$hook_suffix}これらのページを明確にターゲットにすることができます。

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' );
}

これはすべて1つの関数内で処理されるため、これをすべて追加するためのクリーンな方法であることがわかりました。この機能を削除する場合は、1つの関数の呼び出しを削除するだけです。


5
この答えは技術的には正しくありません。状態のコーデックスは、admin_print_scripts()admin_print_scripts スタイルまたはスクリプトをキューに入れるために使用すべきではありません。」@TomAugerによる答えは実際には正しいものですが、最適ではありません。WPチームが追加した場合、それは有益であろうadmin_enqueue_scripts-(hookname)けれどもフックを...
デビッド・ガール

この回答を見つけるのに3日かかりましたが、本当に役に立ちました:)ありがとう:)
Asfandyar Khan

@DavidGard、あなたはおそらく、これらを見なければならないdeveloper.wordpress.org/reference/hooks/...developer.wordpress.org/reference/hooks/...を
hkchakladar

1
@hkchakladar私のコメントは4年近く前です...関係がなくなったら、理由を説明する最新のコメントを必ず追加してください。
デビッドガード

61

@tollmanzの答えの問題は、-print-stylesフックと-print-scriptsフックをフックしているため、HTMLを生成してスクリプトを手動でロードする必要があることです。これは最適ではありません。なぜなら、wp_enqueue_script()andに付属する素晴らしい依存関係とバージョニングが得られないからですwp_enqueue_style()。また、フッターに適切な場所がある場合は、フッターに物を入れることもできません。

それでは、OPの質問に戻ります。特定の管理ページでのみJS / CSSをキューに登録できるようにする最良の方法は何ですか?

  1. 「load-{$ my_admin_page}」アクションをフックして、特定のプラグインの管理ページが読み込まれたときにのみ処理を行い、その後、

  2. 「admin_enqueue_scripts」アクションをフックして、wp_enqueue_script呼び出しを適切に追加します。

少し苦痛に思えますが、実際には非常に簡単に実装できます。上から:

    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' ) );
    }
}

4
+1-これがIMOへの道です。個々の名前空間(someaction- $ hook)フックは1つまたは2つのアクションに適していますが、プラグインを作成している場合は、オプションページでさまざまな処理を行う必要があります。便利。私は通常、他の多くのフック/フィルターなどを追加する可能性のある関数をload-$hook起動するフックに1つのアクションを追加しますoption_page_actions。これらのアクションは選択したページでのみ呼び出されるため、そのポイントを超えるフックは名前空間付きフックを使用する必要はありません(お見せしたように)、これははるかに効率的で直感的です。
エヴァンマットソン

こんにちは、この方法はまだサポートされていますか?load_admin_jsは呼び出すことはありません
IAmJulianAcosta

確かにまだサポートされています。admin.phpの206行目。2.6から存在し、すぐに(永遠に)消える可能性は低いです。
トム・オージェ

私の答えを今見てみると、jquery-ui-coreとjquery-ui-tabsを明示的にキューに登録することは、これらのスクリプトが既に登録されているため、完全にすばらしいと思います。依存関係で呼び出すだけです。それに応じて回答を更新します。
トム・オージェ

WordPress 4.9.6で完全に動作
ethmz

13

を使用get_current_screen()すると、現在のページが何であるかを検出できます。私が使用する方法を示しているリンクコーデックスの記事の例があるget_current_screen()add_options_page()、このメソッドは任意の管理ページのために動作しますが。


3

あなたは答えを取り、それを少し拡張して、条件付きの使用も可能にします...@tollmanz

例:

/* 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

上記の@ mor7iferのように、ネイティブのWordPress関数get_current_screen()を使用できます。この関数の出力をループする場合、例えば:

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

... baseというキーに気付くでしょう。私はこれを使用して、現在どのページにいるかを検出し、キューに入れ、デキューします:

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

私は同じことを疑問に思っていました。を使用する最新バージョンがあります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");
  });
});


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' ) );
    }
}

0

作成するには、最初に管理ページ名を見つける必要があります。追加admin_enqueue_scriptswp_die($hook)て特定のプラグインページに移動すると、ページ名が表示されます。

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

settings_page_plugging_info

次に、ページ名をコピーし、特定のページにスクリプトをロードする条件で使用します。

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' );
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.