大前端D4主题首页分类页实现摘要显示的方法总结

  • 3
  • 5,303 ℃
  • A+
所属分类:前端技术
摘要

现在又开始折腾WORDPRESS了,这次用了大前端D4的主题,主题很不错,而且是免费的,拿来用用,换了很多主题,都一直在折腾,这次感觉这个很强大,估计以后不换了,有修改就在这个上面进行,我也会推出相关的修改教程,有些资料来源互联网,感谢提供者。

现在又开始折腾WORDPRESS了,这次用了大前端D4的主题,主题很不错,而且是免费的,拿来用用,换了很多主题,都一直在折腾,这次感觉这个很强大,估计以后不换了,有修改就在这个上面进行,我也会推出相关的修改教程,有些资料来源互联网,感谢提供者。
第一步:将原主题文件home.php里面的excerpt层替换为如下代码:

<div class="excerpt">

<?php query_posts('showposts='.stripslashes(get_option('d_new_post_num')).'&caller_get_posts=1&orderby=date&order=DESC'); while (have_posts()) : the_post(); ?>

<ul><li>

<?php dm_the_thumbnail(); ?><span><?php comments_popup_link('抢沙发', '+1', '+%'); ?></span>

<h2 class="tit"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>-<?php bloginfo('name'); ?>"><?php the_title(); ?></a></h2>

<p class="time" style="font-size: 13px;"><?php echo mb_strimwidth(strip_tags(apply_filters('the_excerpt', $post->post_content)), 0, 220,"..."); ?></p>

<p class="time" style="font-size: 13px;">发布时间:<strong><?php the_date_xml(); ?></strong> 分类:<?php the_category(', '); ?> <strong><?php dtheme_views(); ?></strong></p>

</li></ul>

<?php endwhile; ?>

</div>

第二步:在主题文件common.css里面把74-83行左右(自己找下)的代码替换为如下:

.excerpt ul{margin-bottom:15px;width:100%;float:left}

.excerpt li{padding:0 0 16px 160px;margin-right:28px;border-bottom:#e4e4e4 1px solid;height:102px;overflow:hidden}

.excerpt .pic{float:left;_display:inline;margin-left:-160px}

.excerpt .pic img{position: absolute;border:#ddd 1px solid;border-radius:2px;padding:1px;display:block;max-width:140px;max-height:98px;_width:140px;_height:98px}

.excerpt .pic:hover img{border:#bbb 2px solid;padding:0}

.excerpt .time{padding-top:5px;color:#888;_display:none}

.excerpt .tit{font-size:14px;}

.excerpt .tit span a{font-size:12px;font-weight:normal;margin-left:10px;color:#080;position:relative;top:-2px}

.excerpt .tit i{font-size:12px;margin-left:5px;color:#FF0000;position:relative;top:-2px;display:inline-block}

.excerpt strong{color:#007457;font-weight:normal}

.excerpt span{float:right;margin-right: 30px;}

.excerpt span a{color:#090;position: absolute;font-size:14px;-webkit-transition:.1s;-moz-transition:.1s}

.excerpt span a:hover{color:#080;-webkit-transform:scale(2);-moz-transform:scale(2);font-weight:bold;}

到此就基本实现了首页的文章摘要显示。但是这个时候你会发现置定文章的显示不正常了,修改方法是:将主题文件home.php里面的第14行代码<ul>修改为<ul style="width:50%;">。

同样,分类目录页也可照此方法实现文章摘要的显示,及修改EXPERT DIV内容。注意需要调用的是分类目录下的文章,因此需要将:

<?php query_posts('showposts='.stripslashes(get_option('d_new_post_num')).'&caller_get_posts=1&orderby=date&order=DESC'); while (have_posts()) : the_post(); ?>

改为:

<?php while (have_posts()) : the_post(); ?>

要不就会显示全部文章,从新到旧排序。

  • 我的微信
  • 加我请备注缘由
  • weinxin
  • 我的微信公众号
  • 轻松随便关注
  • weinxin

发表评论

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

关闭震动

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

    • avatar 我想改变 0

      你好,你这个好像不是D4了

      我是搜索如何分页找到你这里来的