WordPress主题设计技巧：调用文章第一张图片方法

最新推荐文章于 2023-12-16 13:50:26 发布

转载最新推荐文章于 2023-12-16 13:50:26 发布 · 7.9k 阅读

文章标签：

#wordpress #image #output #function #工作 #css

wordpress 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在WordPress中通过代码调用文章内的第一张图片，并讨论了外联图片无法支持timthumb剪切功能的问题。提供了解决方案，推荐使用phpthumb替代，以实现更好的显示效果。

之前设计WordPress主题的时候调用图片一般都是用文章内附件图片，但是有些博主为了节约博客主机空间，大部分采用外联图片，这样就无法同过这种方式调用了，所以只能用下面的这种方式来调用文章的第一张图片，WordPress调用文章第一张图片代码如下：

1在WordPress主题的功能函数function.php文件内添加以下代码，这些代码主要是查找文章内有没有图片并调用第一张图片地址，其工作原理是查找文章内有没<img />这个标签，如果有就调出第一张图片，如果没有就用张设计好的图片代替，这个方式用来作为文章缩略图非常有用，具体代码如下，拷贝到 function.php <?php … ?>之间即可.

 function catch_that_image() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
      }
      return $first_img;
    }

2Wordpress主题模板调用 catch_that_image()函数，方法很简单，在需要的地方插入 <?php catch_that_image() ; ?>即可，想要更好的显示效果就需要修改css样式来美化你的WordPress主题模板了。

声明：调用文章第一张图片如果是外联图片就无法支持timthumb图片剪切功能，如果你是WordPress主题设计高手，建议用phpthumb，phpthumb是可以支持外联图片的，大家不放试试，good luck!