Php Wordpress Javascript文件SRC文件路径

在我的Wordpress站点中，我使用了一些JavaScript代码作为交互部分

当文件是本地文件时，我只调用

anyPlus.src=“solarZoom.png”

我已经尝试了很多方法，但不知道如何从文件路径获取图像，一旦它在我的服务器上。我尝试了
/powerbox/Tour/solarZoom.png
，
/Tour/solarZoom.png
，
Tour/solarZoom.png
，
/Tour/solarZoom.png

在我的风格中，我将它称为“
。/Tour/solarZoom.png
”，但它在javascript中不起作用

我已附加了我的层次结构的图像。我的根目录是/powerbox/index.php

使用将JavaScript排队，并传递正确的URL

像这样：

add_action( 'wp_enqueue_scripts', 'b5f_enqueue_scripts' );

function b5f_enqueue_scripts()
{
    wp_register_script(
        'tour-script', // Handle
        get_stylesheet_directory_uri() . '/Tour/javascript.js', // File url
        array( 'jquery' ) // Dependencies
    );
    wp_enqueue_script( 'tour-script' );
    wp_localize_script( 
        'tour-script', 
        'localize_vars', 
        array( 
            'url' => get_stylesheet_directory_uri(),
            'path' => get_stylesheet_directory(),
            'solar' => get_stylesheet_directory_uri() . '/Tour/solarZoom.png'
        ) 
    );
}

在
javascript.js
文件中：

jQuery(document).ready(function($) {  
    console.log( localize_vars.url ); 
    $("body").prepend('<img src="'+ localize_vars.solar + '" />');
});

jQuery（document）.ready（函数（$）{
log（localize_vars.url）；
$（“正文”）。前缀（“”）；
});

创建
wp\u localize\u脚本
是为了将翻译后的字符串传递给JavaScript文件，但它可以用来传递任何真正的内容。只需使用其他数据填充该数组，并在JS变量中访问它，数据

使用JavaScript排队，并传递正确的URL

像这样：

add_action( 'wp_enqueue_scripts', 'b5f_enqueue_scripts' );

function b5f_enqueue_scripts()
{
    wp_register_script(
        'tour-script', // Handle
        get_stylesheet_directory_uri() . '/Tour/javascript.js', // File url
        array( 'jquery' ) // Dependencies
    );
    wp_enqueue_script( 'tour-script' );
    wp_localize_script( 
        'tour-script', 
        'localize_vars', 
        array( 
            'url' => get_stylesheet_directory_uri(),
            'path' => get_stylesheet_directory(),
            'solar' => get_stylesheet_directory_uri() . '/Tour/solarZoom.png'
        ) 
    );
}

在

javascript.js

文件中：

jQuery(document).ready(function($) {  
    console.log( localize_vars.url ); 
    $("body").prepend('<img src="'+ localize_vars.solar + '" />');
});

jQuery（document）.ready（函数（$）{
log（localize_vars.url）；
$（“正文”）。前缀（“”）；
});

---

创建

wp\u localize\u脚本

是为了将翻译后的字符串传递给JavaScript文件，但它可以用来传递任何真正的内容。只需用其他数据填充该数组，并在JS变量中访问它。

localize\u vars.data

试试这个，在你的标题中首先定义所有引用你的图像的脚本

<script type="text/javascript">
    var ABSPATH = "<?php bloginfo('template_url'); ?>";
</script>

var ABSPATH=“”；

---

现在，在引用图像时，请执行以下操作：do

anyPlus.src=ABSPATH+“/Tour/solarZoom.png”
试试这个，在你的标题中，首先定义所有引用你的图像的脚本

<script type="text/javascript">
    var ABSPATH = "<?php bloginfo('template_url'); ?>";
</script>


var ABSPATH=“”；

现在，在引用图像时，请执行以下操作：do
anyPlus.src=ABSPATH+“/Tour/solarZoom.png”
关于你的问题，我能收集到的所有信息，我只能通过以下方式解决：

将index.php文件放在javascript.js文件所在的同一级别上，添加

<script>var ABSPATH = "<?php bloginfo('template_url'); ?>/";</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Tour/javascript.js"></script>

一定是现在

anyPlus.src=ABSPATH+imgName;

然后，它应该在不硬编码模板url的情况下工作，因为您现在已经有了它

值得一提的还有：

这些东西应该放在哪里。阅读有关WP主题开发的内容：
正如您现在在javascript中所做的那样
在你的wordpress文件夹中建立一个坚实的结构。你真的需要这个项目的子主题吗？现在看起来有点乱
当前的“解决方案”是肮脏的。使用@brasofilo的建议，因为他展示了一个干净的解决方案
我收集了所有关于您问题的信息，我只能通过以下方式解决：

将index.php文件放在javascript.js文件所在的同一级别上，添加

<script>var ABSPATH = "<?php bloginfo('template_url'); ?>/";</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Tour/javascript.js"></script>

一定是现在

anyPlus.src=ABSPATH+imgName;

然后，它应该在不硬编码模板url的情况下工作，因为您现在已经有了它

值得一提的还有：

这些东西应该放在哪里。阅读有关WP主题开发的内容：
正如您现在在javascript中所做的那样
在你的wordpress文件夹中建立一个坚实的结构。你真的需要这个项目的子主题吗？现在看起来有点乱
当前的“解决方案”是肮脏的。使用@brasofilo的建议，因为他展示了一个干净的解决方案
/powerbox/Tour/solarZoom.png不起作用？不起作用。我尝试了/powerbox/Tour/solarZoom.png、../Tour/solarZoom.png、Tour/solarZoom.png、/Tour/solarZoom.png、/solarZoom.png、/solarZoom.png。尝试使用
$\u服务器['DOCUMENT\u ROOT'].“/path”
和其他参数，然后查看yields@BDGapps因此，模板文件夹的绝对路径是
/wp content/themes/powerbox
？@BDGapps根据文件层次结构，您在问题中引用的js和css文件的位置是什么？（例如，对于您提到的css文件，“在我的风格中，我将其称为…”，但您没有在文件层次结构图像中指明引用图像的实际css和js文件）。/powerbox/Tour/solarZoom.png不起作用？不起作用。我尝试了/powerbox/Tour/solarZoom.png、../Tour/solarZoom.png、Tour/solarZoom.png、/Tour/solarZoom.png、/solarZoom.png、/solarZoom.png。尝试使用
$\u服务器['DOCUMENT\u ROOT'].“/path”
和其他参数，然后查看yields@BDGapps因此，模板文件夹的绝对路径是
/wp content/themes/powerbox
？@BDGapps根据文件层次结构，您在问题中引用的js和css文件的位置是什么？（例如，对于您提到的css文件“在我的样式中，我将其称为…”，但您没有指出您在文件层次结构图像中引用图像的实际css和js文件）。因此，我会这样做：anyPlus.src=localize_vars.url+'/Tour/solarZoom.png'如何检查？我有一个角色，当我将鼠标悬停在上面时，图像会放大，然后更改为solarZoom.png；它没有做任何事情我只是检查了firefox中的开发，收到了referenceError:localize_vars不是defined@BDGapps，我更新了答案，将jQuery作为一个依赖项，并使用了一个工作示例。我测试了在TwentyEleven的
functions.php
文件中添加
wp\u enqueue\u脚本，并在
/wp content/themes/TwentyEleven/Tour/*.
中创建JS和PNG文件。对我有用，希望有帮助。所以我做了：anyPlus.src=localize_vars.url+'/Tour/solarZoom.png'我该怎么检查？我有一个角色，当我将鼠标悬停在上面时，图像会放大，然后更改为solarZoom.png