分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress创建一个说说/时光轴页面
  • +
  • 11
  • 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 分类描述添加可视化编辑模式

      WordPress 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

      点击查看
    WordPress创建一个说说/时光轴页面
    6 + 2 =
    1. 1楼
      啪啪哒IT
      最后评论时间:2017/04/20 18:37
      来自天朝的朋友 谷歌浏览器 Linux 广东省广州市 联通
      :mrgreen: 一直想要实现这个东西,谢谢博主分享 :twisted:
      啪啪哒IT 2个月前 (04-20)回复
      • 帅气小琦琦
        最后评论时间:2017/06/24 23:20
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省 电信
        @啪啪哒IT 时光轴这个功能 个人觉得真心没有什么必要吧 :arrow:
        帅气小琦琦    7小时前回复
        • 啪啪哒
          最后评论时间:2017/04/20 18:37
          来自天朝的朋友 谷歌浏览器 MI 2 Build/LRX22G 广东省广州市 联通
          @帅气小琦琦 觉得对于我这种闲得蛋疼的人来说……可能会需要吧……
          啪啪哒 2个月前 (04-20)回复