分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress创建一个说说/时光轴页面
+

WordPress创建一个说说/时光轴页面

WordPress创建一个说说/时光轴页面-BanYuner

其实这个代码之前我也有看到过,但是但是觉得没有需要就一直没有使用起来,现在时间长了,确实是有些话想要说说了,所以就开始启用这个说说页面了。

那么这个页面你可以用来作为说说的页面,同样的,加以设计,创建一个类似时光轴的页面也是完全可以的,这个就看个人的技术和需求了,这里我就直接引用原博主的代码了,代码方面来自王柏元的博客。

第一部分代码

首先我们需要添加第一部分代码到functions.php中去,直接添加到最后一个?>之前即可:

//新建说说功能 
add_action('init', 'my_custom_init');
function my_custom_init()
{ $labels = array( 'name' => '说说',
'singular_name' => '说说', 
'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, 
'exclude_from_search' =>true,
'query_var' => true, 
'rewrite' => true, 'capability_type' => 'post',
'has_archive' => false, 'hierarchical' => false, 
'menu_position' => null, 'supports' => array('editor','author','title', 'custom-fields') );
register_post_type('shuoshuo',$args); 
}

代码添加方面没有任何需要修改的,直接复制黏贴进去即可。

第二部分代码

此部分代码我们需要自行手动创建一个页面,之后将代码黏贴到这个页面中去,操作步骤如下:

  • 1.创建一个页面,名字可以自定义,这里我创建的是shuoshuo,那么页面名字就叫做shuoshuo.php
  • 2.将下面这部分代码完整的黏贴到上面的shuoshuo.php文件中。
  • 3.鉴于原作者的页面模板名字是中文,使用过程中可能存在问题,这里建议将Template Name: 说说中的说说修改为你记得英文字母,如shuoshuo。
  • 4.此部分需要解释的就到这里了,文末还有一部分。
<?php /*
Template Name: 说说
author: 王柏元
url: http://wangbaiyuan.cn
*/
 
get_header(); ?> 
<link rel="stylesheet" type="text/css" href="<?php echo THEME_URI.'/includes/css/my.css' ?>">
<div class="ssbody">
<div class="shuoshuo">
<ul class="archives-monthlisting">
<?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><span class="tt"><?php the_time('Y年n月j日G:H'); ?></span>
<div class="shuoshuo-content"><?php the_content(); ?><br/><div class="shuoshuo-meta"><span >—<?php the_author() ?></span></div></div><?php endwhile;endif; ?></li>
</ul>
</div> 
</div>
<?php get_footer('simple');?>

因为代码中有中文汉字,可能存在一定程度上面的乱码,这里两种方法,一种是替换,二中是直接删除文字,看个人爱好了。

第三部分代码

这部分代码是CSS,也就是说说的样式,这个部分代码我个人建议直接添加到上面中去,如果你不想放在一起,那么请单独创建一个CSS文件之后将下面的代码复制进去并且修改第二段代码中的引用路径,在第8行的位置,同样的,代码中的图片大家可以自行替换,这里就不提供了。那么代码如下:

#content-container{
background: url() top left repeat,url(http://wangbaiyuan.cn/wp-content/uploads/2015/01/background.jpg) top center no-repeat;
background-attachment: fixed;
background-size: 2px 2px,cover;
}
#body-container{
background: #72d0eb;
background-attachment: fixed;
background-size: 2px 2px,cover;
}body
.ssbody{
max-width:900px;
margin:0px auto;
background-attachment:fixed;
background-repeat: repeat;
color: #FFFFFF;
font-family: 隶书;
}

.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
color: #FFFFFF;
font-family: 隶书;
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: rgba(148, 137, 137, 0.43);
border:1px #FFF solid;
border-radius: 4px;
font-size: 1.2em;
line-height:1.5em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 30px;
min-height:60px;
position: relative;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */
}
.shuoshuo-content p{margin:0;}
/*作者*/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-10px;
}
/*时间*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;}
.shuoshuo li em{float:left;background:url("http://www.wuover.com/wp-content/themes/QIUYE/images/bolangxian.png") repeat-y;width:50px;height:10px;margin:42px 0 0 28px;}
.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
/*头像*/
.shuoshuo .zhutou{border-radius: 50%;margin: 25px 35px 0 5px;float:right;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
.shuoshuo li:hover .zhutou {
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
/*前面的轴*/
.shuoshuo:before {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
left: 164px;
content: "";
top:0px;
}
.shuoshuo-content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
position: absolute;
top: 42px;
bottom: 0px;
left: -40px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
background: #0c0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);}
/*后面的轴*/
.shuoshuo:after {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
right: 100px;
content: "";
top:0px;
}
.shuoshuo-meta:before {
position: absolute;
top: 42px;
bottom: 0px;
right: -56px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
z-index:2;
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-meta:after {
position: absolute;
top: 44px;
bottom: 0px;
right: -54px;
background: #ccc;
height: 8px;
width: 8px;
z-index:2;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
background: #0c0;
}
@media screen and (max-width: 800px) {
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:1.2em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}

.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}

.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

那么如果你想要将两段代码弄在一起的话,那么请用下面的代码替换第二段代码中的第8行代码即可:

<style type="text/css">
#content-container{
background: url() top left repeat,url(http://wangbaiyuan.cn/wp-content/uploads/2015/01/background.jpg) top center no-repeat;
background-attachment: fixed;
background-size: 2px 2px,cover;
}
#body-container{
background: #72d0eb;
background-attachment: fixed;
background-size: 2px 2px,cover;
}body
.ssbody{
max-width:900px;
margin:0px auto;
background-attachment:fixed;
background-repeat: repeat;
color: #FFFFFF;
font-family: 隶书;
}
 
.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
color: #FFFFFF;
font-family: 隶书;
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: rgba(148, 137, 137, 0.43);
border:1px #FFF solid;
border-radius: 4px;
font-size: 1.2em;
line-height:1.5em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 30px;
min-height:60px;
position: relative;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */
}
.shuoshuo-content p{margin:0;}
/*作者*/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-10px;
}
/*时间*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;}
.shuoshuo li em{float:left;background:url("http://www.wuover.com/wp-content/themes/QIUYE/images/bolangxian.png") repeat-y;width:50px;height:10px;margin:42px 0 0 28px;}
.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
/*头像*/
.shuoshuo .zhutou{border-radius: 50%;margin: 25px 35px 0 5px;float:right;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
.shuoshuo li:hover .zhutou {
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
/*前面的轴*/
.shuoshuo:before {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
left: 164px;
content: "";
top:0px;
}
.shuoshuo-content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
position: absolute;
top: 42px;
bottom: 0px;
left: -40px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
background: #0c0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);}
/*后面的轴*/
.shuoshuo:after {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
right: 100px;
content: "";
top:0px;
}
.shuoshuo-meta:before {
position: absolute;
top: 42px;
bottom: 0px;
right: -56px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
z-index:2;
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-meta:after {
position: absolute;
top: 44px;
bottom: 0px;
right: -54px;
background: #ccc;
height: 8px;
width: 8px;
z-index:2;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
background: #0c0;
}
@media screen and (max-width: 800px) {
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:1.2em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}
 
.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}
 
.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}
</style>

后续步骤

那么三段代码或者说连段代码已经形成了,我们需要的就是让功能展示出来了。如果代码添加没有问题,并且一切就绪的话,你会在后台看到如下界面:
WordPress创建一个说说/时光轴页面-BanYuner

看到这界面证明你至少成功了,那么接下来我们需要进入页面选项中新建一个页面,页面模板就选择你你刚刚创建的模板名称,如果你按照我的教程来的话,应该就是shuoshuo了。接下来就是输入页面名称后发布即可。

这个时候你就可以在说说类目中创建一个说说看看效果了。

有问题或者还不清楚的请留言告知。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress创建一个说说/时光轴页面
支付宝(点击图片切换)
扫码,支持我
WordPress创建一个说说/时光轴页面
微信(点击图片切换)
扫码,手机看
WordPress创建一个说说/时光轴页面
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • WordPress 评论中嵌入图片

    WordPress 评论中嵌入图片

    今天在知更鸟博客看到了这篇文章,虽然文章本身的原理很简单,但是通过这个原理我相信可以了解到信息或者说可以达到举一反三 ...

    点击查看
  • 啪啪哒
  • 帅气小琦琦
WordPress创建一个说说/时光轴页面
1 + 0 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 1楼
    啪啪哒IT
    :mrgreen: 一直想要实现这个东西,谢谢博主分享 :twisted:
    啪啪哒IT 来自天朝的朋友 谷歌浏览器 Linux 广东省广州市 联通 3个月前 (10-12)回复