为较小的窗口宽度加载不同的POST_THMBILITH(jQuery、WordPress)

时间:2015-10-28 作者:Kevin Armstrong

这是我索引中的标记。php:

<div class="post-thumb"> 

</div>
当窗口宽度小于1024像素时,我希望jQuery将下面的代码放在上面的div中,并使用“post thumb”类:

<?php if ( has_post_thumbnail()) the_post_thumbnail(\'small-thumb\'); ?>
当宽度大于1024像素时:

<?php if ( has_post_thumbnail()) the_post_thumbnail(\'large-thumb\'); ?>
我已经在Wordpress根目录中的名为“large thumb.html”和“small thumb.html”的单独文件中放置了上述两个代码。

我在jQuery中使用这段代码,但它不起作用:

$(document).ready(function(){
    if ( $(window).width() > 1025) {
        $(\'.post-thumb\').load("large-thumb.html");
    }
    else {
        $(\'.post-thumb\').load("small-thumb.html");
    }
});
上面的jQuery位于Wordpress根目录中名为“js”的文件夹中。

我做错了什么?我该怎么做才能让它工作?

我不能使用CSS和媒体查询,因为它会通过加载post\\u缩略图来增加索引页的大小。

谢谢

1 个回复
最合适的回答,由SO网友:Rarst 整理而成

您不能只是创建.html 文件是任意的,WP不会识别它们,任何PHP代码都不会首先在html文件中工作(通常)。

虽然您可以通过一些努力来实现这一点,但这将是一种不好的方法,因为向WP发出Ajax请求将导致另一个核心负载,并且实际上会使服务器上的负载增加一倍(每幅图像)。

将数据传递到JS脚本的正常WP实践是使用wp_localize_script() 为了它。您可以提前生成大小,数据将与页面本身一起加载,以便脚本可以立即使用它,而无需任何额外请求。