简体   繁体   English

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

[英]How to use external JavaScript file in PHP documents?

My JavaScript files don't seem like it is linked to my PHP file.我的 JavaScript 文件似乎没有链接到我的 PHP 文件。

I am building a WordPress website.我正在建立一个 WordPress 网站。 I have header.php and calling this header.php file by including我有 header.php 并通过包含调用此 header.php 文件

in my main.php file. 在我的 main.php 文件中。 I added JS path in the head tag in header.php, but it doesn't seem like it's working(the JS files I added are for a carousel, but does not change anything). 我在 header.php 的 head 标签中添加了 JS 路径,但它似乎不起作用(我添加的 JS 文件是用于轮播,但没有改变任何东西)。 I just started learning so I can't even guess what I am doing wrong here. 我刚刚开始学习,所以我什至无法猜测我在这里做错了什么。 What can I do to link my JS files? 我可以做什么来链接我的 JS 文件?
  • header.php, main.php, and js folder are in the root folder. header.php、main.php、js文件夹在根文件夹下。 Javascript files are in the js folder. Javascript个文件在js文件夹中。

-- This is how I linked JS file in header.php. -- 这就是我在 header.php 中链接 JS 文件的方式。 inside of the head tag头标签里面

<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>

to fix this you can try adding that script at the end of the page and try this instead要解决此问题,您可以尝试在页面末尾添加该脚本并改为尝试

<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>

just removed刚刚删除

type="text/javascript"

from it and it will work for sure从它开始,它肯定会起作用

whenever you add any JS file add some unique number function after the extension.you can use timestamp because it change everytime.每当您添加任何 JS 文件时,在扩展名后添加一些唯一编号 function。您可以使用时间戳,因为它每次都会更改。

Just like following.( example is for PHP & Javascript )就像下面一样。(示例适用于 PHP 和 Javascript

Because of cache sometimes it happens that your code doesn't change.由于cache ,有时会发生您的代码没有更改的情况。

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

also if you are windows user just press CTRL + SHIFT + R key to hard refresh the browser to clear cache另外,如果您是 windows 用户,只需按CTRL + SHIFT + R键硬刷新浏览器以清除缓存

Can you please try to put a slash character in the front to make an absolute path like so:你能不能试着在前面放一个slash字符来制作一个绝对路径,如下所示:

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

In WordPress, you can either add JavaScript files via a WordPress theme or plugin.在 WordPress 中,您可以通过 WordPress 主题或插件添加 JavaScript 个文件。

To link the JS from WordPress theme, you can use:要链接 WordPress 主题的 JS,您可以使用:

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

Similiarly, to link CSS from WordPress theme, you can use:同样,要从 WordPress 主题链接 CSS,您可以使用:

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

Detailed usage can be found here .详细用法可以在这里找到。


For WordPress plugins, you can add the following in your main theme file:对于 WordPress 插件,您可以在主主题文件中添加以下内容:

add_action('wp_enqueue_scripts','init');

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

As mentioned in the comment above, you shouldn't include jQuery without careful consideration.如上面的评论所述,未经仔细考虑,您不应包含 jQuery。

The correct way of adding js files to your WordPress theme is enquing them in functions.php like below将 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);

You also don't need to add your own jQuery since WordPress ships with jQuery already.您也不需要添加自己的 jQuery,因为 jQuery 已经附带了 WordPress。 All you need to do is call it like so:您需要做的就是这样称呼它:

wp_enqueue_script ('jquery');

You can read more about the parameters here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/您可以在此处阅读有关参数的更多信息: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

You need to enqueue that js file in your theme's functions.php file.您需要将该 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');

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM