【问题】
WordPress中的Retina 0.2主题,添加了在显示文章列表的时候,支持两种显示模式。
对应的在:
外观->Retina Options->Post Options->Retina Post Options->Post Style:
Content:普通的全文显示;
Excerpt (Magazine Style):杂志类型的摘要显示
当为Excerpt模式时,支持缩略图显示,比如:
代码中对应实现逻辑为,当检测到你的帖子已经设置了对应的缩略图的话,会调用wordpress的函数,获得对应缩略图并显示;
如果发现没有设置缩略图,那么会检测到帖子的附件中,是否包含图片,然后找到第一个图片,作为缩略图显示。
但是我此处的问题是,由于每个帖子中所包含的图片,不是作为附件加到帖子里面的,所以wp_get_attachment_image之类函数,就无效了,我的图片是都上传到Skydrive上面的,然后图片地址都是类似这样的:
http://storage.live.com/items/9A8B8BF501A38A36!1211?filename=%e7%82%b9%e5%87%bb%e7%ac%ac%e5%87%a0%e9%a1%b5.jpg |
所以,现在希望的是,可以支持,检测到图片的地址,都是上面的那种格式的,然后缩略图,用的是这些图片的第一个图片。
【解决过程】
1.找了一下,发现最后相关的代码是在
retina主题下面的lib\functions\image.php中。
但是对于php的函数等都不是很熟悉,所以不知道怎么改。
2.后来,参考了下面一些帖子:
(1)关于PHP中的正则表达式的用户,是参考:
然后才知道,PHP中的正则表达式,原来是要用斜杠’/’隔开的,
然后对于http://中的多个斜杠,如果不想要写成很麻烦的 反斜杠加上斜杠( \/)的话,那么可以把斜杠换为井号#
(2)
同时也参考了:
PHP 正则表达式匹配 preg_match 与 preg_match_all 函数
(3)而关于如何获得帖子的内容,主要是参考:
(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中的图片地址,然后将第一个图片作为缩略图显示出来。效果如下:
后来,正则表达式失效,不过现已更新,详情参考: