Question

我制作了一个小的jQuery脚本来从其他文件导入值，并将这些值作为自定义元标记插入到WordPress POST页面中。

当我创建新帖子时，表单显示在帖子内容区域下方，并且每件事都是100％工作。

问题如果按“编辑帖子”按钮/链接，则会加载“帖子编辑”页面，但不会显示任何内容。只是一个白色的屏幕加载，所以我不能编辑这篇文章。

这是我的剧本：

<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之后）：

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

然后编辑帖子页面工作但我无法使用我的自定义表单/按钮。

我的问题是：如何在不与WordPress编辑帖子页面发生任何冲突的情况下加载此脚本？

如果我删除：

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

从我的脚本然后所有页面加载正常，但我的自定义表单/按钮不起作用。

最新消息：我正在努力工作：D：D：D 只是测试我应该何时何地加载此脚本以成功获得我的结果。我开始编辑/wp-admin/admin-header.php（我知道它不建议编辑CORE文件，但我只是为debuggig做！）首先，我插入了我在第1行使用的jQuery脚本，然后打开

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

然后我去了 POST NEW 页面，我可以看到一些不同的字体大小，但我想要的功能就在那里，我可以使用我的按钮。所以我打开了 EDIT POST 页面，我可以看到编辑页面！现在编辑页面也在工作。最后，我想出如果我在LINE 59 in /wp-admin/admin-header.php开始插入这个jQuery脚本，那么每个都可以100％：D设计CSS看起来不错，功能就在那里！

现在我需要帮助将此脚本插入/粘贴到admin-header.php中的第59行。如何使用functions.php执行此操作？

Answer 1

首先，编辑wordpress核心似乎是一件坏事。但是如果你想这样做，请不要再包含jQuery。并且不要使用$符号，请参阅此示例：

jQuery(".SomeClass").click(function(){
    console.log("Some Text");
});

//Therefore you could do something like this
<script type="text/javascript">
  jQuery(document).ready(function() {
       jQuery('.button-test-class').click(function() {
             //Do what you want here, for this we'll write some text to the console
             console.log("Some Text");
        });
  });
</script>

<input type="button" class="button-test-class button" value="Button Test">

Answer 2

如何添加脚本WordPress方式：

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()结合使用：

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

应工作，但我还没有测试过。

此代码可以放在您主题的functions.php文件中，也可以放在write a custom plugin中，以便它可以在任何未来的主题更改中保留。

参考

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

jQuery冲突！在Word编辑的POST EDIT页面上显示白屏

2 个答案:

参考