原来改的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>';
}
}
本文作者：ZKCOI
文章名称：将DUX的快讯分类模板改成个人说说
文章链接：https://www.zkcoi.com/365up/program/2672.html
本站资源仅供个人学习和交流，如若转载，请注明出处，详见《免责声明》。
微信扫一扫 
支付宝扫一扫 
