首页列表带图片展示效果代码
在functions.php里面添加下面代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //缩略图 function dm_the_thumbnail() { global $post; $content = $post->post_content; // $soImages = '~<img [^>]* />~'; preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); $m = substr_count($strResult[1][0], '/includes/timthumb.php'); //判断图片是否已经用timthumb显示 if ($n > 0){ // 如果文章内包含有图片，就用第一张图片做为缩略图 if ($m ==1 ) { echo '<a href="'.get_permalink().'" title="阅读全文"><img class="alignleft" src="'.preg_replace("/&h.*zc=1/","",$strResult[1][0]).'&h=140&w=140&zc=1" alt="缩略图" /></a>'; } else { //如果没有timthumb则补充 echo '<a href="'.get_permalink().'" title="阅读全文"><img class="alignleft" src="'.get_bloginfo('template_url').'/includes/timthumb.php?src='.$strResult[1][0].'&h=140&w=140&zc=1" alt="缩略图" /></a>'; } } else { // 如果文章内没有图片，则用默认的图片 echo '<a href="'.get_permalink().'" title="阅读全文"><img class="alignleft" src="'.get_bloginfo('template_url').'/images/default.gif" alt="缩略图" /></a>'; } } |
由于每个主题首页显示不一样，所以不提供具体修改方式，其实就是把首页显示列表那里修改成如下代码，基本就可以了
代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php while (have_posts()) : the_post();?> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <h2 class="entry-title"><a href="<?php the_permalink() ?>" target="_blank"> <?php the_title(); ?></a></h2> <div class="entry-cat"> 分类:<?php the_category(' , ') ?> 音乐纪元:<?php the_time("y年m月j日"); ?> 聆听次数:<?php if(function_exists('the_views')) { the_views(); } ?> <?php edit_post_link(' 编辑 ', ' ', ' '); ?> </div> <dl> <dt> <?php dm_the_thumbnail( 140,140 ) ?> </dt> <dd> <p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 350,"..."); ?></p> <div class="meta_tags">关键字：<span><?php the_tags(' ' , ' , ' , ' '); ?></span></div> </dd> </dl> </div> <?php endwhile; ?> |
CSS样式如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .entry-title{font-size:16px;margin:0;} .entry-title a{color:#0086E3;} .entry-title a:hover{text-decoration:none;} .entry-cat{margin:2px 0 0px 10px;color:#A8A8A8;} .entry-cat a{color:#A8A8A8;} .entry-cat a:hover{color:#0086E3;} .meta_tags{display:block;text-align:right;float:right} .meta_tags span{color:#A1A1A1} .post { padding: 0 0 10px;} .post h2 { padding: 0 5px 5px; font-size: 16px; border-bottom: 2px solid #BFBFBF; } .post dl{height:160px;} .post dt { float: left; width: 160px; } .post dt img { width: 140px; height: 140px; padding: 4px; border: 1px solid #D3D3D3; vertical-align: top;} .post dd {margin-left: 165px;height:160px;width:500px;WORD-BREAK:break-all;line-height:24px } .post dd p {height:115px; } .post dd span{margin:5px 0 0 0;} |
如果要在分类列表请在archive.php里面同样修改
timthumb下载
默认支持
'flickr.com',
'staticflickr.com',
'picasa.com',
'img.youtube.com',
'upload.wikimedia.org',
'photobucket.com',
'imgur.com',
'imageshack.us',
'tinypic.com',
'xiami.com',
这些网站的外链图片，也可以自己手动添加，在timthumb里面的126行
2012.09.19 更新
更新内容是：重新判断首页列表截断，先判断是否有摘要，如果没有那么直接用mb_strimwidth截取文章内容，默认是300个字符
1 2 3 4 5 | <?php if(has_excerpt()) the_excerpt(); elseif(function_exists('mb_strimwidth'))//判断是否支持mb_strimwidth函数 echo'<p>'//mb_strimwidth截断后得到的是纯文本, 所以我给它包了一层p .mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 350,"...")//对文本内容截断, 从位置0开始往后截取300长度, 超出部分以点点点替代 .'</p>'; ?> |
2012年08月15日 20:22 沙发
动作真快
2012年08月15日 19:57 板凳
代码第十一行好像多了一个斜杠
2012年08月15日 20:05 1层
@80后男人 我这个已经解决了，换了一个缩略图代码了，等下我来修改这篇文章
2012年08月15日 20:09 1层
@聆听天笑 哈哈,快点动手吧,我一会来沙发
2012年08月15日 20:22 1层
@80后男人 修改好了，图片没换，但是现在的就是我网站现在显示的样子
2012年08月15日 20:24 1层
@聆听天笑
刚给你回复就收到你的回复了,心有灵犀啊
2012年07月20日 23:10 地板
看一看