翻译:10个WordPress主题Hack技巧[BOB出品]
使用WordPress架设博客的朋友对BlogOhBlog应该不陌生,趣站酷软曾经很长一段时间用的都是BOB出品的主题,也曾经翻译过由BOB出品的WordPress新手SEO技巧电子书[目前2.6版修订中,不日将释出]。今天再翻译一篇同样由BOB出品的10个WordPress主题Hack技巧。这些技巧不一定所有都对您有用,但是我相信会有其中一两条。
原文:10 WordPress Hacks to Make your Life Easy
译文:10个WordPress主题Hack技巧
原文作者:Jai / 译文作者:Chada
声明:本文在原文基础上根据中文习惯有删改,转载本文请以超链接形式在文首注明以上信息,谢谢!
【Update: 下面的代码因为WordPress自作聪明的缘故,所有的双引号均变成了全角,如果您要复制代码,确保在复制过去之后将所有引号改回半角符号,防止出错。】
1. 在评论中启用Gravatars

Gravatars是由Gravatars.com提供的评论者头像服务,用户在留言评论后会在对应的评论中出现代表其的头像[如果主题支持Gravatars]。很多主题在设计和发布的时候是不支持Gravatars的,所以这里给出添加Gravatars的方法。打开您主题文件中的comments.php文件,找到下面这行代码:-
<?php comment_text() ?>
用下面这段代码替代上面的代码:-
<div class="gravs">
<?php if (get_bloginfo('version')>=2.5)
echo get_avatar( $comment->comment_author_email, $size = '50', $comment->comment_author_link);?>
<?php comment_text() ?>
</div>
<br clear="all" />
添加上面的代码后您使用的主题便支持Gravatars了。现在,让我们在style.css中添加一些CSS样式让Gravatars看起来更棒:-
.gravs {margin-top:20px;}
.avatar {float:left; margin-right:5px; margin-bottom:5px; padding:3px; border:1px solid #999999;}
好的,现在去检查您的主题,您会发现评论内容旁边出现了评论者的头像。
Chada补充:Gravatars可以在“后台 – 设置 – 评论 / Dashboard – Setting – Comments”的页尾进行设置开启或关闭,同时,您还可以为没有申请Gravatars的评论者设定默认头像。
2. 在WordPress中添加画廊/相册

WordPress在其2.5以上的版本中内置了画廊/相册功能,它支持您上传图片到您的博客服务器,然后将相册插入到文章或新建页面中。
但是几乎所有在2.5版本释出之前就已经发布的主题以及后来发布的一些主题中都没有添加这个相应的功能,如果您想在您的主题中添加这种功能,跟着下面几步做: -
在主题文件夹中打开single.php,将其另存为image.php文件。在主题编辑器或者是Dreamweaver等软件中打开image.php文件,找到用来显示文章内容的函数。因主题不同,这个函数的也有可能不同,但是有一个基本特征是,它包含了以下这句代码的内容:-
<?php the_content('Read More'); ?>
现在,将下面这段代码插入到上面这句代码的上方:-
<p class="attachment">
<a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a>
</p>
<div class="caption">
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?>
</div>
再将下面这段代码插入到那句代码的下方[注意位置]:-
<div class="imgnav">
<div class="imgleft"><?php previous_image_link() ?></div>
<div class="imgright"><?php next_image_link() ?></div>
</div>
<br clear="all" />
好的,现在打开style.css文件,添加相册的相关样式:-
/****************Image Gallery *********************/
.gallery {text-align:center;}
.gallery img {padding:2px; height:100px; width:100px;}
.gallery a:hover {background-color:#ffffff;}
.attachment {text-align:center;}
.attachment img { padding:2px; border:1px solid #999999;}
.attachment a:hover {background-color:#FFFFFF;}
.imgnav {text-align:center;}
.imgleft {float:left;}
.imgleft a:hover {background-color:#FFFFFF;}
.imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
.imgright {float:right;}
.imgright a:hover {background-color:#FFFFFF;}
.imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
上面这段CSS代码可以改变WordPress默认画廊/相册寒酸的样式。那么,现在当你在一篇文章或一个页面中上传完所有照片后,在相册设置/gellery option中将其插入到文章或页面中,那样便可以了!
3. 在每篇文章后面添加一个“Feed订阅”消息

很多人都用这种信息来提醒他们的读者订阅自己的博客,他们把这个提示信息放在每篇文章后面。这可以用一个简单的插件完成,或者,下面简单的几步。如果你想让这个提示消息出现在每篇文章的后面,那么,打开single.php文件,找到显示文章内容的函数[上一个技巧中有提到],然后在其下方添加下面这段代码:-
<div style="padding:5px; border:1px solid #999999; margin-top:10px; background-color:#FFF8AF;">
If you enjoyed this post, make sure you <a href="http://feed.genmicha.cn" target="_blank">subscribe to my RSS Feed</a>
</div>
Chada补充:您需要将上面这段代码中的Feed订阅地址更换成您博客的订阅地址。
4. 在博客上展示twitter更新信息

如果您有twitter帐号,并希望在您的博客上展示您的twitter更新,这里提供一个简单的方法:-
登录您的twitter帐号,进入这个链接:- http://twitter.com/badges/html 选择您喜欢的样式并更改一些设定,复制里面的代码并将其粘贴到您的博客中。您可以将这段代码用文本widget放置到侧边栏,如果您的主题没有使用widget,那么也可以编辑sidebar.php文件将这段代码插入到侧边栏。
Chada补充:关于在博客主题中展示twitter更新信息,Chada曾经介绍过几种方法,可以安装插件,也可以使用twitter balloon定制喜欢的样式,还可以用非常简单的进行定制。
5. 展示作者信息

在一个群体博客中,在每一篇文章后面展示该文作者的一些信息将有利于加深读者对于作者的了解[比如说起风溏]。这些作者的相关信息可以在后台设置更改。
想要添加这种信息,打开主题文件夹中的single.php文件,找到之前提到的文章内容函数代码,在后面添加下面这段代码:-
<div class="author">
<?php the_author_description(); ?>
</div>
然后,打开主题文件夹中的style.css文件,添加以下CSS样式:-
.author{
color: #222222;
font-family: Arial;
font-size: 12px;
border:1px solid #CCCCCC;
width: 500px;
padding: 5px;
margin-top:10px;
margin-bottom:10px;
}
刷新您博客上的某篇文章页面,您将会看到文章内容后面该文作者的相关信息。
6. 下拉方式分类菜单

想要在侧边栏中添加一个比较好看的分类下来菜单,将下面一段代码添加到您想要放置他们地方——替换侧边栏原本的分类菜单,页首或者是页尾都可以:-
<form action="<?php bloginfo('url'); ?>/" method="get">
<?php
$select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
<noscript><input type="submit" value="View" /></noscript>
</form>
7. 下拉方式的存档菜单
就跟分类一样,你可以将每月存档的菜单做成下拉方式的,代码如下:-
<select name=\"archive-dropdown\" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=\"\"><?php echo attribute_escape(__('选择月份')); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>
Chada补充:下拉存档菜单可以看看yacca大叔的侧边栏底部,对于节省侧边栏空间确实是一个不错的选择。Chada在折腾中的新主题中也把订阅菜单做成了下拉样式的。
8. 在侧边栏上添加不同规格的广告

很多人都不知道该如何在自己的博客侧边栏上放置横幅广告,因此您会看到很多侧边栏放置广告的博客凌乱不堪。这里给您介绍比较美观的方法[以125×125规格广告为例,您可以先将下方图片保存到您的主题文件夹中]:-
在主题文件夹中新建一个以“ads”为名的文件夹然后将上面那张图片防止到这个文件夹中,现在您可以将下面这段代码添加到您的侧边栏中您想放置广告的地方:-
<div class="bannerads">
<div class="ad_125x125"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/ads/125x125.gif" border="0" alt="Advertising" /></a></div>
<div class="ad_125x125"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/ads/125x125.gif" border="0" alt="Advertising" /></a></div>
</div><!-- bannerads -->
<br clear="all" />
然后,在您的主题文件夹中找到style.css文件,添加如下样式:-
.bannerads {width:270px; margin:10px auto;}
.ad_125x125 {float:left; margin:0px 5px 10px 5px; width:125px; height:125px;}
刷新您的博客,您会看到侧边栏上多了两个125×125规格的横幅广告,您可以用所申请的广告代码替换图片代码。在替换图片代码时,确保您申请的广告规格是125×125的。其它格式类似。
9. 展示评论数最多的文章
![]()
这是一个非常有用的功能,很多博客上都放置了相应的使用插件生成的模块。这里提供一种不用安装插件就可以实现的方法: -
打开主题文件夹中的header.php文件,在最后面添加以下代码,您可以更改第一行代码中“$no_posts = 5”中的“5”以更改展示文章的数量:-
<?php function most_popular_posts($no_posts = 5, $before = '<li>', $after = '</li>', $show_pass_post = false, $duration='') {
global $wpdb;
$request = "SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS 'comment_count' FROM $wpdb->posts, $wpdb->comments";
$request .= " WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish'";
if(!$show_pass_post) $request .= " AND post_password =''";
if($duration !="") { $request .= " AND DATE_SUB(CURDATE(),INTERVAL ".$duration." DAY) < post_date ";
}
$request .= " GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts";
$posts = $wpdb->get_results($request);
$output = '';
if ($posts) {
foreach ($posts as $post) {
$post_title = stripslashes($post->post_title);
$comment_count = $post->comment_count;
$permalink = get_permalink($post->ID);
$output .= $before . '<a href="' . $permalink . '" title="' . $post_title.'">' . $post_title . '</a> (' . $comment_count.')' . $after;
}
} else {
$output .= $before . "None found" . $after;
}
echo $output;
} ?>
现在,您可以将下面这句代码添加到您想展示评论数最多的文章的地方,侧边栏或者是主页都可以:-
<?php most_popular_posts(); ?>
10. 在文章中添加一个打印按钮

为了让您的读者更方便将您的文章打印出来,您可以在自己的博客上为他们提供一个方便地打印按钮。打开主题文件夹中的single.php文件,然后在适当的位置添加下面这行代码:-
<a href="javascript:window.print()">打印这篇文章</a>
注:文中所有图片均来自『BlogOhBlog』,版权归其所有。Thanks Jai!
希望这篇翻译的教程对您有用!
厉害呀,就那个画册的添加,确实很少~~
哈^_^
你还是比paran勤劳。
@page, 老帕也很勤劳的,呵呵
你的更详细:)
这文章不顶,怎么能行!
顶
111
我才知道有这个相册功能
相册?从来不知道…试试看!
第九个,中文工具箱倒是可以实现
没好位置占了,顶一下~~~
这个说明已经很完善了,但有一些像“打印此页”之类的还用不上
@老N,还有其他很多插件都可以实现的,但是插件,能少一个是一个。
@neekey, 本着不违背原文所以把这一个也添上了,我在BOB留言中也提到了这个鸡肋功能浏览器本身就有相应的按钮。
我要收藏这篇文章咯~~
btw. “WordPress在其2.5以上的版本中内置了画廊/相册功能”,不说不知道,一说真要吓一跳。。
每一点都很有用啊..特别是第一点
昨天刚在delicious里收了原文,今天就见到译文了,效率真高啊~
汗~~~我刚刚把原文硬着头皮看了一遍~~~~~早知道这里出来了…
厄 大叔显灵 继续养身体中…明日动身回杭州…
有个问题 关于第三个技巧 我将订阅地址改到了feedsky的地址,不知道怎么搞的,点那个订阅我 为什么会连接到 我的域名.cn/文章地址/”我的订阅地址”
这样一个连接~这样会提示404错误~但是代码没错啊
检查了一下您的那段代码中feedsky地址旁边还有其他代码,如果可以的话,把您的single.php发到我邮箱,我检查一下^^
rubachou#gmail.com
已将所有代码发过去
对了 是underone的g7v5主题
俺其实发觉很多插件俺都用不到!
我使用了《9. 展示评论数最多的文章》上面介绍的代码,后来发现在IE7下显示正常,但是在FF下浏览时内容会偏左不对齐,请问博主对此是否有解?
http://www.blogohblog.com/10-wordpress-hacks-to-make-your-life-easy/介绍的显示最多评论的文章的代码有问题:一是在FF浏览器下,内容偏左;二是在IE7浏览器下,原始Feed无法预览!
用插件..
@Young, 我在FF3和IE7中查看您的博客都没有发现您描述的情况,但是如果出现这种情况应该是是您使用的主题中对于文章中的ul和li标签的样式定义问题。
另外,看到在IE7和FF3中,您的评论数最多的文章每篇文章的行距相差很大,建议对上面说的两个标签定义一下样式。
P.S: 发了一封Email给您,关于您博客的另一件事,忘查收。
@Chada,我在原来的代码上加上了标签,所以就没有对齐的问题了,但是我自己的IE浏览器还是无法显示Feed页面,并且我的网页徽标显示成了Digg的图标,如果你浏览的时候正常,那是不是我的IE中毒了呢?
另外,邮件收到,谢谢提醒。我对代码不熟,不知如何修定义这两个标签。我会恢复一下系统或者删掉那篇文章,先看看再说了。
系统恢复之后,IE7可以正常显示精博的网页徽标,但是还是不可以显示Feed页面,错误提示如下:
CDATA 节未关闭。
行: 31 字符: 25
<![CDATA[以下是精博有史以来评论最多的10篇文章:
请问Chada对此是否可以指点一二,要不就真的得把文章删掉了。
绝对好文,收藏
您好!Young,因为不知道什么原因,我帮您在论坛上问了,朋友说是因为那段评论数最多的代码造成的。您可以看看下面这个帖子:
http://wfans.org/forums/thread-708-1-1.html
@Chada,谢谢,但是我根本就没有使用什么“热门日志的插件”啊,精博侧边栏的热门文章是手动添加的。
对相册那个特感兴趣,因为我现在都是这么添加相册的,有没有做出来的范例可以看看啊?
有没有那么函数可以在侧栏显示评论总数和文章总数,就像后台那样的统计!!!
很好的教程,学习了,希望chada以后多翻译一些这样的新手文章哈!
感觉我都没多大用啊,呵呵,似乎处于“叛逆”心态……
值得我来学习一下。
好文………………….21
太有用了,正愁这个呢!
己仔细看完并收藏了,谢谢!