Question

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

当文件是本地文件时，我只需拨打anyPlus.src = "solarZoom.png";。

我尝试了很多方法，无法弄清楚如何在我的服务器上从文件路径获取图像。我尝试了/powerbox/Tour/solarZoom.png，../Tour/solarZoom.png，Tour/solarZoom.png，/Tour/solarZoom.png，/solarZoom.png。

在我的风格中，我将其称为“../Tour/solarZoom.png”，但它无法在javascript中使用。

我附上了我的等级图片。我的根是/powerbox/index.php。

enter image description here

Answer 1

使用wp_enqueue_scripts将您的JavaScript排入队列，并通过wp_localize_script传递正确的网址。

像这样：

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 + '" />');
});

创建

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

Answer 2

根据我可以收集的有关您的问题的所有信息，我只能通过以下方式解决：

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

进入<head> - 标记。现在，您在变量ABSPATH中拥有了Template-URL-prefix。更改位于此处的功能hotSpotFunc(part)：第24行http://frankfusion.com/powerbox/wp-content/themes/powerbox/Tour/javascript.js：

anyPlus.src="http://frankfusion.com/powerbox/wp-content/themes/powerbox/"+imgName;

现在必须

anyPlus.src=ABSPATH+imgName;

然后它应该可以在没有硬编码模板URL的情况下正常工作。

值得一提的是其他一些事情：

every wordpress theme has a header.php - file这些东西应该去哪里。阅读有关WP主题开发的内容：http://codex.wordpress.org/Theme_Development
Do not use global variables or global function names正如您现在在javascript中所做的那样。
在wordpress - 文件夹中创建一个可靠的结构。你真的需要这个项目的儿童主题吗？现在看起来有点乱。
目前的“解决方案”很脏。使用@brasofilo的建议，因为他出现了一个干净的解决方案。

Answer 3

试试这个，在你的标题中定义上面所有将引用你的图像的脚本......

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

现在，当引用图像时anyPlus.src = ABSPATH + "/Tour/solarZoom.png";

Wordpress Javascript文件SRC文件路径

3 个答案: