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

改变这个：在你的第一行＃34;而＃34;循环插入：

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];?>"

同样的事情在你的第二个＆＃34;如果＆＃34;。它不是最漂亮的代码，但应该有效。

调用the_post_thumbnail（）会打印整个＆lt; img＆gt;标记，您只需要URL来填充现有IMG的DATA-SRC和DATA-THUMB属性。

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

希望它有所帮助。

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

1 个答案: