Question

我有相关帖子（Wordpress）代码：

function maxbong_related_category() { ?>
<?php
global $post;
$categories = get_the_category($post->ID);
if ($categories): 
    $category_ids = array();
    foreach($categories as $individual_category): 
      $category_ids[] = $individual_category->term_id;
      $args=array(
            'category__in' => $category_ids,
            'post__not_in' => array($post->ID),
            'showposts'=> 6,
            'ignore_sticky_posts'=>1,
            'orderby'=>rand
      );    
    endforeach;

?>
   <?php $my_query = new wp_query($args); if( $my_query->have_posts() ): ?>
        <div id="bottom-post-by-cate" class="related-post">
                    <div class="title">Related Photos</div>
                        <ul>
                            <?php while ($my_query->have_posts()): $my_query->the_post();?>                                 
                                    <li>
                                    <span class="re-thumb item-thumb"><a href="<?php the_permalink();?>"><?php the_post_thumbnail("category-thumb",array( "title" => get_the_title(),"alt" => get_the_title() )) ?></a></span>
                                        <a class="re-title" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                                    </li>
                            <?php endwhile; ?>
                        </ul>
                </div>
<?php  endif; endif; wp_reset_query(); ?>
<?php } ?>

输出：

 <li>
 <span class="re-thumb item-thumb">
 <a href="#">
 <img width="360" height="240" src="#" class="attachment-category-thumb size-category-thumb wp-post-image loading" alt="#" title="#" srcset="#" sizes="#" data-was-processed="true">
 </a>
 </span> 
 <a class="re-title" href="#" rel="bookmark" title="#">ABCD</a>
 </li>

但现在我想将src替换为data-original（对于运行lazyload），结果如下：

 <li>
 <span class="re-thumb item-thumb">
 <a href="#">
 <img width="360" height="240" data-original="#" class="attachment-category-thumb size-category-thumb wp-post-image loading" alt="#" title="#" srcset="#" sizes="#" data-was-processed="true">
 </a>
 </span> 
 <a class="re-title" href="#" rel="bookmark" title="#">ABCD</a>
 </li>

你有什么想法吗？感谢

Answer 1

您可以使用jQuery实现此目的。只需获取当前图片的src，然后将其替换为data-original。

＆＃13;

jQuery(document).ready(function($){
    $('.attachment-category-thumb').each(function(){
      var src = $(this).attr('src');
      $(this).attr('data-original',src);
      $(this).removeAttr("src");  
      $(this).removeAttr("srcset"); 
 
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
 <span class="re-thumb item-thumb">
 <a href="#">
 <img width="360" height="240" src="#" class="attachment-category-thumb size-category-thumb wp-post-image loading" alt="#" title="#" srcset="#" sizes="#" data-was-processed="true">
 </a>
 </span> 
 <a class="re-title" href="#" rel="bookmark" title="#">ABCD</a>
 </li>

＆＃13;

我已对此进行了测试，如果有任何帮助，请与我联系。感谢

如何替换WordPress相关帖子中的图像属性

1 个答案: