WordPress文章列表添加缩略图（无插件）

这几天都在折腾这个博客，换了个新主题感觉还不错，就是文章列表没有缩略图让我感觉不是太喜欢，个人比较喜欢简书的那种风格，所以就去找了一些资料自己仿照着简书的风格改了一下。修改的步骤也比较简单，这里就做一下记录。

第一步

在主题文件 样式表(style.css)文件中添加下面的CSS。我这是仿照简书的样式写的，你也可以根据自己的需求更改。

/**
 * 仿照简书的样式
 */
#thumbnail{
	margin:-5px 5px 5px 5px;
	width:115px;height:100px;
	border-radius:5px;
	border:1px solid #eee;
	float:right;
	overflow:hidden;
	text-align:center;
} 
#thumbnail img{
	max-height:100px;
	max-width:180px;
	min-height:100%;
	min-width:100%;
	margin: 0 -100%;
} 

第二步

在函数模板(functions.php)文件中的<?php 和 ?>内添加以下代码。

• soImages  是获取文章内图片的正则，如果有其他需求，改成对应的正则即可
• 下面注释掉的代码是当文章内没有图片时提供一张默认图片。我这里把它注释掉，如果文章内没有图片我就不显示图片，读取的是我当前主题下/assets/images路径的thumbnail.jpg图片文件，可以根据实际情况修改。

/**
 * 首页文章图片
 *
 * @since ZHY
 */
function thumbnail_img($soContent){ 
	$soImages = '/<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/i';
	preg_match_all( $soImages, $soContent, $thePics ); 
	$allPics = count($thePics[0]); 
	if( $allPics > 0 ){ 
		echo "<span id='thumbnail'>"; 
		echo $thePics[0][0]; 
		echo '</span>'; 
	} else { 
		/**
		 * 打开以下注释代码，当文章没有图片时提供一张默认图片。
		 */
		// echo "<span id='thumbnail'>"; 
		// echo "<img src='"; 
		// echo bloginfo('template_url'); 
		// echo "/assets/images/thumbnail.jpg'></span>"; 
	} 
} 

第三步

这一步并不是绝对的按照我的来，根据不同的主题有所不同。

如果你的主题的列表展示的是内容信息，即the_content，则在the_content();代码之前加入以下代码。

以我当前主题为例：我当前主题的文章列表展示的是摘要信息，即在content.php文件内找到the_excerpt(); 代码，在它之前加入以下代码。

thumbnail_img($post->post_content); 

完成这三步缩略图就已经可以显示出来了，如果没显示出来，可能是浏览器缓存所致，清理缓存刷新界面即可。

Chrome清理浏览器缓存

• 打开要清理缓存的页面按F12（Mac：⌥⌘+I）打开开发者工具界面
• 选择Network 并勾选 Disable cache
• 不要关闭开发者工具界面，刷新界面即自动清除缓存。

进一步调整

注意：以下方法仅在列表展示的为摘要时才适用

添加缩略图后摘要文字可用宽度就变短了，就可能会出现文字行数过多不美观的情况，此时我们可以在模板函数 (functions.php)文件内找到excerpt_length函数，修改其return的字数即可。