Wordpress 中的 JavaScript - 无法调用函数

Question

过去 2 天我搜索了 StackOverflow，但没有找到解决此问题的方法。我正在尝试做一些非常基本的事情，但 WordPress 让我把头发拉了出来。

我有一个名为“test.js”的 JavaScript 文件，它位于我的子主题文件夹内的一个名为脚本的文件夹中。该文件有以下代码：

function myFunc() {
 alert('hi');
}

我遵循了在 Wordpress 中加载 JavaScript 的最佳做法，并且我在子主题文件夹的 functions.php 文件中包含了以下函数。

function add_my_script() {
wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    }
add_action('init', 'add_my_script');

注意：get_stylesheet 用于获取子主题目录，因为这是我的 style.css 所在的位置，它根据 Wordpress 的子主题规则覆盖我的父主题中的 style.css。

现在，在这样做之后，我希望可以访问我的 test.js 文件中的函数 myFunc()。 因此，在我的 function.php 文件中，我有一个函数 TestmyFunc() 执行以下操作：

function TestmyFunc()
{
echo 'Click the button below';
echo '<button onclick="myFunc()">Click Me</button>';
}

当某个页面加载时，Wordpress 中会调用函数 TestmyFunc()。页面加载完美，打印输出“单击下面的按钮”，并且显示“单击我”的按钮也在那里。现在这是令人沮丧的部分，无论我做什么，单击按钮都无法响应。完全没有。

我的第一个想法是 JavaScript 没有加载，我的 wp_enqueue_script 代码有问题。不过这不是问题。

我尝试了以下更改。首先，我将 test.js 文件修改为这一行：

alert('hi');

然后我只是在我的functions.php文件中编写了以下函数：

    function run_my_script() {
    wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    
        }
add_action('init', 'add_my_script');

run_my_script 然后设置为在我的页面中加载，与加载 TestmyFunc() 的方式相同。这似乎工作正常，当我在 WordPress 中的页面加载 run_my_script() 函数时，我会在页面加载后立即收到一个警告框，显示“嗨”。显然这不是我想要的，因为我希望它仅在单击按钮时显示，这需要从 test.js 文件调用的函数，而不仅仅是运行 test.js 脚本。

所以我调用 JavaScript 函数的方式似乎有问题？如果有人能以任何方式提供帮助，那就太好了。

我根本无法使用 wp_enqueue_script 让调用的 JavaSript 函数工作，它唯一工作的时候是当我按照本教程 http://lorelle.wordpress.com/2005/09/16/using-javascript-in-wordpress/ 以老式/非 WordPress 推荐的方式加载我的脚本时@

这涉及到在 header.php 中包含这个：

<script src="<?php echo get_stylesheet_directory_uri(); ?>/scripts/test.js" type="text/javascript"></script>

然后调用functions.php中的函数

echo'
   <script type="text/javascript">
   <!--
   myFunc();
   //--></script>';

这很有效，并且 myFunc() 按调用运行。但是，我不想编辑我的 header.php 文件，而是更喜欢使用最佳实践 wp_enqueue_script 方法。

我真的希望有人能提供帮助，因为在过去的 48 小时里我几乎没有睡觉，尝试了所有可能的事情并最终完全沮丧。

Answer 1

简单清单：

• 检查您的源代码。确保脚本已在您的浏览器中输出。确保网址正确。

• wp_enqueue_scripts 您的初始化操作错误，改为：wp_enqueue_scripts。尽管您的代码可能有效，但它被认为是使用 wp_enqueue_scripts 的最佳实践。

应该是：

add_action('wp_enqueue_scripts', 'run_my_script');

• wp_head();和 wp_footer(); 确保您的子主题/父主题具有以下标签：wp_head(); 和 wp_footer();

• $in_footer 您可能需要将 $in_footer 参数更改为 false。在标题中输出脚本。换句话说，请确保在调用标记之前启动您的函数。

希望对你有帮助！