再卑微的理想,也比没有好。

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

技术文档 61728浏览 0评论
文章目录[隐藏]

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显示页面,将下面内容替换相应的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
 * 
 * 获取不同文章形式的内容
 */
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代码的写法,有几篇文章仅供大家参考:

CSS代码如下:

1
2
3
4
5
6
7
8
9
10
.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)内容页面优化
普通的内容页面显示的东西可能比较多,侧边栏、相关文章等,如果碎语/微博页面也使用同样的形式,那么内容可能就被淹没了。所以碎语/微博应使用不同的内容页,更加简洁为好。一个演示:http://loosky.net/?p=2056

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

将single.php的内容修改为:

1
2
3
4
5
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文章查询常用的调用方式有四种,可参考:http://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文章形式实现碎语/微博的功能

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (41)

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

    追梦无痕2013-11-07 12:39 回复
  2. 555~没嘛没早点看到呢

    汐枫2013-12-26 14:55 回复
  3. 作者你好,请问下 不在首页显示和不在最新文章中显示 碎语 要在哪个文件里面修改啊, 看到了 麻烦你 回我下啊。折腾了一晚上了。

    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
  4. 当标题为空时,侧边栏文章标题显示为ID号时 ,AND post_title <> ”这个条件在哪里加(和你用的是同一个主题D8)

    dragon832014-02-20 13:22 回复
    • 你可以看看是使用函数还是widget,在相应的函数里面去修订就好。

      自由的风2014-02-23 16:05 回复
  5. 不错,我试试看

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