原来改的dux样式感觉不像说说,https://www.zkcoi.com/shuo
所以又改了一个个别人的,https://www.zkcoi.com/shuoshuo
<?php /** * Template name: 说说页面 * Description: zke定制说说 */ // 获取链接列表 add_filter('show_admin_bar', '__return_true'); get_header(); $posts_per_page = 5; // 每页显示的文章数 $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; // 获取当前分页页码 ?> <main class="container"> <div class="content-wrap"> <div class="content-layout"> <!--主体开始--> <style type="text/css"> #shuoshuo_content{padding: 10px; /*min-height: 500px;*/} /* shuo */ body.theme-dark .shuo-list::before{background: RGBA(255, 255, 255, 0.06);} .shuo-title{margin-bottom:14px;}ul.shuo-list{padding: 0;} div class.shuo-label{margin-bottom: 0;} .shuo-list{margin: 30px 0 0 0; padding: 0; list-style: none; position: relative;} /* The line */ .shuo-list:before{/*content: '';*/ position: absolute; top: 0; bottom: 0; width: 4px; background: RGBA(0, 0, 0, 0.02); left: 80px; margin-left: 10px;} /* The date/time */ .shuo-list > li .shuo-list{display: block; /* width: 29%; */ /* padding-right: 110px; */ max-width: 70px; position: absolute;} .shuo-list > li .shuo-list span{display: block; text-align: right;} .shuo-list > li .shuo-list span:first-child{font-size: 0.9em; color: #bdd0db;} .shuo-list > li .shuo-list span:last-child{font-size: 1.2em; color: var(--tb--main);} .shuo-list > li:nth-child(odd) .shuo-list span:last-child{color: var(--tb--base);} div.shuo-label > p{margin-bottom: 0;} /* Right content */ .shuo-list > li .shuo-label{margin: 0 0 45px 65px; background: var(--tb--main); color: #fff; padding: .8em 1.2em .4em 1.2em; /* font-size: 1.2em; */ font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; transition: all 0.3s ease 0s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: pointer; display: block;} .shuo-label:hover{transform:scale(1.05); transform: translateY(-3px); z-index: 1; -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important} .shuo-list > li:nth-child(odd) .shuo-label{background: var(--tb--base);} /* The triangle */ .shuo-list > li .shuo-label:after{right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: var(--tb--main); border-width: 10px; top: 4px;} .shuo-list > li:nth-child(odd) .shuo-label:after{border-right-color: var(--tb--base);} p.shuoshuo_time{margin-top: 10px; border-top: 1px dashed #fff; padding-top: 5px;} /* Media */ @media screen and (max-width: 65.375em){.shuo-list > li .shuo-list span:last-child{font-size: 1.2em;} } .shuoshuo_author_img img{border: 1px solid #ddd; padding: 2px; float: left; border-radius: 64px; transition: all 1.0s;} .avatar{-webkit-border-radius: 100% !important; -moz-border-radius: 100% !important; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;} .zhuan{transform: rotateZ(720deg); -webkit-transform: rotateZ(720deg); -moz-transform: rotateZ(720deg);} </style> </head> <body> <div id="primary" class="content-area" style=""> <main id="main" class="site-main" role="main"> <section class="container"> <div id="shuoshuo_content "> <ul class="shuo-list zke"> <?php $args = array( 'category_name' => 'shuo', 'posts_per_page' => $posts_per_page, 'paged' => $paged ); // 定义缓存 ID $cache_id = 'shuo_query_' . serialize( $args ); // 尝试从缓存中获取查询结果 if ( false === ( $shuo_query = wp_cache_get( $cache_id ) ) ) { $shuo_query = new WP_Query( $args ); // 将查询结果存入缓存中,缓存有效期为1小时 wp_cache_set( $cache_id, $shuo_query, '', 3600 ); } if ( $shuo_query->have_posts() ) : while ( $shuo_query->have_posts() ) : $shuo_query->the_post(); $author_id = get_the_author_meta( 'ID' ); // 获取文章作者 ID $avatar_url = get_avatar_url( $author_id, 64 ); // 获取头像,设置尺寸为 64px // 输出头像 ?> <li> <span class="shuoshuo_author_img"><img src="<?php echo $avatar_url; ?>" class="avatar avatar-48" style="width:48px;height:48px"></span> <a class="shuo-label" href="<?php the_permalink();?>" target="_blank"> <div class="shuo-title"><h2 ><?php echo mb_strimwidth( get_the_title(), 0, 34, "", "utf-8" ); ?></h2></div> <div class="shuo-note"><?php echo get_the_excerpt(); ?></div> <p></p> <div class="shuo-time"><p class="shuoshuo_time"><i class="fa fa-clock-o"></i> <?php the_time( 'Y年n月j日G:i' ); ?> </p></div> </a> </li> <?php endwhile; zke_pagination( $shuo_query ); wp_reset_postdata(); else: get_template_part( 'content-404' ); endif; ?> </ul> </div> </section> </main> </div> <script type="text/javascript"> $(function () { var oldClass = ""; var Obj = ""; $(".shuo-list li").hover(function () { Obj = $(this).children(".shuoshuo_author_img"); Obj = Obj.children("img"); oldClass = Obj.attr("class"); var newClass = oldClass + " zhuan"; Obj.attr("class", newClass); }, function () { Obj.attr("class", oldClass); }) }) </script> <!--主体结束--> </div> </div> </div> </main> <?php get_footer();
分页部分原本打算调用dux的内置功能_moloader('mo_paging');,发现不好使,只能换成自己的。
//分页方法 function zke_pagination( $query ) { $pagination = paginate_links( array( 'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var( 'paged' ) ), 'total' => $query->max_num_pages, 'prev_next' => true, 'prev_text' => '« 上一页' , 'next_text' => '下一页 »' , 'mid_size' => 1, 'end_size' => 1, 'type' => 'array', 'show_all' => false, 'echo' => false, ) ); if ( ! empty( $pagination ) ) { echo '<div class="pagination"><ul>'; foreach ( $pagination as $page_link ) { // 判断当前链接是否为选中页面的链接 if ( strpos( $page_link, 'current' ) !== false ) { echo '<li class="active">' . $page_link . '</li>'; } elseif ( strpos( $page_link, 'prev' ) !== false ) { echo '<li class="prev-page">' . $page_link . '</li>'; } elseif ( strpos( $page_link, 'next' ) !== false ) { echo '<li class="next-page">' . $page_link . '</li>'; } else { echo '<li>' . $page_link . '</li>'; } } echo '</ul></div>'; } }
本文作者:𝙕𝙆𝘾𝙊𝙄
文章名称:将DUX的快讯分类模板改成个人说说
文章链接:https://www.zkcoi.com/365up/program/2672.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。