最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

WordPress crifan 731浏览 0评论

【问题】

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

对应的在:

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

Content:普通的全文显示;

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

当为Excerpt模式时,支持缩略图显示,比如:

retina thumbnail

代码中对应实现逻辑为,当检测到你的帖子已经设置了对应的缩略图的话,会调用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 正则表达式

然后才知道,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中的图片地址,然后将第一个图片作为缩略图显示出来。效果如下:

mine thumbnail effect


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

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

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
66 queries in 0.161 seconds, using 18.86MB memory