javascript - 带有来自页面 ID 的 WordPress 特色图片的 Backstretch.js

Question

我正在开发一个单页网站，其中每个部分的内容都通过帖子 ID 加载。

<?php $id=193; $post = get_page($id); echo $post->post_content; ?>

每个页面都有自己的完整背景图像，它位于内容 div 下，我使用 Backstretch.js 在 div id 中创建该图像。

例子。
http://jsfiddle.net/4k6ty4n1/4/

到这里为止，一切都很完美，但我想让背景图像可以使用 WordPress 中的特色图像选项进行编辑，而不是像现在这样硬编码但找不到解决方案。

它应该是这样的（我猜）：

$(function() {
$("#pageOneImage").backstretch("<?php $id=193; $post = get_post_thumbnail_id($id); echo $post->get_post_thumbnail_id; ?>");
$("#pageTwoImage").backstretch("<?php $id=195; $post = get_post_thumbnail_id($id); echo $post->get_post_thumbnail_id; ?>");
});

Answer 1

其实很简单：

<?php $thumb_id = 1; $url = wp_get_attachment_url( get_post_thumbnail_id($thumb_id) ); ?>

<script>
$("#divname").backstretch("<?php echo $url ?>");
</script>

Answer 2

对我来说，这段代码工作得很好：

<script>
jQuery(document).ready(function($) {
     jQuery(".your-class-or-ID").backstretch("
 <?php
    $thumb_id = get_post_thumbnail_id();
    $thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);                
    echo $thumb_url[0];
?>");
});
</script>