使用代码实现wordpress说说、短句、微语功能

2018/07/0423:14:06使用代码实现wordpress说说、短句、微语功能已关闭评论 1,701

使用博客过程中，一直想使用wordpress说说这个功能，有时候突然看到一句自己喜欢的话语，也可以记录下来。或者发表一条自己的心情说说。在百度搜搜索说说、微语功能相关教程。看了很多博客大神的教程，例如：百家网络(秋叶网络博客)、流年哔哔博客、知言、王柏元，诗梦博客等等...

记得几年前最开始折腾这个说说功能的时候，是参考的百家网络博客的文章，“纯代码给wordpress增加说说/微博/微语功能”，现在该博客已经更名了。现在更换主题后还是觉得需要再使用这个说说功能。更换博客主题后，我的之前代码有失效的情况，需要完善代码。在此谢过各位大神，现在归纳一下，方便大家参考。

说说功能是什么？

就像qq空间的说说，可以发表你喜欢的一句话，或者你的某个时刻的心情说说；就是类似微博的短句心情说说。

说说开发步骤？

wordpress本来是没有这个功能。现在有网友开发出了一个wordpress说说功能插件。我习惯使用代码完成功能。在此记录下步骤。

1、首先我们打开主题模板函数 (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);
}

接下来

指定每条说说的详情页面模板文件，还是在functions.php文件添加以下代码，其中放在你正在使用的主题目录下的文件page-shuoshuo.php的文件名是可以自己定义的。

//指定说说文章模板
add_filter( 'template_include', 'include_template_function', 1 );
function include_template_function( $template_path ) {
    if ( get_post_type() == 'shuoshuo' ) {
        if ( is_single() ) {
            // checks if the file exists in the theme first,
            // otherwise serve the file from the plugin
            if ( $theme_file = locate_template( array ( 'page-shuoshuo.php' ) ) ) {
                $template_path = $theme_file;
            } else {
                $template_path = plugin_dir_path( __FILE__ ) . '/page-shuoshuo.php';
            }
        }
    }
    return $template_path;
}

以上代码参考文章：WordPress自定义文章类型 介绍及实例解说；wordpress根据文章分类调用不同文章模板的几种方法。
如果你想你的说说让人评论的话在以上代码的supports加上这个值'comments'。具体如下
'supports' => array('editor','author','title', 'custom-fields','comments') );
然后后台就出现新建说说的功能了。

2、创建一个单页PHP文件，也就是发表说说的列表页面。可以自定义命名，我的是shuoshuo.php，该文件代码如下：

<?php
/* Template Name: 说说 
author: 流年 
url: http://www.lnbibi.com
 */
get_header(); ?>
<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><img src="http://www.lnbibi.com/wp-content/themes/tinection/images/touxiang.gif" alt="使用代码实现wordpress说说、短句、微语功能" class="zhutou" alt="作者头像"><span class="tt"><?php the_time('Y年n月j日G:H'); ?></span><em></em>
<div class="shuoshuo-content"><?php the_content(); ?>
<div class="shuoshuo-meta"><span>—  <?php the_author() ?></span></div>
</div>
<?php endwhile;endif; ?></li>
</ul>
</div>
<?php get_footer();?>
如果你想在说说展示页面加入评论按钮 在以上代码的

<span>—  <?php the_author() ?></span>
的后面添加这段代码

<span> | </span><span><a href="<?php the_permalink(); ?>#comments" title="评论" target="_blank" > 评论</a></span>
然后保存PHP文件把文件名改成page-shuoshuo.php 然后上传到模板的目录

接着后台新建页面，模板选择 说说 ，然后保存。

然后你就可以在后台发布说说了，然后到你刚才新建的页面去看，是不是出来了？但是问题来了。。现在说说的样式很乱。。需要我们添加css。以下是我在使用的css。需要的自己复制，添加到style.css 里面即可。

/*说样式*/
.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f2f2f2;
border:1px #ccc 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;
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+, 文本行的任意字内断开 */
}
.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;font-size:0.7em;}
.shuoshuo li em{float:left;background:url("http://www.lnbibi.com/wp-content/themes/tinection/images/bolangxian.png") no-repeat;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;font-size:0.9em;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
.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: 20px 8px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

驱蚊器

特别说明

说说功能基本可以看做需要完成2个页面，一个是说说列表，第二个页面是每条说说的详情页面。当然你可以不要详情页面，控制每条说说的字数就可以，只展示在一个列表页面上。

分页问题

参考文章，解决WordPress自定义页面分页问题。

正确的分页代码：

<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;  
query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=10 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>

看了这个例子大家应该知道怎么做了。到此为止并没有结束，自定义页面要分页肯定要分页代码函数，所以要在自定义页面中调用分页函数，如果不知道自己的主题的分页函数是什么，可以到index.php、functions.php里面查看。

样式问题

根据自己需要更改自己喜欢的前端样式。

到此博客说说功能就可以使用了。参考我的约定随心的说说。

 

扩展：

只适用于知更鸟Begin主题的说说功能，wordpress博客如何实现类似新浪微博动态、QQ说说功能。可以参考下，还显示地理信息。

 

本文教程参考博客：

http://www.lnbibi.com/537.html

 

历史上的今天
07月
4
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin