Question

我正在使用名为“Backstretch”的javascript来显示我网站背面的图片，该图片会在视口变大或变小时调整大小。现在我想将它与WordPress中的get_post_thumbnail函数结合起来，这样我就可以将背景图像设置为特色图像。

我尝试了标准WP功能，但这不起作用，因为它添加了标签：

 $.backstretch("<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>");

所以我需要剥离那些标签..我越来越近了，因为我现在得到一个网址（和图像）但是它总是相同的，即使我在每个页面上设置了不同的特色图像

 <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post_id, $size, $attr ) ); ?>

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

Answer 1

尝试使用全局$ post对象：

<?php global $post; $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full' ) ); ?>

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

Answer 2

您可以在本教程中找到问题的答案：http://sridharkatakam.com/set-featured-image-full-sized-background-posts-pages-wordpress/

创建一个backstretch-set.js文件并包含 jQuery(document).ready(function($) { $("body").backstretch([BackStretchImg.src],{duration:3000,fade:750}); });

然后在你的functions.php中将两个js文件（backstretch.js和你的backstretch-set.js）排入队列

//* Enqueue Backstretch script
add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
function enqueue_backstretch() {

//* Load scripts only on single Posts, static Pages and other single pages and only if featured image is present
if ( is_singular() && has_post_thumbnail() )

    wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );

    wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );

使用Backstretch JS的WP get_post_thumbnail

2 个答案: