html 如何在PHP文档中使用外部JavaScript文件?

yyhrrdl8  于 2022-11-27  发布在  PHP
关注(0)|答案(6)|浏览(147)

我的JavaScript文件似乎没有链接到我的PHP文件。
我正在建立一个WordPress网站。我有header.php和调用这个header.php文件包括
在我的main.php文件中。我在header.php的head标签中添加了JS路径,但是它看起来不起作用(我添加的JS文件是用于carousel的,但是没有改变任何东西)。我刚刚开始学习,所以我甚至不能猜到我在这里做错了什么。我该怎么做才能链接我的JS文件呢?

  • header.php、main.php和js文件夹位于根文件夹中。Javascript文件位于js文件夹中。

--这就是我如何链接header.php.中的JS文件。

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="js/Jquery.js"></script>
    <script type="text/javascript" src="js/lightslider.js"></script>
    <?php wp_head(); ?>
</head>
noj0wjuj

noj0wjuj1#

在WordPress中,您可以通过WordPress主题或插件添加JavaScript文件。
要从WordPress主题链接JS,您可以用途:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

类似地,从WordPress主题链接CSS,你可以用途:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

详细用法可在here中找到。
对于WordPress插件,您可以在主主题文件中添加以下内容:

add_action('wp_enqueue_scripts','init');

function init() {
    wp_enqueue_script( 'test-js', plugins_url( '/js/test.js', __FILE__ ));
}

正如上面的注解中提到的,您不应该在没有仔细考虑的情况下使用jQuery。

o3imoua4

o3imoua42#

要解决此问题,您可以尝试在页面末尾添加该脚本,然后尝试以下操作

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script  src="js/Jquery.js"></script>
    <script  src="js/lightslider.js"></script>
    <?php wp_head(); ?>
</head>

刚刚移除

type="text/javascript"

从它,它肯定会工作

3qpi33ja

3qpi33ja3#

每当你添加任何JS文件时,在www.example.com之后添加一些唯一的数字函数extension.you就可以使用时间戳,因为它每次都在改变。
如下所示。(示例适用于PHP和Javascript
因为cache,有时候你的代码不会改变。

<script src="my_js_file.js?v=<?=time()?>" ></script>

此外,如果你是windows用户,只需按CTRL + SHIFT + R键硬刷新浏览器,以清除缓存

ars1skjm

ars1skjm4#

你能不能试着在前面放一个slash字符来构成一个绝对路径,如下所示:

<script type="text/javascript" src="/js/Jquery.js"></script>
<script type="text/javascript" src="/js/lightslider.js"></script>
h9a6wy2h

h9a6wy2h5#

将js文件添加到WordPress主题的正确方法是在functions.php中查询它们,如下所示

wp_enqueue_script ('jquery', get_template_directory_uri() . '/js/jquery.js', '', '3.3.1', true);
wp_enqueue_script ('globaljs', get_template_directory_uri() . '/js/main.js', '', '', true);

你也不需要添加自己的jQuery,因为WordPress已经附带了jQuery。你所需要做的就是这样调用它:

wp_enqueue_script ('jquery');

您可以在此处阅读有关参数的更多信息:https://developer.wordpress.org/reference/functions/wp_enqueue_script/

luaexgnf

luaexgnf6#

您需要将该js文件加入主题的functions.php文件中。

function my_load_scripts($hook) {

    // create my own version codes
    $my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
    $my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
    
    // 
    **wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );**
    wp_register_style( 'my_css',    plugins_url( 'style.css',    __FILE__ ), false,   $my_css_ver );
    wp_enqueue_style ( 'my_css' );

}
add_action('wp_enqueue_scripts', 'my_load_scripts');

相关问题