如何將自定義 javascript 添加到 WordPress 管理員？

Question

我想向編輯帖子頁面添加一些自定義 jquery 代碼，這非常簡單，例如當有人按下發布時顯示一個 div。

唯一的限制是我想通過使用插件來實現這一點，而不是破解管理模板文件。

我嘗試過使用一些操作來回顯一些腳本標簽，但似乎不是這樣。

Answer 1

使用admin_enqueue_scripts操作和wp_enqueue_script方法將自定義腳本添加到管理界面。

這假設您的插件文件夾中有myscript.js 。 相應地改變。 my_custom_script句柄對於您的模塊和腳本應該是唯一的。

function my_enqueue($hook) {
    // Only add to the edit.php admin page.
    // See WP docs.
    if ('edit.php' !== $hook) {
        return;
    }
    wp_enqueue_script('my_custom_script', plugin_dir_url(__FILE__) . '/myscript.js');
}

add_action('admin_enqueue_scripts', 'my_enqueue');

Answer 2

你的functions.php文件有一個片段：

function custom_admin_js() {
    $url = get_bloginfo('template_directory') . '/js/wp-admin.js';
    echo '"<script type="text/javascript" src="'. $url . '"></script>"';
}
add_action('admin_footer', 'custom_admin_js');

在 Wordpress 3.2.1 上運行良好。

Answer 3

<?php
function add_jquery_data() {
    global $parent_file;

    if ( isset( $_GET['action'] ) && $_GET['action'] == 'edit' && isset( $_GET['post'] ) && $parent_file == 'edit.php') {
    // Do some stuff.
    }
}

add_filter('admin_head', 'add_jquery_data');

?>

Answer 4

admin_enqueue_scripts和wp_enqueue_script是將 javascript 文件添加到儀表板的首選方式。

// I'm using an anonymous function for brevity.
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_script( 'handle', plugin_dir_url( __FILE__ ) . '/script.js' );
} );

但是，如果您想使用 PHP 函數輸出 javascript，則wp_add_inline_script似乎不起作用。 相反，您可以使用admin_print_scripts直接回顯腳本，包括腳本標簽本身。 只需確保將優先級設置為高，以便在任何必需的庫（例如jQuery之后加載。

add_action( 'admin_print_scripts', function() {
    // I'm using NOWDOC notation to allow line breaks and unescaped quotation marks.
    echo <<<'EOT'
<script type="text/javascript">
jQuery(function($){
    // Do stuff here.
});
</script>
EOT;
}, PHP_INT_MAX );

Answer 5

如果您想花哨並過濾要加載文件的位置，最好使用get_current_screen 。

function myproject_admin_enqueue() {

    $screen = get_current_screen();

    // load on the NEW and EDIT screens of all post types
    if ( 'post' === $screen->base ) {
        wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'all-admin.js');
    }

    // load on the NEW and EDIT screens of one post type
    if ( 'post' === $screen->base && 'myposttype' === $screen->post_type ) {
        wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'mypostype-admin.js');
    }

    // load only when adding a NEW post, not when editing an existing one.
    if ( 'post' === $screen->base && 'add' === $screen->action ) {
        wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'new-admin.js');
    }

}
add_action('admin_enqueue_scripts', 'myproject_admin_enqueue');

Answer 6

直接將wp_enqueue_script添加到您的代碼中不會在新版本的 Wordpress（5.0 以上）中包含該腳本。 更好的方法是首先使用wp_register_script注冊腳本以創建一個句柄，然后將該句柄入隊。

function custom_script_in_admin($hook) {
    if ('edit.php' !== $hook) {
        return;
    }
    wp_register_script( 'custom_handle_name',plugin_dir_url( __FILE__ ) . '/script.js', '',true );
    wp_enqueue_script('custom_handle_name');
}

add_action('admin_enqueue_scripts', 'custom_script_in_admin');

Answer 7

不知何故，接受的答案對我不起作用。 這是我在答案中沒有找到的另一個解決方案，這就是為我所做的，WP 5.x，為我的后端添加了一些 css 和 js...

function suedsicht_theme_add_editor_assets() {
  wp_enqueue_style( 'custom-gutenberg-stylesheet', get_template_directory_uri() . '/css/custom-editor-style.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
  wp_enqueue_script('suedsicht-admin-js', get_template_directory_uri() . '/js/admin.js');
}
add_action( 'enqueue_block_editor_assets', 'suedsicht_theme_add_editor_assets' );

Answer 8

通過使用admin enqueue 腳本掛鈎，您可以輕松地為管理面板添加腳本文件。

function custom_admin_js() {

wp_enqueue_script( 'custom_wp_admin_js', get_template_directory_uri() . '/new-assets/js/admin_section.js', false, '1.0.0' );
wp_enqueue_script( 'custom_wp_admin_js' );
}

add_action('admin_enqueue_scripts', 'custom_admin_js');