后台添加说说模块

首先我们把以下代码，添加到主题根目录中的functions.php文件中。下面两步代码安装完成后，在后台页面，建立微语页面，在设置菜单，保存首页导航栏即可。

function create_shuoshuo_post_type() {
    $labels = array(
        'name'               => '说说',
        'singular_name'      => '说说',
        'menu_name'          => '说说',
        'name_admin_bar'     => '说说',
        'add_new'            => '新增说说',
        'add_new_item'       => '新增一条说说',
        'new_item'           => '新说说',
        'edit_item'          => '编辑说说',
        'view_item'          => '查看说说',
        'all_items'          => '所有说说',
        'search_items'       => '搜索说说',
        'not_found'          => '未找到说说',
        'not_found_in_trash' => '回收站中未找到说说'
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_rest' => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array('slug' => 'shuoshuo'),
        'capability_type'    => 'post',
        'hierarchical'       => false,
        'menu_position'      => 5,
        'supports'           => array('title', 'editor', 'author', 'comments')
    );

    register_post_type('shuoshuo', $args);
}
add_action('init', 'create_shuoshuo_post_type');

前端模版页面

在模板主题根目录新建一个名为page-shuo.php的文件，并将以下代码添加在其中：

<?php
/**
* Template Name: 说说/微语
*/
get_header();
?>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 页面整体背景色，选择莫兰迪色系的浅灰色 */
body {
background-color: #f5f5f0;
}
body.theme-dark .cbp_tmtimeline::before {
background: RGBA(255, 255, 255, 0.06)
}
ul.cbp_tmtimeline {
padding: 0
}
div.cbp_tmlabel > li .cbp_tmlabel {
margin-bottom: 0
}
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative
}
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
max-width: 70px;
position: absolute
}
.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #888888; /* 莫兰迪色系的深灰色 */
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
color: #759375; /* 莫兰迪色系的绿色 */
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: RGBA(255, 125, 73, 0.75)
}
div.cbp_tmlabel > p {
margin-bottom: 0
}
/* 调整列表项与头像的间距 */
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 45px 75px; /* 减少左边距，拉近与头像的距离 */
padding: 1.2em 1.5em;
font-weight: 300;
line-height: 1.6;
position: relative;
border-radius: 10px;
transition: all 0.3s ease 0s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 更柔和的阴影效果 */
cursor: pointer;
display: block;
}
.cbp_tmlabel:hover {
transform: translateY(-3px);
z-index: 1;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 悬停时更明显的阴影效果 */
}
/* 调整箭头的位置 */
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 10px;
top: 20px; /* 调整箭头的垂直位置 */
}
p.shuoshuo_time {
margin-top: 15px;
border-top: 1px dashed #ccc; /* 莫兰迪色系的浅灰色线条 */
padding-top: 8px;
font-family: 'Playfair Display', serif; /* 更具艺术感的字体 */
font-size: 0.9em;
color: #888888;
}
@media screen and (max-width:65.375em) {
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em
}
}
.shuoshuo_author_img img {
border: 2px solid #fff;
padding: 2px;
float: left;
border-radius: 50%;
transition: all 1.0s;
height: 60px;
margin-right: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.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)
}
/* 定义更多不同的莫兰迪色系背景颜色，增加多样性 */
.cbp_tmtimeline > li:nth-child(6n + 1) .cbp_tmlabel {
background-color: #e0c6d2;
}
.cbp_tmtimeline > li:nth-child(6n + 2) .cbp_tmlabel {
background-color: #c8d5e0; /* 浅蓝色 */
}
.cbp_tmtimeline > li:nth-child(6n + 3) .cbp_tmlabel {
background-color: #d2e0c6; /* 浅绿色 */
}
.cbp_tmtimeline > li:nth-child(6n + 4) .cbp_tmlabel {
background-color: #e0d2c6; /* 浅橙色 */
}
.cbp_tmtimeline > li:nth-child(6n + 5) .cbp_tmlabel {
background-color: #d2c6e0; /* 浅紫色 */
}
.cbp_tmtimeline > li:nth-child(6n) .cbp_tmlabel {
background-color: #c6d2e0; /* 浅蓝绿色 */
}
.cbp_tmtimeline > li:nth-child(6n + 1) .cbp_tmlabel:after {
border-right-color: #e0c6d2;
}
.cbp_tmtimeline > li:nth-child(6n + 2) .cbp_tmlabel:after {
border-right-color: #c8d5e0;
}
.cbp_tmtimeline > li:nth-child(6n + 3) .cbp_tmlabel:after {
border-right-color: #d2e0c6;
}
.cbp_tmtimeline > li:nth-child(6n + 4) .cbp_tmlabel:after {
border-right-color: #e0d2c6;
}
.cbp_tmtimeline > li:nth-child(6n + 5) .cbp_tmlabel:after {
border-right-color: #d2c6e0;
}
.cbp_tmtimeline > li:nth-child(6n) .cbp_tmlabel:after {
border-right-color: #c6d2e0;
}
/* 调整字体样式 */
.cbp_tmtimeline > li .cbp_tmlabel p {
margin-bottom: 8px;
font-family: 'Playfair Display', serif; /* 更具艺术感的字体 */
}
/* 增加间距 */
.cbp_tmtimeline > li {
margin-bottom: 30px;
}
/* 移动端样式调整 */
@media screen and (max-width: 768px) {
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 30px 60px; /* 进一步减少左边距 */
padding: 1em 1.2em; /* 减少内边距 */
}
.cbp_tmtimeline > li .cbp_tmlabel:after {
border-width: 8px; /* 缩小箭头尺寸 */
top: 15px; /* 调整箭头垂直位置 */
}
p.shuoshuo_time {
font-size: 0.8em; /* 缩小时间字体大小 */
}
}
</style>
<div id="primary" class="content-area" style="width:100%">
<main id="main" class="site-main" role="main">
<div class="cbp_shuoshuo">
<?php
$paged = (get_query_var('paged'))? get_query_var('paged') : 1;
// 使用 WP_Query 代替 query_posts
$args = array(
'post_type' =>'shuoshuo',
'post_status' => 'publish',
'posts_per_page' => 20,
'paged' => $paged
);
$query = new WP_Query($args);
$total_pages = $query->max_num_pages;
if ($query->have_posts()) : ?>
<ul class="cbp_tmtimeline" id="shuoshuo-list">
<?php
while ($query->have_posts()) : $query->the_post(); ?>
<li>
<span class="shuoshuo_author_img"><?php echo get_avatar(get_the_author_meta('ID'), 60); ?></span>
<a class="cbp_tmlabel" href="javascript:void(0)">
<p><?php the_content(); ?></p>
<p class="shuoshuo_time"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></p>
</a>
</li>
<?php endwhile;
wp_reset_postdata(); // 重置查询
?>
</ul>
<?php
if ($total_pages > 1) {
$big = 999999999; // 需要一个不太可能的整数
echo '<div class="pagination">';
echo paginate_links(array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, $paged),
'total' => $total_pages
));
echo '</div>';
}
?>
<?php
else : ?>
<h3 style="text-align: center;">你还没有发表说说噢！</h3>
<p style="text-align: center;">赶快去发表你的第一条说说心情吧！</p>
<?php
endif; ?>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<script type="text/javascript">
$(function () {
var oldClass = "";
var Obj = "";
$(".cbp_tmtimeline 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>
<?php
get_footer();

新建页面，选择模板

最后刷新前后端，后台在自定义页面选择模板【说说微语】即可。

效果预览：https://www.lifd.site/something-to-say/

除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.lifengdi.com/article/4278