Question

我正在添加一个jQuery脚本，通过Backstretch（https://github.com/srobbin/jquery-backstretch）将全屏图像背景添加到页面。

我遇到的问题是让图像的路径正确，因为我正在使用Wordpress。

这是我到目前为止所得到的：

<script>
    jQuery(document).ready(function($){                    
        $(".primary-container").backstretch(
        "/library/images/image.jpg");               
    });
</script>

我尝试在网址的开头使用<?php bloginfo('template_directory') ?>，但我相信这在jQuery中不起作用。在这种情况下，如何使用链接到图像的网址？

感谢。

Answer 1

杰森，我相信你在使用WordPress和JavaScript资产时遇到了一些经典的挑战。您需要一个可以访问JavaScript的PHP变量（或某种PHP处理），当然，JavaScript无法解析PHP！

有些评论建议检查路径（只是简单地获取你生成的目录），但我不喜欢这种方法，因为它假设你的主题路径总是一样的。（如果您重命名主题文件夹，更改主题或只是更改文件夹结构，这可能会改变。）

我通常会在所有主题的<head>中注入“帮助”脚本。它是一个非常简单的JSON对象，它的名称间隔（以保持全局范围干净）。

<script>
// for bootstrapping page level code
var YOURSITENAME = {
    "isFrontPage":<?= (is_front_page() ? 'true' : 'false'); ?>,
    "isPage":<?= (is_page() ? 'true' : 'false'); ?>,
    "postName":'<?= get_post_name(); ?>',
    "templateURI":'<?= get_template_directory_uri(); ?>',
};
</script>

注意标题为“templateURI”的最后一项。在JavaScript中，您现在可以使用命名空间的JSON对象随时访问此值，如下所示：

var myDirectoryPath = YOURSITENAME.templateURI;

或者在您的具体示例中：

var imagePath = YOURSITENAME.templateURI + "/library/images/image.jpg";

jQuery(document).ready(function($){                    
    $(".primary-container").backstretch(imagePath);               
});

当然，为自己更改YOURSITENAME更有意义的命名空间。

玩得开心！

在Wordpress中的jQuery代码中添加图像路径

1 个答案: