【已解决】给Retina 0.2中添加支持日志缩略图中显示文章中所包含的第一张图片

【问题】

WordPress中的Retina 0.2主题，添加了在显示文章列表的时候，支持两种显示模式。

对应的在：

外观->Retina Options->Post Options->Retina Post Options->Post Style:

Content:普通的全文显示；

Excerpt (Magazine Style)：杂志类型的摘要显示

当为Excerpt模式时，支持缩略图显示，比如：

代码中对应实现逻辑为，当检测到你的帖子已经设置了对应的缩略图的话，会调用wordpress的函数，获得对应缩略图并显示；

如果发现没有设置缩略图，那么会检测到帖子的附件中，是否包含图片，然后找到第一个图片，作为缩略图显示。

但是我此处的问题是，由于每个帖子中所包含的图片，不是作为附件加到帖子里面的，所以wp_get_attachment_image之类函数，就无效了，我的图片是都上传到Skydrive上面的，然后图片地址都是类似这样的：

所以，现在希望的是，可以支持，检测到图片的地址，都是上面的那种格式的，然后缩略图，用的是这些图片的第一个图片。

【解决过程】

1.找了一下，发现最后相关的代码是在

retina主题下面的lib\functions\image.php中。

但是对于php的函数等都不是很熟悉，所以不知道怎么改。

2.后来，参考了下面一些帖子：

（1）关于PHP中的正则表达式的用户，是参考：

PHP 正则表达式

然后才知道，PHP中的正则表达式，原来是要用斜杠’/’隔开的，

然后对于http://中的多个斜杠，如果不想要写成很麻烦的 反斜杠加上斜杠( \/)的话，那么可以把斜杠换为井号#

（2）

同时也参考了：

PHP 正则表达式匹配 preg_match 与 preg_match_all 函数

（3）而关于如何获得帖子的内容，主要是参考：

WordPress 2.9 的缩略图功能

（4）然后再去到官网中找相关资料参考：

http://codex.wordpress.org/Function_Reference

http://codex.wordpress.org/Function_Reference/the_ID

http://codex.wordpress.org/Function_Reference/get_post

3.折腾了不少时间，最后，终于搞定了，写出对应可以工作的代码。

将

lib\functions\image.php

中的

	/** Grab the first attachment image */		
	else {

		$id = retina_get_image_id( $args['num'] );
		$html = wp_get_attachment_image( $id, $args['size'], false, $args['attr'] );
		list( $url ) = wp_get_attachment_image_src( $id, $args['size'], false, $args['attr'] );

	}

改为：

	/** Grab the first attachment image */		
	else {

		// $id = retina_get_image_id( $args['num'] );
		// $html = wp_get_attachment_image( $id, $args['size'], false, $args['attr'] );
		// list( $url ) = wp_get_attachment_image_src( $id, $args['size'], false, $args['attr'] );

        // wirrten by crifan
        // get the first pic url if exist

        $postId = get_the_id();
        $curPost = get_post($postId);
        //$content = $curPost['post_content']; // not work here !!!
        $content = $curPost->post_content; 
        //$content = the_content(); // not work !!!, it will output all content !!!

        # current support valid pic suffiex: 'bmp', 'gif', 'jpeg', 'jpg', 'jpe', 'png', 'tiff', 'tif'
        $picSufChars = "befgijmnptBEFGIJMNPT";
        //$pattern = '#<a href="(?P<picUrl>http://storage.live.com/items/.+?filename=.+?\.jpg)"><img.+?src="(?P=picUrl)".+?/></a>#';
        $pattern = '#<a href="(?P<picUrl>http://storage.live.com/items/.+?filename=.+?\.['.$picSufChars.']{3,4})"><img.+?src="(?P=picUrl)".+?/></a>#';

        if(preg_match($pattern, $content, $matches)){
            $picUrl = $matches["picUrl"];
            //print "found picUrl=".$picUrl;
            if(preg_match('#http://storage\.live\.com/items/.+?filename=(?P<filename>.+)#', $picUrl, $foundFilename)){
                $filename = $foundFilename["filename"];
                $filename = rawurldecode($filename);
            }
            else{
                $filename = "";
            }

            //<a href="https://www.crifan.com/wordpress_importer_import_wxr_error_there_has_been_an_error_php_ini_post_max_size_upload_max_filesize/" title="【已解决】WordPress Importer导入WXR文件出错：Sorry, there has been an error.文件是空的。请上传有内容的文件。这个错误也有可能是因为您的 php.ini 禁止了上传，或其中 post_max_size 的值小于 upload_max_filesize 的值"><img width="150" height="109" src="https://www.crifan.com/wp-content/uploads/2012/04/restart-apache-150x109.jpg" class="entry-image" alt="restart-apache.jpg" title="restart-apache.jpg" /></a>

            //$picHtml = sprintf('<a href="%1$s" title="%2$s"><img width="150" height="109" src="%3$s" class="entry-image" alt="%4$s" title="%5$s" /></a>', get_permalink(), get_the_title(), $picUrl, $filename, $filename);
            //$picHtml = sprintf('<a href="%1$s" title="%2$s"><img width="150" src="%3$s" class="entry-image" alt="%4$s" title="%5$s" /></a>', get_permalink(), get_the_title(), $picUrl, $filename, $filename);
            //$picHtml = sprintf('<a href="%1$s" title="%2$s"><img height="109" src="%3$s" class="entry-image" alt="%4$s" title="%5$s" /></a>', get_permalink(), get_the_title(), $picUrl, $filename, $filename);
            $picHtml = sprintf('<a href="%1$s" title="%2$s"><img width="150" height="150" src="%3$s" class="entry-image" alt="%4$s" title="%5$s" /></a>', get_permalink(), get_the_title(), $picUrl, $filename, $filename);
        } else {
            $picUrl = "";
            $picHtml = "";
        }

        $id = false;
        $html = $picHtml;
        $url = $picUrl;
	}

就可以实现我所需要的功能，检测出对应的帖子中html源码中所包含的skydrive中的图片地址，然后将第一个图片作为缩略图显示出来。效果如下：

后来，正则表达式失效，不过现已更新，详情参考：

更新php的搜索Skydrive图片的正则表达式,使得WordPress的Retina主题中的缩略图再次生效

转载请注明：在路上 » 【已解决】给Retina 0.2中添加支持日志缩略图中显示文章中所包含的第一张图片