前一阵子想给自己的网站增加一个好看一点的，可以发布自己简短动态、收集语录的说说模块。
找了几个不适配我用的子比主题
干脆自己弄了一个
1 wordpress中涉及的文件
- /wp-content/themes/主题/functions.php
- /wp-content/themes/主题/whisper.php （新建的模板页面）
2 修改functions.php文件最后面增加下面内容
在functions.php文件最后面增加下面内容
/*注册一个新的帖子类型，方便日后编辑说说*/
add_action('init', 'my_custom_shuoshuo_init');
function my_custom_shuoshuo_init() {
$labels = array(
'name' => '说说',
'singular_name' => '说说',
'all_items' => '所有说说',
'add_new' => '发表说说',
'add_new_item' => '撰写新说说',
'edit_item' => '编辑说说',
'new_item' => '新说说',
'view_item' => '查看说说',
'search_items' => '搜索说说',
'not_found' => '暂无说说',
'not_found_in_trash' => '没有已遗弃的说说',
'parent_item_colon' => '',
'menu_name' => '说说'
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author')
);
register_post_type('shuoshuo',$args);
}3 创建whisper.php文件
根据自己的主题在主题的对于模板页面目录新建文件，whisper.php （子比主题在zibll/pages目录下面）
下面是自己修改过的说说页面的代码：
增加了 一键发布的按钮。
增加了编辑选项（只有作者看得到）
手机浏览器大小自适应。不会超出了。
增加了点赞，评论功能。
复制后粘贴到whisper.php内
<?php
/**
* Template Name: 微语说说
* Description: 说说页面模板（适配Zibll，游客可点赞，全功能）
*/
// 处理点赞请求，最基础的GET方式，百分百能执行
if(isset($_GET['like']) && intval($_GET['like']) > 0){
$post_id = intval($_GET['like']);
$cookie_name = 'shuoshuo_like_'.$post_id;
// 没点过才处理
if(!isset($_COOKIE[$cookie_name])){
// 更新点赞数
$like_count = get_post_meta($post_id, 'shuoshuo_like', true);
$like_count = $like_count ? intval($like_count) : 0;
$like_count++;
update_post_meta($post_id, 'shuoshuo_like', $like_count);
// 设置Cookie，24小时内不能重复点赞
setcookie($cookie_name, '1', time() + 86400, COOKIEPATH, COOKIE_DOMAIN, is_ssl());
}
// 处理完，跳转回原来的页面，去掉参数
wp_redirect(remove_query_arg('like'));
exit;
}
get_header();
?>
<style type="text/css">
/** 缩小25%后的时间线CSS样式 */
.cbp_tmtimeline {
margin: 22px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
/* 中间的线 */
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 8px;
background: #afdcf8;
left: 20%;
margin-left: -4px;
}
/* 时间日期 */
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
width: 30%;
padding-right: 75px;
position: absolute;
font-size: 12px;
color: #AAA;
}
.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.675em;
color: #bdd0db;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 2.175em;
color: #24a0f0;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: #7878f0;
}
/* 右侧内容卡片（核心修复：长文本自动换行） */
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 11px 25%;
background: #24a0f0;
color: #fff;
padding: 1em 0.6em 0.6em 0.6em;
font-size: 0.9em;
font-weight: 300;
line-height: 1.6;
position: relative;
border-radius: 5px;
box-shadow: rgba(142, 142, 142, 0.3) 0px 4px 11px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.3) 0px 4px 11px 0px;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
overflow-x: hidden;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: #7878f0;
}
/* 小箭头 */
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #24a0f0;
border-width: 7px;
top: 7px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #7878f0;
}
/* 头像图标 */
.cbp_tmtimeline > li .cbp_tmicon {
width: 36px;
height: 36px;
position: relative;
color: #fff;
background: #afdcf8;
border-radius: 50%;
box-shadow: 0 0 0 6px #afdcf8;
text-align: center;
left: 20%;
top: 0;
margin: 0 0 0 -19px;
overflow: hidden;
}
.cbp_tmtimeline > li .cbp_tmicon >img {
border-radius: 50%;
position: absolute;
top: 0px;
left: 0px;
width: 36px;
height: 36px;
}
/* 编辑按钮样式 */
.shuoshuo-edit-btn {
position: absolute;
top: 6px;
right: 10px;
font-size: 12px;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: all 0.2s;
z-index: 10;
}
.shuoshuo-edit-btn:hover {
color: rgba(255,255,255,1);
text-decoration: none;
}
/* 发布按钮样式 */
.shuoshuo-publish-btn {
display: inline-block;
padding: 6px 16px;
font-size: 14px;
border-radius: 4px;
background: #24a0f0;
color: #fff !important;
text-decoration: none;
transition: all 0.2s;
}
.shuoshuo-publish-btn:hover {
background: #1e90d8;
color: #fff;
text-decoration: none;
}
/* 点赞评论按钮样式 */
.shuoshuo-action-btn {
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: all 0.2s;
margin-right: 15px;
}
.shuoshuo-action-btn:hover {
color: rgba(255,255,255,1);
text-decoration: none;
}
.shuoshuo-action-btn.liked {
color: rgba(255,255,255,1) !important;
}
/* 响应式适配 */
@media screen and (max-width: 65.375em) {
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.125em;
}
}
@media screen and (max-width: 47.2em) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline > li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 15px 0;
}
.cbp_tmtimeline > li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 22px 0;
padding: 1.75em 0.75em 0.75em 0.75em;
font-weight: 400;
font-size: 95%;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
overflow-x: hidden;
}
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: auto;
left: 20px;
border-right-color: transparent;
border-bottom-color: #24a0f0;
top: -15px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #7878f0;
}
.cbp_tmtimeline > li .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: -41px 5px 0 0px;
}
}
</style>
<section class="container">
<div class="content-wrap">
<div class="content">
<div style="background: #FFF; padding: 22px; border-radius: 5px;">
<!-- 发布说说按钮：只有有权限的用户才能看到 -->
<?php if (current_user_can('publish_posts')) : ?>
<div style="text-align: right; margin-bottom: 15px;">
<a href="<?php echo admin_url('post-new.php?post_type=shuoshuo'); ?>" class="shuoshuo-publish-btn">
<i class="fa fa-plus"></i> 发布说说
</a>
</div>
<?php endif; ?>
<ul class="cbp_tmtimeline">
<?php
$args = array(
'post_type' => 'shuoshuo',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
);
$shuoshuo_query = new WP_Query($args);
if ( $shuoshuo_query->have_posts() ) {
while ( $shuoshuo_query->have_posts() ) {
$shuoshuo_query->the_post();
$comment_count = get_comments_number();
// 获取我们自己的点赞数
$like_count = get_post_meta(get_the_ID(), 'shuoshuo_like', true);
$like_count = $like_count ? intval($like_count) : 0;
?>
<li>
<time class="cbp_tmtime"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></time>
<div class="cbp_tmicon">
<?php echo get_avatar(get_the_author_meta('ID'), 36); ?>
</div>
<div class="cbp_tmlabel" >
<!-- 编辑按钮：只有能编辑这篇说说的用户才能看到 -->
<?php if (current_user_can('edit_post', get_the_ID())) : ?>
<a href="<?php echo admin_url('post.php?post='.get_the_ID().'&action=edit'); ?>" class="shuoshuo-edit-btn">
<i class="fa fa-pencil"></i> 编辑
</a>
<?php endif; ?>
<!-- 说说内容 -->
<span style="font-size:14px; display: block; margin-bottom: 10px;"><?php the_content(); ?></span>
<!-- 底部操作栏：左点赞评论，右标题 -->
<div style="overflow: hidden; font-size: 12px;">
<div style="float: left;">
<a href="<?php the_permalink(); ?>#comments" class="shuoshuo-action-btn">
<i class="fa fa-comment-o"></i> <?php echo $comment_count; ?>
</a>
<a href="?like=<?php the_ID(); ?>" class="shuoshuo-action-btn shuoshuo-like-btn" data-post-id="<?php the_ID(); ?>">
<i class="fa fa-thumbs-o-up"></i> <?php echo $like_count; ?>
</a>
</div>
<div style="float: right; font-size:14px;">
——— <?php the_title(); ?>
</div>
</div>
</div>
</li>
<?php
}
wp_reset_postdata();
} else {
echo '<li style="text-align:center; color:#999;">暂无说说内容~</li>';
}
?>
</ul>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</section>
<!-- 简单的Cookie检查，不用Ajax了 -->
<script type="text/javascript">
jQuery(document).ready(function($){
// 读取Cookie的工具函数
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
// 页面加载时，更新已点赞的按钮状态
$('.shuoshuo-like-btn').each(function(){
var post_id = $(this).data('post-id');
var cookie = getCookie('shuoshuo_like_'+post_id);
if(cookie){
// 已经点过赞了，更新状态
$(this).addClass('liked');
$(this).find('i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
// 点过了就去掉点击跳转
$(this).removeAttr('href');
$(this).click(function(){
alert('你已经点过赞啦~');
return false;
});
}
});
});
</script>
<?php get_footer(); ?>如果不适配你的主题，可以扔给AI修改下。
有了AI后，折腾这些省心多了。
登录wordpress后台→左边→页面选项 →增加一个页面。
按照下图来就行了
最后把这个页面添加到你的菜单内就完工了。
4 增加一个侧边栏小工具 显示最近5条说说
效果1
打开文件：打开你主题的 functions.php 文件
添加新代码：将下面的完整代码复制并粘贴到 functions.php 文件的最底部。
/*
* 侧边栏：最近说说小工具
* 作者：AI助手
* 功能：显示最近5条说说，带时间轴美化
*/
// 1. 注册小工具函数
function register_shenshuo_widget() {
register_widget('WP_Widget_Shenshuo');
}
add_action('widgets_init', 'register_shenshuo_widget');
// 2. 小工具类定义
class WP_Widget_Shenshuo extends WP_Widget {
public function __construct() {
parent::__construct(
'widget_shenshuo',
'侧边栏：最近说说',
array('description' => '显示最近的 5 条说说，带美化样式')
);
}
// 前端显示
public function widget($args, $instance) {
$title = !empty($instance['title']) ? $instance['title'] : '💭 最近说说';
echo $args['before_widget'];
// 标题
if ($title) {
echo $args['before_title'] . $title . $args['after_title'];
}
// 查询最近5条说说
$shuoshuo_query = new WP_Query(array(
'post_type' => 'shuoshuo', // 确保你的自定义类型叫 shuoshuo
'posts_per_page' => 5,
'post_status' => 'publish'
));
if ($shuoshuo_query->have_posts()) :
echo '<ul class="ss-widget-list">';
while ($shuoshuo_query->have_posts()) : $shuoshuo_query->the_post();
// 格式化日期
$date_m = get_the_date('m-d');
$date_y = get_the_date('Y');
?>
<li class="ss-item">
<div class="ss-time">
<span class="ss-m"><?php echo $date_m; ?></span>
<span class="ss-y"><?php echo $date_y; ?></span>
</div>
<div class="ss-content">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php
// 截取标题长度，防止过长
$short_title = mb_strimwidth(get_the_title(), 0, 20, '...');
echo $short_title;
?>
</a>
</div>
</li>
<?php
endwhile;
echo '</ul>';
wp_reset_postdata();
else :
echo '<p style="padding:10px; color:#999; font-size:12px;">暂无说说动态</p>';
endif;
echo $args['after_widget'];
}
// 后台表单
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : '💭 最近说说';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">标题：</label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<?php
}
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
// 3. 注入CSS样式 (解决重叠问题并美化)
function shenshuo_widget_styles() {
?>
<style>
/* 容器重置 */
.ss-widget-list {
list-style: none;
margin: 0;
padding: 0 10px; /* 左右留白 */
}
/* 单个列表项 */
.ss-item {
display: flex;
padding: 12px 0; /* 增加上下间距，解决重叠 */
border-bottom: 1px dashed #eee; /* 虚线分割 */
position: relative;
}
/* 去除最后一项的分割线 */
.ss-item:last-child {
border-bottom: none;
}
/* 斑马纹效果 (偶数项背景色) */
.ss-item:nth-child(even) {
background-color: #f9f9f9;
margin: 0 -10px; /* 背景色延伸到边缘 */
padding-left: 20px;
padding-right: 20px;
}
/* 时间区域 */
.ss-time {
width: 50px;
text-align: right;
margin-right: 15px;
flex-shrink: 0;
}
.ss-m {
display: block;
font-size: 16px;
font-weight: bold;
color: #333;
line-height: 1.2;
}
.ss-y {
display: block;
font-size: 12px;
color: #999;
margin-top: 2px;
}
/* 内容区域 */
.ss-content {
flex: 1;
border-left: 2px solid #e0e0e0; /* 左侧时间轴线 */
padding-left: 12px;
padding-top: 2px;
}
.ss-content a {
text-decoration: none;
color: #555;
font-size: 14px;
line-height: 1.6; /* 增加行高，防止文字拥挤 */
transition: color 0.2s;
display: block;
}
.ss-content a:hover {
color: #0073aa; /* 鼠标悬停颜色 */
}
/* 响应式适配 */
@media (max-width: 768px) {
.ss-m { font-size: 15px; }
.ss-content a { font-size: 13px; }
}
</style>
<?php
}
add_action('wp_head', 'shenshuo_widget_styles');效果2
/*
* 侧边栏：最近说说小工具 (修复图标重叠版)
*/
// 1. 注册小工具
function register_shenshuo_widget() {
register_widget('WP_Widget_Shenshuo');
}
add_action('widgets_init', 'register_shenshuo_widget');
class WP_Widget_Shenshuo extends WP_Widget {
public function __construct() {
parent::__construct(
'widget_shenshuo',
'侧边栏：最近说说',
array('description' => '显示最近的 5 条说说，修复了图标重叠问题')
);
}
// 前端显示
public function widget($args, $instance) {
$title = !empty($instance['title']) ? $instance['title'] : '💭 最近说说';
echo $args['before_widget'];
// 标题区域
if ($title) {
echo '<div class="ss-widget-header">';
echo '<h3 class="ss-widget-title">' . $title . '</h3>';
echo '</div>';
}
// 查询最近 5 条说说
$query = new WP_Query(array(
'post_type' => 'shuoshuo', // 确保你的说说类型是 shuoshuo
'posts_per_page' => 5,
'post_status' => 'publish'
));
if ($query->have_posts()) :
echo '<div class="ss-widget-list">';
while ($query->have_posts()) : $query->the_post();
// 获取日期
$date_m = get_the_date('m-d');
$date_y = get_the_date('Y');
?>
<div class="ss-item">
<!-- 左侧日期 -->
<div class="ss-date">
<span class="ss-day"><?php echo $date_m; ?></span>
<span class="ss-year"><?php echo $date_y; ?></span>
</div>
<!-- 中间分割线 -->
<div class="ss-line"></div>
<!-- 右侧内容 -->
<div class="ss-content">
<!-- 图标 -->
<div class="ss-icon-box">
<i class="fa fa-commenting-o"></i> <!-- 这里使用 FontAwesome 图标 -->
</div>
<!-- 文字 -->
<div class="ss-text">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php
// 截取标题长度，防止过长
$excerpt = mb_strimwidth(get_the_title(), 0, 30, '...');
echo $excerpt;
?>
</a>
</div>
</div>
</div>
<?php
endwhile;
echo '</div>'; // end ss-widget-list
wp_reset_postdata();
else :
echo '<div style="padding:15px; color:#999; font-size:13px;">暂无说说动态</div>';
endif;
echo $args['after_widget'];
}
// 后台表单
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : '💭 最近说说';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">标题：</label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<?php
}
}
// 3. 输出 CSS 样式 (修复重叠与美化)
add_action('wp_head', 'shenshuo_widget_css');
function shenshuo_widget_css() {
?>
<style>
/* --- 说说小工具容器 --- */
.ss-widget-list {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* --- 单条说说项 --- */
.ss-item {
display: flex;
align-items: stretch; /* 让子元素高度拉伸，方便画线 */
margin-bottom: 15px; /* 条目之间的间距 */
position: relative;
}
/* --- 左侧日期 --- */
.ss-date {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 45px;
flex-shrink: 0;
z-index: 2;
}
.ss-day {
font-size: 16px;
font-weight: bold;
color: #333;
line-height: 1;
}
.ss-year {
font-size: 12px;
color: #999;
margin-top: 5px;
}
/* --- 竖线 --- */
.ss-line {
width: 1px;
background-color: #e0e0e0;
margin: 5px 12px 0 12px; /* 上下左右间距 */
flex-shrink: 0;
}
/* --- 右侧内容区域 --- */
.ss-content {
flex: 1;
display: flex;
align-items: center; /* 关键：垂直居中图标和文字 */
padding-bottom: 5px;
}
/* --- 图标区域 (修复重叠核心) --- */
.ss-icon-box {
margin-right: 10px; /* 图标与文字的间距 */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ss-icon-box i {
font-size: 16px; /* 图标大小 */
color: #409EFF; /* 图标颜色：科技蓝 */
width: 24px; /* 固定宽度 */
height: 24px; /* 固定高度 */
background: #e8f3ff; /* 图标背景色 */
border-radius: 50%; /* 圆形 */
display: flex;
align-items: center;
justify-content: center;
line-height: 1 !important; /* 强制重置行高，防止重叠 */
}
/* --- 文字区域 --- */
.ss-text {
font-size: 14px;
color: #555;
line-height: 1.5; /* 舒适的行高 */
word-break: break-all; /* 防止长英文/链接撑破布局 */
}
.ss-text a {
text-decoration: none;
color: #555;
transition: color 0.2s;
}
.ss-text a:hover {
color: #409EFF;
}
/* --- 间隔条纹效果 --- */
/* 给偶数项加背景色，形成条纹 */
/* 由于结构是 div，我们需要稍微调整一下视觉上的条纹感 */
/* 这里采用底部边框或背景色的方式 */
/* 如果你想要背景色条纹，可以用这个 */
/* 注意：由于 HTML 结构限制，纯 CSS 隔行变色在 flex 布局中可能需要 nth-child */
.ss-item:nth-child(even) {
/* 可选：开启隔行变色背景 */
/* background: #fcfcfc; */
}
/* 标题美化 */
.ss-widget-header {
border-bottom: 2px solid #f0f0f0;
margin-bottom: 15px;
padding-bottom: 10px;
}
.ss-widget-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin: 0;
display: flex;
align-items: center;
}
.ss-widget-title::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 50%;
margin-right: 8px;
}
</style>
<?php
}© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容