无法让javascript和Jquery在functions.php中工作

Posted

技术标签:

【中文标题】无法让javascript和Jquery在functions.php中工作【英文标题】:Cant get javascript and Jquery to work in functions.php 【发布时间】:2020-03-14 00:23:37 【问题描述】:

这是我的第一篇文章!

我对编码有点陌生,我知道足够多的 html 和 css,并使用诸如 bootstrap 之类的框架来开发一个基本的网站,并且已经开始学习如何使用 php 在 wordpress 中构建主题。

我的目标是使用 bootstrap 和 javascript 构建一个主题,但我在执行最简单的任务时遇到了麻烦,例如让脚本在 functions.php 中运行。我一直在关注一些在线教程,但这些教程不起作用,经过大量的实验和研究,我似乎无法得到任何工作。

我的functions.php代码是:

<?php

function styles() 
    wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    $dependencies = array('bootstrap');
    wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );

    wp_register_style('style', get_template_directory_uri() . 'style.css');
    $dependencies = array('style');
    wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);

add_action( 'wp_enqueue_scripts', 'styles' );



function scripts() 

    wp_deregister_script('jquery3.4.1');
    wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . 'jquery-3.4.1.min.js', '', 1, true);

    $dependencies = array('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );

    wp_enqueue_script('customjs', get_template_directory_uri() . 'scripts.js', '', 1, true);


add_action( 'wp_enqueue_scripts', 'scripts' );


function title()
    add_theme_support( 'title-tag' );

add_action( 'after_setup_theme', 'title' );


?>


我有一段测试代码,它在 scripts.js 中显示一个弹出警报(页脚正在调用 ?php wp_footer();?):

$(document).ready(function()
    alert('test');
)

我还尝试过加载顺序,认为引导 js 可能会干扰我自己的 js,但无论我如何定位它们,我都无法让它们工作。

抱歉,如果这是一个愚蠢的问题,并且以前曾有人问过这个问题,但我没有查到似乎没有任何帮助,我们将不胜感激。

非常感谢!

【问题讨论】:

【参考方案1】:

您可能需要用 jQuery 替换 javascript 中的 $。 jQuery 在 WP 中默认处于兼容模式。这意味着 jQuery 的典型 $ 快捷方式不起作用。

 jQuery(document).ready(function()
     alert('test');
 )

【讨论】:

嗨 mediaguru,很遗憾没有,这似乎并没有改变任何东西,但感谢您的回复【参考方案2】:

好的,找到问题了...

使用控制台,我可以看到它找不到文件的路径,但我不知道为什么,因为它正在拉动样式而不是脚本。

然后我回到我的代码并意识到我链接到的文件上没有根。

使用 atom 作为我的文本编辑器,我在项目路径上单击鼠标右键并复制项目路径,该路径没有拉过路径的根(IE 只拉过 scripts.js 而不是 /scripts.js)。

一旦我在所有链接的文件上加上正斜杠,一切都已修复。

如此简单的修复,像我这样的新手现在不会忘记!

这里是任何有兴趣的人的最终工作代码:

<?php



function styles() 

    wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
    $dependencies = array('bootstrap');
    wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );

    wp_register_style('style', get_template_directory_uri() . '/style.css');
    $dependencies = array('style');
    wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);

add_action( 'wp_enqueue_scripts', 'styles' );



function scripts() 

    wp_deregister_script('jquery3.4.1');
    wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . '/jquery-3.4.1.min.js', '', 1, true);

    $dependencies = array('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );

    wp_enqueue_script('customjs', get_template_directory_uri() . '/scripts.js', '', 1, true);


add_action( 'wp_enqueue_scripts', 'scripts' );


function title()
    add_theme_support( 'title-tag' );

add_action( 'after_setup_theme', 'title' );


?>

【讨论】:

以上是关于无法让javascript和Jquery在functions.php中工作的主要内容,如果未能解决你的问题,请参考以下文章

javascript jquery ready func

无法让 jQuery-ui 选择菜单呈现

使用 Javascript/jQuery 更改 Telerik RadEditor 的值

如何使用 jquery 的 animate 方法使 div 来回移动

Jquery .change 检查脏表单

jQuery、JavaScript 中变量和函数的 1 个字母名称