0

在我的 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。

在此处输入图像描述

4

3 回答 3

2

使用 将您的 JavaScript 排入队列wp_enqueue_scripts并通过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。

于 2013-08-19T00:08:01.587 回答
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>- 标签。现在，您的 Template-URL-prefix 在变量中ABSPATH。更改hotSpotFunc(part)位于此处的函数：http: //frankfusion.com/powerbox/wp-content/themes/powerbox/Tour/javascript.js第 24 行：

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

必须是现在

anyPlus.src=ABSPATH+imgName;

然后它应该可以在没有硬编码模板 url 的情况下工作，就像你现在拥有的那样。

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

  1. 每个 wordpress 主题都有一个 header.php -这些东西应该放在哪里的文件。阅读有关 WP 主题开发的内容： http: //codex.wordpress.org/Theme_Development
  2. 不要像现在在 javascript 中那样使用全局变量或全局函数名。
  3. 在你的 wordpress - 文件夹中建立一个坚实的结构。你真的需要这个项目的儿童主题吗？现在看起来有点乱。
  4. 当前的“解决方案”是肮脏的。使用@brasofilo 的建议，因为他提出了一个干净的解决方案。
于 2013-08-22T13:53:57.650 回答
1

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

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

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

于 2013-08-19T15:45:02.447 回答