Mlldxe's Blog


A responsible Blog for WordPress

纯代码给WordPress添加一个说说/微语页面

2018年10月12日 12条评论 3.07k次阅读 14人点赞 _犬's

前言

emlog有一个微语功能，很受许多站长的欢迎。用来记录自己每日的所思所想，很是不错。查了许久百度整理到了以下代码实现了说说功能。

首先

我们需要使用 WordPress 的 register_post_type( ) 函数注册一个新的帖子类型，以方便日后编辑说说。将以下代码直接丢到主题的 functions.php 文件中去即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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); 
}

关于 register_post_type( ) 函数的使用，你可以查阅这篇文章：https://developer.wordpress.org/reference/functions/register_post_type/

添加说说/心情页面模板

添加完上述函数后，我们就可以在后台发现一个“说说”的菜单，通过菜单即可编辑说说，但是我们发现编辑完成后的说说并不能在前端显示出来，这是我们需要新建一个说说的页面模板控制其前端显示，将以下代码复制并另存为 page_shuoshuo.php ，并上传至主题根目录下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<?php /*
Template Name: 说说/心情
author: _犬's
url: https://mlldxe.cn/archives/224
*/
get_header(); 
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/vertical_timeline.css" />
<section class="container">
<div class="content-wrap">
<div class="content">
    <div style="background: #FFF; padding: 30px; border-radius: 5px;">
        <ul class="cbp_tmtimeline">
        <?php 
        query_posts("post_type=shuoshuo & post_status=publish & posts_per_page=-1");
        if ( have_posts() ) { 
        while ( have_posts() ) { 
        the_post(); ?>
            <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">
                <img src="http://blog.mlldxe.cn/beijing.jpg" class="avatar avatar-48" width="48" height="48">
                </div>
                <div class="cbp_tmlabel" >
                    <span style="font-size:14px;"><?php the_content(); ?></span>
                    <h2><?php the_title(); ?><span><?php echo get_bloginfo('name'); ?> | <?php echo get_bloginfo('description' ); ?></span></h2>
                </div>
            </li>
        <?php }
        } ?>
        </ul>
    </div>
</div> 
</div>
<?php get_sidebar(); ?>
</section>
<?php get_footer();?>

代码中所用 WordPress 函数官方文档如下：
have_posts(); ：https://developer.wordpress.org/reference/functions/have_posts/
query_posts(); ：https://developer.wordpress.org/reference/functions/query_posts/
the_post(); ：https://developer.wordpress.org/reference/functions/the_post/
the_time(); ：https://developer.wordpress.org/reference/functions/the_time/
the_content(); ：https://developer.wordpress.org/reference/functions/the_content/
the_title(); ：https://developer.wordpress.org/reference/functions/the_title/
get_bloginfo(); ：https://developer.wordpress.org/reference/functions/get_bloginfo/

CSS样式（Style）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

/** 垂直时间线CSS样式 */
 
.cbp_tmtimeline {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
} 
 
/* The line */
.cbp_tmtimeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	background: #afdcf8;
	left: 20%;
	margin-left: -6px;
}
 
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
	display: block;
	width: 30%;
	padding-right: 100px;
	position: absolute;
	color: #AAA;
}
 
.cbp_tmtimeline > li .cbp_tmtime span {
	display: block;
	text-align: right;
}
 
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
	font-size: 0.9em;
	color: #bdd0db;
}
 
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
	font-size: 2.9em;
	color: #24a0f0;
}
 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
	color: #7878f0;
}
 
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
	margin: 0 0 15px 25%;
	background: #24a0f0;
	color: #fff;
	padding: 0.8em;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	border-radius: 5px;
}
 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
	background: #7878f0;
}
 
.cbp_tmtimeline > li .cbp_tmlabel h2 { 
	border-bottom: 0px;
	border-top:1px dashed #FFF; 
	font-size:16px; 
	height: 24px; 
	padding: 5px 3px 12px; 
	margin:0px;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 > span { 
	font-size: 12px; 
	float: right; 
	text-align: center; 
	line-height: 24px; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
 
/* The triangle */
.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: 10px;
	top: 10px;
}
 
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
	border-right-color: #7878f0;
}
 
/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
	width: 48px;
	height: 48px;
	font-family: 'ecoico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 48px;
	line-height: 48px;
	-webkit-font-smoothing: antialiased;
	position: relative;
	color: #fff;
	background: #46a4da;
	border-radius: 50%;
	box-shadow: 0 0 0 8px #afdcf8;
	text-align: center;
	left: 20%;
	top: 0;
	margin: 0 0 0 -25px;
}
.cbp_tmtimeline > li .cbp_tmicon >img {
	border-radius: 50%; 
	position: absolute; 
	top: 0px; 
	left: 0px;
}
 
/* Example Media Queries */
@media screen and (max-width: 65.375em) {
 
	.cbp_tmtimeline > li .cbp_tmtime span:last-child {
		font-size: 1.5em;
	}
}
 
@media screen and (max-width: 47.2em) {
	.cbp_tmtimeline:before {
		display: none;
	}
 
	.cbp_tmtimeline > li .cbp_tmtime {
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}
 
	.cbp_tmtimeline > li .cbp_tmtime span {
		text-align: left;
	}
 
	.cbp_tmtimeline > li .cbp_tmlabel {
		margin: 0 0 30px 0;
		padding: 1em;
		font-weight: 400;
		font-size: 95%;
	}
 
	.cbp_tmtimeline > li .cbp_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #24a0f0;
		top: -20px;
	}
 
	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
		border-right-color: transparent;
		border-bottom-color: #7878f0;
	}
 
	.cbp_tmtimeline > li .cbp_tmicon {
		position: relative;
		float: right;
		left: auto;
		margin: -55px 5px 0 0px;
	}	
}

代码部署完成后前往后台新建一个页面，页面模板选择“说说/心情”即可。

效果演示

请移步：https://mlldxe.cn/shuoshuo

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
点赞
最后编辑：2019年5月30日
  1. 超人说道：
    2018年10月18日 下午7:32
    QQbrowser Android 7.1.1

    博主，最后一个CSS样式是放哪里的?我看到二次开发的那个首页就有类似说说的，怎么做到的 :kaixin:

    回复
    1. _犬's说道：
      2018年10月18日 下午9:15
      Google Chrome Windows 7

      自己改地址href= :huaji5: 他的我也不知道，待偷

      回复
  2. 超人说道：
    2018年10月18日 下午11:10
    QQbrowser Android 7.1.1

    我把你functions的代码放到里面了，结果后台没出现说说页面，怎么回事

    回复
    1. _犬's说道：
      2018年10月18日 下午11:27
      Google Chrome Windows 7

      认真阅读文字

      回复
  3. sama说道：
    2018年10月24日 下午8:57
    Sogou Explorer Windows 7

    ???

    回复
    1. _犬's说道：
      2018年10月24日 下午9:01
      Google Chrome Windows 7

      上梯子搞事情？

      回复
  4. 污雲说道：
    2018年12月6日 上午12:22
    MIUI Browser Android 7.1.2

    dalao，你看看，我那个地方弄错了，网址这边，http://blog.wy521.xyz/index.php/shuoshuo.html/

    回复
    1. _犬's说道：
      2018年12月6日 上午8:46
      Google Chrome Windows 7

      :yinxian: 就一个空白页，啥都没有。

      回复
  5. 污雲说道：
    2018年12月6日 上午9:40
    QQbrowser Android 7.1.2

    这个你看看http://blog.wy521.xyz/index.php/shuoshuo.html/

    回复
  6. 只猫说道：
    2019年5月29日 下午8:09
    Google Chrome Windows 10

    老哥 你这个是怎么弄得哇 弄了没效果啊

    回复
  7. 只猫说道：
    2019年5月29日 下午8:10
    Google Chrome Windows 10

    老哥你这个是怎么弄的啊 按照你的代码弄了 没法用啊

    回复
    1. _犬's说道：
      2019年5月30日 下午4:06
      Google Chrome Windows 10

      什么没法用

      回复

发表评论

电子邮件地址不会被公开。必填项已用 * 标注