Ripro美化添加一个新首页文章标题4列展示模块

模块代码在主题目录/parts/home-mode新建4ghot.php文件

<?php //按时间获得浏览器最高的文章 function post_viewed_tab($mode = ”, $limit =”, $days = ”, $display = true) { global $wpdb, $post; $today = date(“Y-m-d H:i:s”); //获取今天日期时间 $daysago = date( “Y-m-d H:i:s”, strtotime($today) – ($days * 24 * 60 * 60) ); //Today – $days $where = ”; $temp = ”; if(!empty($mode) && $mode != ‘both’) { $where = “post_type = ‘$mode’”; } else { $where = ‘1=1’; } $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”); if($most_viewed) { foreach ($most_viewed as $post) { $post_views = intval($post->views); $post_views = number_format($post_views); $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>”; } } else { $temp = ‘<a>’.__(‘N/A’, ‘Nana’).'</a>’.”\n”; } if($display) { echo $temp; } else { return $temp; } } ?> <?php //按时间获得评论数最多的文章 function hot_comment_viewed_tab($number, $days){ global $wpdb, $post; $today = date(“Y-m-d H:i:s”); //获取今天日期时间 $daysago = date( “Y-m-d H:i:s”, strtotime($today) – ($days * 24 * 60 * 60) ); //Today – $days $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 “; $posts = $wpdb->get_results($sql); $output = “”; if(empty($posts)) { $output = ‘<li>None data.</li>’; } else { foreach ($posts as $post){ $commentcount = $post->comment_count; if ($commentcount != 0) { $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>”; } } } echo $output; } ?> <div class=”section”> <div class=”container”> <div class=”tab-site”> <div id=”layout-tab” class=”tab-product”> <h2 class=”tab-hd”> <span class=”tab-hd-con”><a href=”javascript:”>置顶推荐</a></span> <span class=”tab-hd-con”><a href=”javascript:”>热门文章</a></span> <span class=”tab-hd-con”><a href=”javascript:”>热评文章</a></span> <span class=”tab-hd-con”><a href=”javascript:”>随机推荐</a></span> </h2> <div class=”tab-bd dom-display”> <ul class=”tab-bd-con current”> <?php $sticky = get_option(‘sticky_posts’);rsort( $sticky ); $sticky = array_slice( $sticky, 0, 5);query_posts( array( ‘post__in’ => $sticky, ‘caller_get_posts’ => 1 ) );if (have_posts()) :while (have_posts()): the_post();?> <li class=”list-title”><span class=”tab-icon”></span><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title(); ?></a></li> <?php endwhile; endif; ?> </ul> <ul class=”tab-bd-con”> <?php post_viewed_tab(‘post’,8,90, true, true);wp_reset_query(); ?> </ul> <ul class=”tab-bd-con”> <?php hot_comment_viewed_tab(8, 90);wp_reset_query(); ?> </ul> <ul class=”tab-bd-con”> <?php $args = array(‘numberposts’ => 8, ‘orderby’ => ‘rand’,);$rand_posts = get_posts($args); foreach( $rand_posts as $post ): ?> <li class=”list-title”><span class=”tab-icon”></span><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li> <?php endforeach; wp_reset_query(); ?> </ul> </div> </div> </div> <div class=”clear”></div> </div></div> <script> $(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”); }); }); </script>

添加样式代码

/**4ghot*/ .tab-site { overflow: hidden; border: 1px solid #f6f6f6; border-radius: 10px; } .ripro-dark .tab-site { background-color: #29B6F6; border: 2px solid #FFEB3B; } .ripro-dark .tab-bd { border-top: 1px solid #2b2b2b; background: #34495e; padding: 5px; } .ripro-dark .tab-hd-con { border-right: 1px solid #2b2b2b; } .tab-hd { overflow: hidden; height: 40px; line-height: 40px; margin: 5px; } .tab-hd-con { float: left; text-align: center; cursor: pointer; height: 39px; border-right: 1px solid #f6f6f6; font-size: 1pc; } .tab-hd-con { width: 25%; } .dom-display .current { display: block; } .tab-hd .current a { /*color: #2c63ff;*/ text-decoration: none } .ripro-dark .tab-hd .current a { text-decoration: none } .tab-bd-con { display: none; overflow: hidden; height: 100px; } .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; } .tab-bd li a { color: #555; } .ripro-dark .tab-bd li a { color: #f6f6f6; } .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: #2c63ff;*/ text-decoration: none } .tab-bd { background: #fff; padding: 0px 15px; margin-top: -1px; border-top: 1px solid #f6f6f6; }