jQuery冲突！在WordPress的POST EDIT页面上显示白屏 [英] jQuery conflict! Shows White Screen on POST EDIT page for WordPress

问题描述

我制作了一个小的jQuery脚本，用于从其他文件导入值，并将此值作为自定义元标记插入WordPress POST页面.

I have a made a small jQuery script to import values from other file and insert this values in WordPress POST page as Custom Meta Tags.

当我创建新帖子时，表单显示在帖子"内容区域下方，并且所有内容均可100％工作.

When I Create A New Post the form is shown below the Post content area and every thing works 100%.

问题是，如果我按下编辑帖子"按钮/链接，则它将加载帖子编辑"页面，但未显示任何内容.只是加载了一个白色屏幕，所以我无法编辑此帖子.

The problem is if I press "Edit Post" Button/link then it loads the Post Edit page but nothing is shown. Just a White screen loads, so I cant Edit this Post.

这是我的剧本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<input name="file" type="text" id="file">
<script type="text/javascript">
    $(document).ready(function() {
        $('.button').click(function() {
            var val = $('#file').val();
            $.get('import.php', {file: val}, function(data) {            
                result = $.parseJSON(data);
                $("input[name='nick_name']").val(result.name);
                $("input[name='work_city']").val(result.location);

            });
        });
    });
    </script>

<input type="button" class="button" value="GET/IMPORT">

我还尝试添加此脚本(在jquery.min.js之后):

I also tried to add this script (after jquery.min.js):

<script type="text/javascript">
$.noConflict(true);
</script>

然后编辑帖子"页面有效，但是我无法使用自定义表单/按钮.

Then Edit Post page worked but I could not use my custom form/button.

我的问题是:如何在不与WordPress编辑帖子页面冲突的情况下加载此脚本?

My question is: How can I load this Script without getting any conflict with WordPress Edit Post page?

如果我删除:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

然后从我的脚本中加载所有页面，但我的自定义表格/按钮不起作用.

From my script then All pages load OK but then my custom made form/button don't work.

最新更新:我正在处理:D:D:D 只是测试何时或在何处加载此脚本以成功获得结果.我开始编辑/wp-admin/admin-header.php(我知道不建议您编辑CORE文件，但我只是为了debuggig这样做！)首先，我在打开第1行时插入了Im在第1行上使用的jQuery脚本.

LATEST UPDATE: I GOT IT WORKING :D :D :D Just testing when or where I should load this script to get my results successfully. I started editing /wp-admin/admin-header.php (I know its NOT recommended to edit CORE files but Im just doing it for debuggig!) First of all I inserted the jQuery script that Im using on Line 1 before opening of

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

然后我进入 POST NEW 页面，我可以看到一些不同的字体大小，但是想要的功能在那里，可以使用我的按钮.因此，我打开了 EDIT POST 页面，然后可以看到EDIT PAGE！现在，EDIT PAGE也可以正常工作.最后，我弄清楚了如果我在LINE 59 in /wp-admin/admin-header.php开头插入此jQuery脚本，那么一切都能正常工作100％:D设计CSS看起来不错，并且功能在那里！

Then I went to POST NEW page, I could see some different in font sizes but the function I wanted was there, I could use my button. So I opened EDIT POST page and I could see the EDIT PAGE! Now EDIT PAGE is working also. Finally I figured out if I insert this jQuery script in beginning on LINE 59 in /wp-admin/admin-header.php then every thing works 100% :D The design CSS looks good and the functionality is there!

现在，我需要帮助将此脚本插入/粘贴到admin-header.php中的LINE 59中，该如何使用functions.php来做到这一点?

Now I need help to insert/paste this script to LINE 59 in admin-header.php How can I do that using functions.php?

推荐答案

如何添加脚本WordPress方式:

How to add scripts The WordPress Way:

add_action( 'wp_enqueue_scripts', 'pjso_my_scripts' );
function pjso_my_scripts() {
    $handle = 'script_name';
    $src = '/path/to/script.js';
    $deps = array( 
        'jquery',
    );
    // add any other dependencies to the array, using their $handle
    $ver = 'x.x';  // if you leave this NULL, 
                   // then it'll use WordPress's version number
    $in_footer = true; // if you want it to load in the page footer
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}

要仅在后端的编辑帖子"屏幕上执行此操作，可以将admin_enqueue_scripts挂钩与get_current_screen()结合使用:

To do it only on the Edit Post screen in the backend, you can use the admin_enqueue_scripts hook combined with get_current_screen():

add_action( 'admin_enqueue_scripts', 'pjso_my_scripts' );
function pjso_my_scripts() {
    $screen = get_current_screen();
    if( 'post' != $screen->base || 'edit' != $screen->parent_base ) {
        return; // bail out if we're not on an Edit Post screen
    }
    $handle = 'script_name';
    $src = '/path/to/script.js';
    $deps = array( 
        'jquery',
    );
    // add any other dependencies to the array, using their $handle
    $ver = 'x.x';  // if you leave this NULL, 
                   // then it'll use WordPress's version number
    $in_footer = true; // if you want it to load in the page footer
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}

该应该有效，尽管我尚未对其进行测试.

That should work, though I haven't tested it.

此代码可以放入主题的functions.php文件中，也可以编写自定义插件，它将在以后的任何主题更改中保持不变.

This code can go in your theme's functions.php file, or you could write a custom plugin so that it will persist across any future theme changes.

• wp_enqueue_script() -注意WP自动加载的脚本列表，其中包括jQuery
• get_current_screen()

这篇关于jQuery冲突！在WordPress的POST EDIT页面上显示白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！