博客添加类似说说、微博的时间轴微语页面

2019-05-1617:10:11 12 156 人看过

我们可以在wordpress的基础上开发出形形式式的应用,实现各种功能。以前用来做博客,后来用来做企业官网。再后来有人在wordpress的基础上开发出了社区,现在还可以用来做小程序的后台。今天讲的这个内容,属于wordpress的一个功能扩展,就是在wordpress的基础上实现类似说说、微博那样的微语功能。前两天有朋友说喜欢我博客的微语页面,今天就抽时间整理了一下。希望对大家有用。

博客添加类似说说、微博的时间轴微语页面

具体效果请参考本博客微言微语页面。使用方法:

1、新建微语功能:将下面的代码复制粘贴到你主题的functions.php函数文件中,为wordpress添加微语功能。添加完成后,应该可以在wordpress后台菜单中找到“微语”这一项了。
//新建微语功能

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文件,将下面代码复制进去,上传到你主题的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="fa fa-user-circle"></i>:<?php the_author() ?>  <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="fa fa-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、创建一个新页面:进入wordpress后台,创建一个新页面,在模板一栏中选择“微言微语”,没错,就是我们上一步添加到pages目录下的那个模板。然后确认新建即可。这时候,wordpress的微语功能就基本实现了。只要将新建的页面添加到你的菜单中,就可以正常发表微语了,但是样式是非常简陋的,所以下一步才是最关键的——选择适合自己CSS样式。

 

4、为微语页面添加CSS样式,这里我直接将自己的CSS样式一起打包放到文末的文件里。大家可以根据自己的情况进行修改。

注意事项:打包的文件里还有一张名为"bolangxian"(波浪线)的图片,需要上传到你自己的服务器,并且修改代码中的引用路径。这个微语页面使用了Font Awesome字体图标,需要安装font awesome 4 menus插件(或者直接将Font Awesome字体放到网站目录下)才能正常显示。

文件下载 文件名称:微语页面文件 文件大小:4KB
下载地址

发表评论

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

目前评论:12   其中:访客  7   博主  5

    • avatar isdola 2

      真是太感谢了,自从留言后每天进来看一遍,今天终于等到你发文了,再次谢谢!
      我粗略的使用了一下该功能,并简单的看了一下代码,感觉还有不少可以优化的地方,比如:
      1.单篇微语链接格式不能自定义为.html形式;
      2.单篇微语不支持自定义SEO设置;
      3.单篇微语不能设置标签;
      4.微语页面自适应性不好;
      5.CSS样式过于冗余;
      6.其他等等
      我到时看看能不能让这个功能与主题其他功能更加统一,整合起来。
      最后,再次感谢博主的分享!

        • avatar Action Admin

          @isdola 的确比较粗糙,你优化好记得发我一份,哈哈。

            • avatar isdola 2

              @Action 可以啊,麻烦博主回复一条评论给我,我私信邮件发给你,之前的评论留言邮件已经让我删了

          • avatar isdola 2

            花了两天时间,终于把他集成成分类布局啦,哈哈 :mrgreen:

              • avatar Action Admin

                @isdola 你的网站很好看呀,logo制作得也不错。

                  • avatar isdola 2

                    @Action LOGO灵感来自你的LOGO,你的LOGO简单,大气,我就丑多了,于是就想仿照你的样子搞一个。起初的时候一直搞不好要怎么弄,心里还想过让你帮我设计一个,但是想想还是算了,毕竟这想法不太现实。于是就自己瞎弄了一个 :oops:

                • avatar 张波博客 4

                  我的博客的微语存在了几天被我关了,感觉没大用

                    • avatar Action Admin

                      @张波博客 嗯嗯,需要看个人需求。

                    • avatar 青山 3

                      以前经常折腾这些,现在换简单主题了,不大在意这些了

                        • avatar Action Admin

                          @青山 对呀,以前一个微语页面可以折腾好久。

                        • avatar 锋言锋语 1

                          这个好,可以考虑集成到我的主题里去!

                            • avatar Action Admin

                              @锋言锋语 可以试一下,挺好玩的。