Wordpress 自定义帖子类型 - data-thumb data-src 图片

Question

我有一个 Html 页面，其中有一个滑块。这是html代码

<div data-thumb="images/slide1.jpg" data-src="images/slide1.jpg">

        </div>
        <div data-thumb="images/slide2.jpg" data-src="images/slide2.jpg">

        </div>
        <div data-thumb="images/slide3.jpg" data-src="images/slide3.jpg">

        </div>

我正在尝试将此页面转换为 wordpress。这是我在 wordpress 中加载图像的方法。

  <?php 

          $options = array(
        'post_type' => "slideshow",

         );  



      while ($my_query->have_posts()) : $my_query->the_post(); ?>  


         <div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>"  data-src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>">

        </div>

        <?php endwhile; ?> 

但它不起作用。我的图片没有显示在滑块中。但是当我检查页面源时，它正在正确获取图像。

这里是生成源

 <div data-thumb="<img width="1170" height="385" src="http://localhost/wordpress/wp-content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />"  
   data-src="<img width="1170" height="385" src="http://localhost/wordpress/wp-  content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />">

        </div>

Answer 1

改变这个： 在“while”循环的第一行插入：

if ( has_post_thumbnail() ) {
     $image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID()));
}
 // else {
 // you should see what to do if the post hasn't got a thumbnail
 // 

然后替换这个：

<div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>"

为此：

<div data-thumb="<?php echo $image[0];?>"

在你的第二个“如果”中也是如此。 这不是最漂亮的代码，但它应该可以工作。

调用 the_post_thumbnail() 会打印整个 标记，您只需要 URL 即可填充现有 IMG 的 DATA-SRC 和 DATA-THUMB 属性。

因此，您使用get_post_thumbnail_id() 获取帖子缩略图ID，并使用wp_get_attachment_src() 获取图片网址。

希望对你有帮助。