通过WordPress文章形式实现碎语/微博的功能

文章目录[隐藏]

1、添加主题支持
2、增加一个分类
3、建立碎语/微博的展示页面
4、进行全站优化

emlog有个碎语的功能，大概跟微博类似吧，可以杂七杂八地讲一些话。在微博还没有现在那么火的时候，微博的程序也不是很多，所以自己还动手写了一个，现在依然在用着。随着WordPress功能的增强，就有网友通过主题的形式实现了微博的功能。随着微博和轻博客越来越火，WordPress也与时俱进，在3.1版本中坚强而又勇敢地引入了文章形式的功能。

目前支持九种文章格式，来自官方的介绍是这个样子：

日志（aside） - 典型样式就是没有标题。类似于 Facebook 或人人网中更新的一条日志。
相册（gallery） - 图像陈列厅。文章中通常会有“gallery”代码和相应的图像附件。
链接（link） - 链接到其它网站的链接。主题可能会使用文章中的第一个 <a href=""> 标签作为文章的外部链接。有可能有的文章至包含一个 URL，那么这个 URL 将会被使用；同时，文章标题（post_title）将会是附加到它的锚的名称。
图像（image） - 单张图像。文章中的首个 <img /> 标记将会被认为是该图片。另外，如果文章只包含一个 URL 链接，则被认为是该图片的 URL 地址，而文章标题（post_title）将会作为图片的标题属性。
引语（quote） - 引用他人的一段话。通常使用 blockquote 来包裹引用内容。或者，可能直接将引语写入文章，并将其出处写在标题栏。
状态（status） - 简短更新，通常最多 140 个字符。类似于微博 Twitter 状态消息。
视频（video） - 单一视频。文章中第一个 <video /> 或 object 或 embed 将被作为视频处理。或者，文章可以仅包含视频的 URL，甚至一些主题和插件可以支持自动嵌入您的文章附件中的视频。
音频（audio） - 一个音频文件。可以用于播客（podcasting）等。
聊天（chat） - 聊天记录

所以本文要介绍的就是通过使用文章形式的功能，来实现类似于碎语或者微博的功能，当然，使用本文的方法，不用文章形式也可以直接实现的。先看效果：碎语

步骤如下：

1、添加主题支持

在你主题的functions.php中添加如下代码，来告诉WordPress使用何种文章形式，根据需要自己取舍。

1	add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status','video')); //增加文章形式

那么在后台添加文章的时候，就会出现文章形式的选项了，根据需要选择即可，默认的就是标准类型的。

2、增加一个分类

添加一个文章分类，所有的类似文章都放入这个分类，便于管理。小站添加的分类名是“碎语”，别名是“t”。
那么在添加碎语文章的时候，跟添加普通文章是一样的。只是注意选择一下合适的文章形式，文章分类选择“碎语”。当然文章的内容就相对灵活了，可以是几句话、一个链接、一张图片、一段引用的话语等，当然大部分情况下你可能是没有填写文章标题的，这才能体现碎语/微博的精髓嘛。

3、建立碎语/微博的展示页面

这个展示页面，跟微博的形式类似，可以显示文章内容、发布时间、评论情况等等。对于WordPress来说，使用分类页面来展示是比较合适的了。
（1）将主题的archive.php文件，复制一份，命名为：category-t.php。当然要跟普通的分类页面有所不同了，小站的效果如下：
显示内容：

显示评论：

（2）添加功能代码
使用的主要部分功能代码如下，当然如果需要更像的话，你还可以将评论框放到页面中来，这里不做演示。
category-t.php显示页面，将下面内容替换相应的代码：

<div class="mircoblog" id="post-<?php the_ID();?>">
<div class="top">  < ?php get_post_format_content(); ?> </div>
<div class="bottom">
	<div class="left">
			<span>< ?php the_time(__('G:i','inove')); ?> at < ?php the_time(__('F jS, Y','inove')) ;?></span>
            <span><a class="title" href="<?php the_permalink() ?>" rel="bookmark"> < ?php _e('Read more...','inove');?></a></span>
	</div>
	<div class="right">
			<span class="comments">< ?php comments_popup_link(__('Leave a comment','inove'),__('Leave a comment','inove'),__('Leave a comment','inove'),'',__('Comments off','inove'));?></span>
 
           < ?php $comments_number=get_comments_number();
		   if($comments_number>0) {?>
            <span><a class="icon" onclick="$('#commentslist-<?php the_ID();?>').slideToggle(); return false;" href="javascript:void(0)">< ?php _e('Go to comments','inove');?></a>(< ?php echo $comments_number;?>)</span>
            < ?php }?>
	</div>
	<div class="clear"></div>
</div>    
<ol id="commentslist-<?php the_ID();?>" class="hide commentslist">    
	< ?php get_custom_comment(10); ?>  
</ol>      
</div>

上面使用了两个函数，PHP代码如下:

/**
 * 
 * 获取不同文章形式的内容
 */
function  get_post_format_content() {
	$content = get_the_content();
 
    if ( has_post_format( 'aside' )||has_post_format( 'status' )||has_post_format( 'video' )||has_post_format( 'image' )) { 
         echo $content; 
    } 
 
	elseif ( has_post_format( 'link' )) { 
		$title=get_the_title($post->ID);
 
		$linktoend = stristr($content, "http" );
		$afterlink = stristr($linktoend, ">");
		if ( ! strlen( $afterlink ) == 0 ){
			$linkurl = substr($linktoend, 0, -(strlen($afterlink) + 1));
		}else{
			$linkurl = $linktoend;
		};
		if( $linkurl == '' ){
			$linkurl = get_permalink();
		}
		echo "<a href=\"".$linkurl."\">".$title."</a>";
	} 
 
	elseif ( has_post_format( 'quote' )) { 
		echo '<blockquote>'.$content.'</blockquote>'; 
	} 
 
	else { 
		echo $content; 
	} 
}
 
//在WordPress每篇文章显示指定数量的评论内容
function  get_custom_comment($num=5) {
 $get_comments_num=$num; //获取最大评论数
 $loosky_comments = get_comments('status=approve&type=comment&number='.$get_comments_num.'&post_id='.get_the_ID());
 
 if ( !empty($loosky_comments) ) {
             $loosky_output='';
             foreach ($loosky_comments as $loosky_comment) {					 
		     $loosky_avatar=get_avatar($loosky_comment->comment_author_email,20);			 
                     $loosky_output .= '<li>'.$loosky_avatar
                     .'<strong>'.$loosky_comment->comment_author.'</strong> '.$loosky_comment->comment_date
                     .'<p>'.convert_smilies(strip_tags($loosky_comment->comment_content)).'</p></li>';
             }
             echo '<ul>'.$loosky_output.'</ul>';           
   } 	
}

PHP代码的写法，有几篇文章仅供大家参考：

WordPress 文章形式小议:http://immmmm.com/wordpress-post-formats.html
WordPress 文章形式之：链接:http://immmmm.com/wordpress-post-format-link.html
媒体链接自动嵌入播放器:http://immmmm.com/auto-media-player-urls.html
WordPress每篇文章显示指定数量的评论者头像及评论内容:http://zww.me/archives/25502

CSS代码如下:

.mircoblog{border:1px solid #DFDFDF;-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;list-style-type:none;padding:.5em;margin-bottom:.5em;color:#666;}
.mircoblog .top{margin-bottom:.5em;font-size:14px;} 
.mircoblog .bottom{color:#1E5494;}
.mircoblog span {padding-right:10px;}
.mircoblog span .comments{ float:right}
.hidden,.hide {	display: none;}
.commentslist ul,.commentslist ul li p{margin:3px;padding:0;}
.commentslist ul li{list-style:none;line-height:18px;margin-right:5px;}
.commentslist ul li img.avatar{width:20px;height:20px;margin:2px;padding:0;border:1px solid #ddd;}
.commentslist ul li img.avatar:hover{border-color:#999;}

到此为止，基本实现碎语的功能了。

（3）内容页面优化
普通的内容页面显示的东西可能比较多，侧边栏、相关文章等，如果碎语/微博页面也使用同样的形式，那么内容可能就被淹没了。所以碎语/微博应使用不同的内容页，更加简洁为好。一个演示：https://loosky.net/?p=2056

优化的步骤如下：
将本来的single.php复制两份，分别命名为：single-s.php（显示标准日志内容）和single-t.php（显示碎语/微博内容）。

将single.php的内容修改为：

if ( in_category( 't' ) ) { //如果是碎语/微博分类
    get_template_part( 'single', 't' );
} else {
    get_template_part( 'single', 's' );
}

再对single-t.php的内容进行相应的精简即可。

4、进行全站优化

（1）首页显示页面
参照category-t.php，可以对index.php(home.php)中的内容进行部分修改，添加不同文章形式的显示CSS，即可达到效果。
可以参考：http://immmmm.com/，http://icold.me/

（2）不在首页显示文章形式的内容
个人觉得碎语这些东西，如果掺杂在首页中进行显示，对于paled这个主题来说，不是很合适，所以需要去掉“碎语”分类在首页中的显示。提供index.php中的代码仅供大家参考：

1 2	$paged = (get_query_var('paged')) ? (int)get_query_var('paged') : 1; query_posts('cat=-378&paged=' . $paged); //不显示图片类

cat=-378，表示不显示分类id为378的分类，反之则为显示。

（3）优化其他方面的显示
碎语/微博类的内容，可能大都没有标题，获取的文章名仅是文章的ID号。在侧边栏等地方，如果显示最新文章，会出现一大堆没有标题的链接或者仅是数字ID的链接，体验不好。

WordPress文章查询常用的调用方式有四种，可参考：https://loosky.net/?p=1578。所以我的解决方案有两种：
（一）使用get_posts函数的时候，可以通过category参数，将相应的分类不予显示。
如：调用最新更新的文章代码如下：

$posts = get_posts("numberposts={$limit}&post_type='post'&orderby=post_date&category=-378");

使用query_posts函数的时候，可以通过cat参数对相应的分类不予显示，可参照上面的例子。

使用WP_Query函数的时候，则有cat、category_name、category__and、category__in、category__not_in等参数可供调用，参见官方文档。

（二）通过get_results方法，使用SQL语句直接调用相关内容的，有一种比较简单的方法，即没有标题的文章不予显示即可。
解决方法：
在SQL语句中加上：

 AND post_title <> ''

OK，工程到此结束。

转载请注明：自由的风 » 通过WordPress文章形式实现碎语/微博的功能

好麻烦，与自己目前所用主题有点冲突…

追梦无痕2013-11-07 12:39 回复

呵呵，是有点麻烦。

自由的风2013-11-07 16:24 回复

555~没嘛没早点看到呢

汐枫2013-12-26 14:55 回复

现在也不迟嘛。

自由的风2013-12-26 16:39 回复

作者你好，请问下不在首页显示和不在最新文章中显示碎语要在哪个文件里面修改啊，看到了麻烦你回我下啊。折腾了一晚上了。

lyz2014-01-02 22:39 回复

一般在index.php中，但不同的皮肤略有不同。

自由的风2014-01-03 12:40 回复
- 刚刚在主题下的index.php中找了，没有发现哪里能够修改，我的主题是inove ：http://www.neoease.com/inove/
  希望有空的时候帮帮我看下。
  
  lyz2014-01-03 22:10
- 一般来说，可以放在if (have_posts())之前。
  
  自由的风2014-01-05 08:23

当标题为空时，侧边栏文章标题显示为ID号时，AND post_title <> ”这个条件在哪里加（和你用的是同一个主题D8）

dragon832014-02-20 13:22 回复

你可以看看是使用函数还是widget，在相应的函数里面去修订就好。

自由的风2014-02-23 16:05 回复

不错，我试试看

阿俟2014-02-20 21:32 回复

通过WordPress文章形式实现碎语/微博的功能

1、添加主题支持

2、增加一个分类

3、建立碎语/微博的展示页面

4、进行全站优化

与本文相关的文章

Hi，您需要填写昵称和邮箱！

网友最新评论 (41)