大前端 D5 主题首页标题前显示图片

  • A+
所属分类:前端技术

最近,80后生活博客从大前端D4升级到了D5主题 ,升级后发现首页之前的特色图片消失了,取而代之的是评论数和浏览数。个人不是很喜欢,博客的首页我觉得还是有图片显示会比较好,废话少说,接下来就说下大前端D5主题首页添加显示特色图片方法:

1、将D5目录下的INDEX.PHP文件修改,替换excerpt-num样式中的内容,注意不能直接通过后台修改,需要下载了用专业的工具进行修改:

<li>
<?php dm_the_thumbnail(); ?>
<h2>
<?php if( is_sticky() ) echo '<strong>[置顶]</strong>'; ?><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</h2>
<div>
<span><?php the_time('m-d');?></span>
<span><?php comments_number('0条评论', '1条评论', '%条评论'); ?></span>
<span><?php dtheme_views(); ?></span>
</div>
<div>
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 160, '…'); ?>
</div>
</li>

第二步:在后台-编辑中找到functions.php这个文件,添加缩略图获取和访问量代码;

//缩略图获取
function dm_the_thumbnail() {    global $post;   if ( has_post_thumbnail() ) {   echo '<a href="'.get_permalink().'">';   $domsxe = simplexml_load_string(get_the_post_thumbnail());   $thumbnailsrc = $domsxe->attributes()->src;   echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';   echo '</a>';   } else {   $content = $post->post_content;   preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);   $n = count($strResult[1]);   $random = mt_rand(1, 20);   if($n > 0){   echo '<a href="'.get_permalink().'"><img src="'.$strResult[1][0].'" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';   }else {   echo '<a href="'.get_permalink().'"><img src="'.get_bloginfo('template_url').'/img/random/tb'.$random.'.jpg" alt="大前端 D5 主题首页标题前显示图片" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';       }     }  }

//访问量 function dtheme_views(){ if(function_exists(‘the_views’)) the_views(); }

第三步:后台-编辑style.css,将如下代码添加到样式表最底部;

/* excerpt */ .excerpt li{padding:20px 0 20px 164px;overflow:hidden;border-bottom:solid 1px #eee} .excerpt .pic{float:left;width:140px;margin-left:-164px;border:solid 1px #ddd;padding:4px;box-shadow:0px 1px 1px #eee} .excerpt .pic img{width:140px;height:98px;display:block} .excerpt .pic:hover{border-color:#ccc;border-bottom-color:#bbb} .excerpt h2{font-size:15px;margin:4px 0 12px;height:18px;overflow:hidden} .excerpt h2 strong{color:#8CAC52;margin-right:10px} .excerpt .note{color:#777;line-height:20px} .info{margin-bottom:8px} .info,.info a{color:#777} .info a:hover{color:#333;text-decoration:underline} .comm,.view{margin-left:20px;padding-left:20px} .comm{background-position:-118px -76px} .view{background-position:-118px -94px}

第四步:在D5/IMG下建立 random 文件夹,并在内放置图片,命名为 tb1.jpg ~tb2.jpg~~~如果你难得自己弄,我提供了下载,见下地址:

点击进入下载

至此就完成了,和本站的效果一样吧~~~

  • 我的微信
  • 请务必准确填写验证信息
  • weinxin
  • 我的微信公众号
  • 提供本博客以及生活资讯
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:5   其中:访客  3   博主  2

    • avatar 80后男人 3

      官方主题升级啦

      • avatar 80后男人 3

        你动作很快哦,呵呵