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的字数即可。

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据