WordPress 四分栏文章列表样式显示方法

当今是个信息共享的时代,好的东西就要拿出来与大家分享,才能体现它的价值。今天我要分享的是如何在WordPress首页展示四分栏文章列表样式,效果如下图所示。

第一步:将下列代码另存为rand-hot-comment.php。

get_results("SELECT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '$today' AND post_date > '$daysago' AND $where AND post_status = 'publish' AND meta_key = 'views' AND post_password = '' ORDER  BY views DESC LIMIT $limit");
if($most_viewed) {
   foreach ($most_viewed as $post) {
	$post_views = intval($post->views);
	$post_views = number_format($post_views);
	$temp .= "
  • ".get_the_title()."
  • "; } } else { $temp = ''.__('N/A', 'Nana').''."\n"; } if($display) { echo $temp; } else { return $temp; } } ?> posts WHERE post_type = 'post' AND post_status = 'publish' AND post_date < '$today' AND post_date > '$daysago' AND post_password = '' ORDER BY comment_count DESC LIMIT 0 , $number "; $posts = $wpdb->get_results($sql); $output = ""; if(empty($posts)) { $output = '
  • None data.
  • '; } else { foreach ($posts as $post){ $commentcount = $post->comment_count; if ($commentcount != 0) { $output .= "
  • ".get_the_title()."
  • "; } } } echo $output; } ?>

    站长推荐 热门文章 热评文章 随机推荐

      'hot', 'meta_value' => 'true','showposts' => 8, 'orderby' => 'rand', 'ignore_sticky_posts' => 1 ) ); while ( have_posts() ) : the_post(); ?>
      8, 'orderby' => 'rand',);$rand_posts = get_posts($args); foreach( $rand_posts as $post ): ?>
    第二步:将rand-hot-comment.php上传到主题inc文件夹内,并在需要显示的位置插入下列代码。
    get_template_part( '/inc/rand-hot-comment' );
     
    第三步:将下列css代码,加入到主题style样式中。
    .tab-site {overflow: hidden;margin: 0 0 10px 0;border: 1px solid #ddd;border-radius:0px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);}
    .tab-hd {overflow: hidden;height: 40px;line-height: 40px;}
    .tab-hd-con {float: left;text-align: center;cursor: pointer;height: 39px;border-right: 1px solid #ddd;font-size: 1pc;}
    .tab-hd-con {width: 25%;}
    .dom-display .current {display: block;}
    .tab-hd .current{border-bottom: 3px solid #c01e22;}
    .tab-hd .current a{color:#c01e22;}
    .tab-bd-con {display: none; overflow: hidden;}
    .tab-bd li {float: left;width: 47.35%;line-height: 210%;margin: 0 20px 0 0;white-space: nowrap; word-wrap: normal;text-overflow: ellipsis;overflow: hidden;}
    @media screen and (max-width: 480px) {.tab-bd li {width: 95%;margin: 0 0 0 0;}}
    .list-title {width: 84%;line-height: 210%; white-space: nowrap;word-wrap: normal;text-overflow: ellipsis; overflow: hidden;}
    .tab-site {overflow:hidden;background:#fff;padding-bottom:10px}
    .tab-bd li a{color:#555;}
    .tab-bd .list-title .tab-icon:before{content:'\f105'}
    .tab-bd .list-title .tab-icon{font-family:fontawesome; margin-right:5px;}
    .tab-bd li a:hover{color:#c01e22;text-decoration:underline}
    .tab-bd {background: #fff; padding:10px 15px;margin-top:-1px; border-top: 1px solid #ddd;}
     
    第四步:将下列代码加到主题的script.js里。
    $(document).ready(function(){
    	$("#layout-tab span:first").addClass("current");
    	$("#layout-tab .tab-bd-con:gt(0)").hide();
    	$("#layout-tab span").mouseover(function(){
    	$(this).addClass("current").siblings("span").removeClass("current");
    	$("#layout-tab .tab-bd-con:eq("+$(this).index()+")").show().siblings(".tab-bd-con").hide().addClass("current");
    	});
    });
     

    好了,方法就介绍完成了,大致方法如上所示,可能不能完全适应其它主题,需自行修改。

    赞(0)
    未经允许不得转载:伊阳博客 » WordPress 四分栏文章列表样式显示方法
    所属分类: WordPress

    留言 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    表情 关闭

    图片