为WordPress添加说说、微博的时间轴微语页面

2020年3月5日08:54:41 4 92 views 8925字阅读29分45秒

相信很多朋友自从QQ慢慢被微信超越开始,就很少发说说了,以前的我们都习惯性的有事没事,三天两头在QQ空间发布说说。现在很多站长虽说会经常更新网站内容,但感觉站内缺少一个说说功能确实会觉得少了点什么,毕竟这个回忆的东西是很难诶替代的。相信这一方便,80、90后的朋友们就特别有发言权了!

为WordPress添加说说、微博的时间轴微语页面

作为90后的我是极其喜欢这个功能的,有时候心情无聊闲杂的时候,都会通过这个微语讲述一些自己的内心想法。其实,这是WordPress的一个扩展功能,就是在WordPress的基础上实现类似说说、微博那样的微语功能。

有关注叶先生博客的朋友们或许会知道,在此之前也有更新过一个类似的说说文章,只是后面感觉这个效果更加喜欢,所以就迫不急待的想要分享出来。

使用方法

1、把下面代码复制粘贴到主题里的functions.php函数文件中,为WordPress添加微语功能,完成后便可在WP后台菜单中找到“微语”这一项。

    //新建微语功能 
    add_action('init', 'my_shuoshuo');
    function my_shuoshuo()
    { $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' => true, 'hierarchical' => false,
    'menu_position' => null, 'supports' => array('editor','author','title','comments') );
    register_post_type('weiyu',$args);
    }

2、新建一个template-weiyu.php文件,将下面代码复制进去,上传到主题里的pages目录层级中。

展开

    <?php
    /*
    Template Name: 微言微语
    */
    ?>
    <?php get_header(); ?>
    <style type="text/css">
    .weiyu-header h1 {
        font-size: 12px;
        font-size: 1.6rem;
        line-height: 30px;
        text-align: center;
        margin: 0 0 15px 0;
    }
    .weiyu-title {
        font-size: 13px;
        margin: 10px -21px 10px -21px;
        padding: 0 15px;
        border-bottom: 1px solid #ebebeb;
        border-left: 5px solid #0088cc;
    }
    </style>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <header class="weiyu-header">
                            <h1 class="single-title"><?php the_title(); ?></h1>
                            <h3 class="weiyu-title">目前有 <?php $count_posts = wp_count_posts('weiyu'); echo $published_posts = $count_posts->publish;?> 个微语,于<?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'weiyu')");$last = date('Y年n月j日', strtotime($last[0]->MAX_m));echo $last; ?>更新。
                             </h3>
                        </header>
                            <main id="main" class="site-main" role="main">
                            <!--noptimize-->
                            <div class="weiyu">
                                 <ul class="archives-monthlisting">
                                 <?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;query_posts('post_type=weiyu&post_status=publish&showposts=' . $limit=15 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>
                                 <li><?php echo get_avatar( get_the_author_email(), 40 ); ?>
                                 <div class="calendar-year">
                                 <div class="cal-year"><?php echo get_the_time('y') ?></div>
                                 </div>
                                 <div class="calendar">
                                 <div class="cal-month month-<?php echo get_the_time('m') ?>"><?php echo get_the_time('M') ?></div>
                                 <div class="cal-date"><?php echo get_the_time('j') ?></div>
                                 </div><em></em>
                                 <div class="weiyu-content"><?php the_content(); ?><br/><div class="weiyu-meta"><span><i class="zm zm-user-circle"></i>:<?php the_author() ?>&nbsp;&nbsp;<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="<?php _e( '点赞', 'begin' ); ?>" class="dingzan<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>"><i class="zm zm-thumbs-o-up"></i>:(<i class="count"><?php if( get_post_meta($post->ID,'zm_like',true) ){
                                     echo get_post_meta($post->ID,'zm_like',true);
                                     } else {
                                         echo '0';
                                         }?></i>)</a></span></div>
                                 </div>
                                 <?php endwhile;endif; ?>
                                 </li>
                                 </ul>
                            </div>
                            <!--/noptimize-->
                            </main><!-- .site-main -->
                    </article><!-- #page -->
                <?php begin_pagenav(); ?>
    <?php get_footer(); ?>

3、进入WP后台,创建一个新页面,在模板一栏中选择“微言微语”,然后确认新建即可。这时候WordPress的微语功能就基本实现了,接下来只需将新建的页面添加到我们的菜单中,便可正常发表微语了。

但样式看起来是比较简陋的,所以接下来就是美化自己CSS样式。

CSS样式美化

展开

复制以下代码加到主题的style.css文件中,Begin主题可添后台添加,也可在FTP下载下来加,大家可根据自己的习惯进行修改。

需要注意的是代码中/*波浪线*/bolangxian.png路径注意修改成自己的。

    /*微语*/
    strong { font-weight: normal;}
    .weiyu {
    position: relative;
    padding: 10px 0;
    }
    .weiyu li {
    padding: 8px 0;
    display: block;
    }
    .weiyu-content {
    box-shadow: 0 0 3px RGBA(0,0,0,.15);
    background-color: #f9f9f9;
    border:1px #ccc solid;
    border-radius: 4px;
    font-size: 1.0em;
    line-height:1.5em;
    margin:0 150px 0 150px;
    letter-spacing: 1px;
    padding: 20px 20px 0px 30px;
    color: #666;
    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+, 文本行的任意字内断开 */
    }
    .weiyu-content p{margin:0;}
    /*作者*/
    .weiyu-meta {text-align: right;letter-spacing: 0px;margin-top:-15px;}
    .weiyu-meta span{background-color:#f9f9f9;border-radius:3px;padding:2px 5px;font-size:13px}
    .weiyu-meta a {color: #666 !important;}
    /*年月日*/
    .calendar{text-align:center;position:relative;margin-bottom:5px;margin-right:-5px;margin-top:0;border:1px solid #c9c9c9;-webkit-border-top-left-radius:7px;-webkit-border-bottom-right-radius:7px;border-radius-topleft:7px;border-radius-bottomright:7px;border-top-left-radius:7px;border-bottom-right-radius:7px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;top:20px;float:left;margin-left: 3px;-webkit-box-shadow:#c6c6c6 1px 1px 3px;box-shadow:#c6c6c6 1px 1px 3px}
    .calendar-year{text-align:center;position:relative;margin-bottom:5px;margin-right:-5px;margin-top:0;border:1px solid #c9c9c9;-webkit-border-top-left-radius:7px;border-bottom-left-radius:7px;top:39px;float:left;margin-left: 27px;}
    .cal-year{color:#b2b1b2;background-color:#e9e9e9;text-shadow:white -1px -1px 1px;-webkit-border-top-left-radius:6px;border-radius-bottomleft:6px;border-bottom-left-radius:6px;letter-spacing:-2px;font:bold 15px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:1px 4px 2px 0;text-align:center;border:1px solid #fff}
    .cal-month{-webkit-border-top-left-radius:6px;border-radius-topleft:6px;border-top-left-radius:6px;font-size:10px;font-weight:bold;color:#fff;letter-spacing:0;text-transform:uppercase;padding:3px 10px}
    .cal-date{color:#222;background-color:#e9e9e9;text-shadow:white -1px -1px 1px;-webkit-border-bottom-right-radius:6px;border-radius-bottomright:6px;border-bottom-right-radius:6px;letter-spacing:-2px;font:bold 21px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:1px 4px 2px 0;text-align:center;border:1px solid #fff}
    .month-01{background-color:#767c8f}.month-02{background-color:#345abe}.month-03{background-color:#37838d}.month-04{background-color:#55b06c}.month-05{background-color:#409ad5}.month-06{background-color:#be63c5}
    .month-07{background-color:#f79445}.month-08{background-color:#4e1e00}.month-09{background-color:#a04262}.month-10{background-color:#284461}.month-11{background-color:#4d1d77}.month-12{background-color:#af1919}
    /*波浪线*/
    .weiyu li em{float:left;background:url("bolangxian.png") no-repeat;width:55px;height:10px;margin:42px 0 0 26px;}
    /*头像*/
    .weiyu .avatar{border-radius: 50%;margin: 26px 35px 0 5px;float:right;padding: 0px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
    .weiyu li:hover .avatar {
    transform: rotate(360deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
    /*前面的轴*/
    .weiyu:before {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    left: 105px;
    content: "";
    top:0px;
    }
    .weiyu-content:before {
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: -51px;
    background: #fff;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    content: "";
    box-shadow: inset 0 0 2px #0c0;
    }
    .weiyu-content:after {
    position: absolute;
    top: 42px;
    bottom: 0px;
    left: -49px;
    background: #ccc;
    height: 8px;
    width: 8px;
    border-radius: 6px;
    content: "";
    }
    .weiyu li:hover .weiyu-content:after {
    background: #0c0;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    }
    .weiyu li:hover .weiyu-content:before {-webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);}
    /*后面的轴*/
    .weiyu:after {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    right: 100px;
    content: "";
    top:0px;
    }
    .weiyu-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;
    }
    .weiyu-meta:after {
    position: absolute;
    top: 44px;
    bottom: 0px;
    right: -54px;
    background: #ccc;
    height: 8px;
    width: 8px;
    z-index:2;
    border-radius: 6px;
    content: "";
    }
    .weiyu li:hover .weiyu-meta:after {
    background: #0c0;
    }
    @media screen and (max-width: 550px) { 
    .weiyu-content {margin:0 30px 0 30px;padding: 10px 3px 0px 8px;font-size:0.9em;}
    .calendar{left: -46px;top:8px;margin-right:-46px;}
    .cal-month{font-size:8px;padding:0px 3px}
    .cal-date{font:bold 13px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;}
    .calendar-year{left: -46px;top:26px;}
    .cal-year{font:bold 9px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:0 1px 0 0;}
    .weiyu:before {left: 20px;}
    .weiyu-content:before {left: -16px;top:25px;}
    .weiyu-content:after {left: -14px;top:27px;}
    .weiyu:after {right: 20px;}
    .weiyu-meta:before {right: -16px;top:25px;}
    .weiyu-meta:after {right: -14px;top:27px;}
    .weiyu .avatar{margin: 16px -17px 0 5px;width: 30px;height: 30px;}
    .weiyu li em{float:left;width:10px;height:10px;margin:25px 0 0 -12px;}
    .weiyu-meta span{font-size:10px}
    }

注意事项

这个微语页面叶先生使用的是阿里巴巴矢量图标库,需要自行修改成Iconfont-阿里巴巴矢量图标库才可以显示。也可以安装font awesome 4 menus插件(或者直接将Font Awesome字体放到网站目录下),这个看个人的使用习惯。

template-weiyu.php文件内2段图标可自行修改

  1. zm zm-user-circle
  2. zm zm-thumbs-o-up

个人感觉这个效果还是挺不错的,具体演示效果可以看通过本站右上角的说说导航栏。

叶先生
  • 本文由 发表于 2020年3月5日08:54:41
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,叶先生你知道怎么加一个吗?说实话我是不知道的,不过在鸟叔这里看到了这个教程,所以今...
WordPress如何设置只允许游客浏览指定的分类文章 WordPress

WordPress如何设置只允许游客浏览指定的分类文章

有朋友会问,WordPress如何设置只允许游客浏览指定的分类文章,因为有些分类的文章我不想未登录的用户能够浏览。 不知道是心里作怪,还是好奇心里,感叹这个世界奇葩的人还真不少,不过能有什么办法呢,谁...
如何判断网站是否采用织梦Dedecms搭建 网站建设

如何判断网站是否采用织梦Dedecms搭建

今天有朋友来问叶先生,怎么才能够知道一个网站是否采用织梦Dedecms搭建。坦白说,这个不算太高深的技术,一是凭自己的建站经验,二来是从中看一些细节。只要稍微熟悉一点dedecms的站长或者技术人员都...
用PhpStudy如何在本地搭建WordPress WordPress

用PhpStudy如何在本地搭建WordPress

以前在还没用WordPress建站的时候一直想进行尝试,但后面发现不会在本地搭建,只能够购买域名和服务器进行搭建。但是因为网站上线之初因胡乱修改网站版面,导致网站整体崩溃无法进行恢复,所以只能选择删库...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:4   其中:访客  2   博主  2
    • Lvtu Lvtu 来自天朝的朋友 Safari浏览器 Mac OS X 10_15_3 中国 移动 4

      后面的“点赞”可以直接弄到我的微语上面用吗?

        • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省深圳市宝安区 电信

          回复 Lvtu 暂时没弄过,仔细研究有可能可以

            • Lvtu Lvtu 来自天朝的朋友 Safari浏览器 Mac OS X 10_15_3 中国 移动 4

              回复 叶先生 晕哦,我弄上去不刷新页面数据不增加 :arrow:

                • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省深圳市宝安区 电信

                  回复 Lvtu 我没弄过不知道