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>

使用WordPress的Backstretch.js来自页面ID的特色图片

2 个答案: