如何将自定义 javascript 添加到 WordPress 管理员?

Posted

技术标签:

【中文标题】如何将自定义 javascript 添加到 WordPress 管理员?【英文标题】:How to add custom javascript to WordPress Admin? 【发布时间】:2011-03-20 14:39:00 【问题描述】:

我想向编辑帖子页面添加一些自定义 jquery 代码,这非常简单,例如当有人按下发布时显示一个 div。

唯一的限制是我想通过使用插件来实现这一点,而不是破解管理模板文件。

我尝试过使用一些操作来回显一些脚本标签,但似乎不是这样。

【问题讨论】:

【参考方案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');

【讨论】:

这是当前 WordPress 版本的正确答案(示例直接来自 WordPress Codex)。 我应该将此代码放在哪个文件中?这段代码应该放在文件的什么位置? 我也在尝试这个,但无法让它工作(或者没有时间对它大惊小怪)。幸运的是,这个插件做了我需要的:添加管理员 javascript:wordpress.org/plugins/add-admin-javascript 你为什么把这个条件和'edit.php'放在一起?这是什么意思? @蒂姆 @AlexandreSchmidt 看到这个出色的答案:***.com/a/40392064/698511【参考方案2】:

你的functions.php文件有一个sn-p:

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 上运行良好。

【讨论】:

我把它放在我的主题中,这样我就可以加载一些 jQuery 代码来隐藏管理栏的某些部分,我不希望我的客户搞乱,搞砸网站。看,我正在使用 PODS 插件获取内容和自定义主题。 @KuldeepDaftary 也许你可以通过一个函数来激活你的自定义 JS,它会在页面和 jQuery 加载后触发? 这是添加脚本的错误方法。您应该将脚本加入队列,如Tim's answer 所示。 很好的例子,我喜欢干脆把'. $url .'去掉,直接在里面写JS,省去了在管理区加载另一个JS文件。【参考方案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');

?>

【讨论】:

非常感谢,这正是我一直在寻找的。反正我用过 admin_footer 。但是,有没有办法在新帖子/编辑帖子上加载内容only 好吧,如果你也想要它用于新的帖子页面,你可以试试这个: 【参考方案4】:

admin_enqueue_scriptswp_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 );

【讨论】:

【参考方案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');

【讨论】:

【参考方案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');

【讨论】:

【参考方案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' );

【讨论】:

以上是关于如何将自定义 javascript 添加到 WordPress 管理员?的主要内容,如果未能解决你的问题,请参考以下文章

javascript 将自定义CSS添加到iFrame(未经测试)

javascript 将自定义CSS添加到iFrame(未经测试)

javascript 将自定义CSS添加到iFrame(未经测试)

将自定义JavaScript从帖子添加到

将自定义javascript添加到nested_form(Rails)

javascript 使用YoastJS将自定义字段中的内容添加到Yoast SEO分析中