2

我正在添加一个 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') ?>在 url 的开头使用，但我相信这在 jQuery 中不起作用。在这种情况下，如何使用链接到图像的 url？

谢谢。

4

1 回答 1

4

Jason，我相信您在 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为自己改一些更有意义的命名空间。

玩得开心！

于 2013-06-20T18:04:22.680 回答