• A+

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

2019-03-23 阅读: 626 次 评论 0 条 打印
知其雄,守其雌;知其白,守其黑;知其荣,守其辱。——老子
本文共377个字,预计阅读时间需要1分钟。

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

第一步:将下列代码另存为rand-hot-comment.php。
  1. <?php
  2. //按时间获得浏览器最高的文章
  3. function post_viewed_tab($mode = '', $limit ='', $days = '', $display = true) {
  4. global $wpdb, $post;
  5. $today = date("Y-m-d H:i:s"); //获取今天日期时间
  6. $daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) );  //Today - $days
  7. $where = '';
  8. $temp = '';
  9. if(!empty($mode) && $mode != 'both') {
  10.   $where = "post_type = '$mode'";
  11.   } else {
  12. 	$where = '1=1';
  13.   }
  14. $most_viewed = $wpdb->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");
  15. if($most_viewed) {
  16.    foreach ($most_viewed as $post) {
  17. 	$post_views = intval($post->views);
  18. 	$post_views = number_format($post_views);
  19. 	$temp .= "<li class=\"list-title\"><span class=\"tab-icon\"></span><a href=\"".get_permalink()."\" title=\"".get_the_title()."\" target=\"_blank\" rel="noopener noreferrer">".get_the_title()."</a></li>";
  20. 		}		
  21. 	} else {
  22. 		$temp = '<a>'.__('N/A', 'Nana').'</a>'."\n";
  23. 	}
  24. 	if($display) {
  25. 		echo $temp;
  26. 	} else {
  27. 		return $temp;
  28. 	}
  29. }
  30. ?>
  31. <?php
  32. //按时间获得评论数最多的文章
  33. function hot_comment_viewed_tab($number, $days){
  34. global $wpdb, $post; 
  35. $today = date("Y-m-d H:i:s"); //获取今天日期时间
  36. $daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) );  //Today - $days
  37. $sql = "SELECT * FROM $wpdb->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 ";
  38. $posts = $wpdb->get_results($sql);
  39. $output = "";	
  40.     if(empty($posts)) {
  41.     	$output = '<li>None data.</li>';
  42.     	} else {
  43.     foreach ($posts as $post){
  44. 	   $commentcount = $post->comment_count;
  45.     	if ($commentcount != 0) {
  46.         $output .= "<li class=\"list-title\"><span class=\"tab-icon\"></span><a  href=\"".get_permalink()."\"  title=\"".get_the_title()."\"  target=\"_blank\" rel="noopener noreferrer">".get_the_title()."</a></li>";
  47.     }
  48. 	}
  49. 	}
  50.     echo $output;	
  51. }
  52. ?>
  53. <div class="tab-site wow fadeInUp sort" data-wow-delay="0.3s">
  54.    <div id="layout-tab" class="tab-product">
  55. 	<h2 class="tab-hd">
  56. 	    <span class="tab-hd-con"><a href="javascript:">站长推荐</a></span>
  57. 	    <span class="tab-hd-con"><a href="javascript:">热门文章</a></span>
  58.             <span class="tab-hd-con"><a href="javascript:">热评文章</a></span>
  59. 	    <span class="tab-hd-con"><a href="javascript:">随机推荐</a></span>			
  60. 	</h2>
  61. 	<div class="tab-bd dom-display">
  62. 	   <ul class="tab-bd-con current">
  63. 		<?php query_posts( array ( 'meta_key' => 'hot', 'meta_value' => 'true','showposts' => 8, 'orderby' => 'rand', 'ignore_sticky_posts' => 1 ) ); while ( have_posts() ) : the_post(); ?>
  64. 		<li class="list-title"><span class="tab-icon"></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>							
  65. 		<?php endwhile;wp_reset_query();?>
  66. 	   </ul>
  67. 	   <ul class="tab-bd-con">
  68. 		<?php post_viewed_tab('post',8,90, true, true);wp_reset_query();  ?>	
  69. 	   </ul>
  70. 	   <ul class="tab-bd-con">            
  71. 		<?php hot_comment_viewed_tab(8, 90);wp_reset_query(); ?>
  72. 	   </ul>
  73. 	   <ul class="tab-bd-con">
  74. 		<?php $args = array('numberposts' => 8, 'orderby' => 'rand',);$rand_posts = get_posts($args); foreach( $rand_posts as $post ): ?>				   
  75.                <li class="list-title"><span class="tab-icon"></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
  76.                <?php endforeach; wp_reset_query(); ?>
  77. 	    </ul>
  78.  
  79.         </div>
  80.    </div>
  81. </div>
  82. <div class="clear"></div>
第二步:将rand-hot-comment.php上传到主题inc文件夹内,并在需要显示的位置插入下列代码。
  1. get_template_part( '/inc/rand-hot-comment' );
第三步:将下列css代码,加入到主题style样式中。
  1. .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);}
  2. .tab-hd {overflow: hidden;height: 40px;line-height: 40px;}
  3. .tab-hd-con {float: left;text-align: center;cursor: pointer;height: 39px;border-right: 1px solid #ddd;font-size: 1pc;}
  4. .tab-hd-con {width: 25%;}
  5. .dom-display .current {display: block;}
  6. .tab-hd .current{border-bottom: 3px solid #c01e22;}
  7. .tab-hd .current a{color:#c01e22;}
  8. .tab-bd-con {display: none; overflow: hidden;}
  9. .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;}
  10. @media screen and (max-width: 480px) {.tab-bd li {width: 95%;margin: 0 0 0 0;}}
  11. .list-title {width: 84%;line-height: 210%; white-space: nowrap;word-wrap: normal;text-overflow: ellipsis; overflow: hidden;}
  12. .tab-site {overflow:hidden;background:#fff;padding-bottom:10px}
  13. .tab-bd li a{color:#555;}
  14. .tab-bd .list-title .tab-icon:before{content:'\f105'}
  15. .tab-bd .list-title .tab-icon{font-family:fontawesome; margin-right:5px;}
  16. .tab-bd li a:hover{color:#c01e22;text-decoration:underline}
  17. .tab-bd {background: #fff; padding:10px 15px;margin-top:-1px; border-top: 1px solid #ddd;}
第四步:将下列代码加到主题的script.js里。
  1. $(document).ready(function(){
  2. 	$("#layout-tab span:first").addClass("current");
  3. 	$("#layout-tab .tab-bd-con:gt(0)").hide();
  4. 	$("#layout-tab span").mouseover(function(){
  5. 	$(this).addClass("current").siblings("span").removeClass("current");
  6. 	$("#layout-tab .tab-bd-con:eq("+$(this).index()+")").show().siblings(".tab-bd-con").hide().addClass("current");
  7. 	});
  8. });

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

本文地址:https://www.chyiyang.cn/86.html
本文标题:WordPress 四分栏文章列表样式显示方法
版权声明:本站所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果,转载请写明出处!
所属分类: WordPress

发表评论


图片 表情