我们确实有如是的优点,但也要隐藏几分,这个叫做涵养。
‘wordpress’ 分类下的文章
Dec 24

增强 WordPress 2.7 的评论显示

2008年12月24日,星期三,下午 2:02 | 分类:wordpress | 给我留言 | 0次浏览

本文为翻译+演绎文章,原文 Enhanced Comment Display

WordPress 2.7 中,内置了对评论嵌套和分页的支持。你所使用的主题可能仍然可以继续使用,但不做一些改动是不能使用这些新功能的。本文的目的就是给你一个指南,如何为主题加入评论嵌套和分页功能。

本文很大程度上参照了 Otto 的 WordPress 2.7 Comments Enhancements 一文。

为了能够更好的理解下面所讲述的内容,你可以参照默认主题的 comments.php 这个文件。

侦测 WordPress 2.7

如果要使主题能向前兼容,有个很简单的方法,调用 wp_list_comments(),就像下面这样:

if(function_exists(’wp_list_comments’)):
    // new comments.php stuff
else:
    // old comments.php stuff
endif;

当然,还可以通过检测版本号来实现,不过上面的方法更好一些,因为们针对某一特定的函数进行了侦测。

更进一步的,们可以将老的评论代码写进一个独立的文件,比如说 legacy.comments.php,然后在适当的地方调用这一文件。下面的代码是一个简单的示例。

<?php
add_filter(’comments_template’, ‘legacy_comments’);
function legacy_comments($file){
    if (!function_exists(’wp_list_comments’))
        $file = TEMPLATEPATH . ‘/legacy.comments.php’;
    return $file;
}
?>

把上面这段代码写入主题的 functions.php 中。如果使用的是 WordPress 2.7 之前的版本,系统会自动调用 legacy.comments.php,以保证主题向前兼容。

检测密码保护

将下面的代码写入 comments.php 的开头,它的作用是支持密码保护。这和以前通过检测 cookie 的作用是相同的,不过 WordPress 2.7 加入了专门的函数来实现。推荐使用新的方法,以免以后做出改动。这段代码本身会向前兼容。

if(!empty($_SERVER['SCRIPT_FILENAME']) && ‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME']))
    die (’Please do not load this page directly. Thanks!’);
if(post_password_required()){
    echo ‘<p class="nocomments">This post is password protected. Enter the password to view comments.</p>’;
    return;
}

评论循环

WordPress 2.7 的评论循环大致如下,相对于之前的版本做了一定的简化。

if($comments):
<?php $comment_count = get_comment_count($post->ID); echo $comment_count['approved']; ?> Comments
<ul class="commentlist">
<?php foreach( $comments as $comment ) :
    // stuff to display the comment in an LI here
endforeach;
?>
</ul>
<?php else:
if(’open’ == $post->comment_status):
    // If comments are open, but there are no comments.
else:
    // comments are closed
endif;
endif;

这段代码会进行一个循环检测,然后输出所需内容。看上去是很简单,不过对于喜欢自动以输出结果的人来说,显得过于不可定制化。

新的评论循环很简洁,而且看上去更像一个文章循环。

if(have_comments()): ?>
<h4 id="comments"><?php comments_number(’No Comments’, ‘One Comment’, ‘% Comments’ );?></h4>
<ul class="commentlist">
    <?php wp_list_comments(); ?></ul>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link(); ?></div>
<div class="alignright"><?php next_comments_link(); ?></div>
</div>
<?php else: // this is displayed if there are no comments so far ?>
    <?php if(’open’ == $post->comment_status):
        // If comments are open, but there are no comments.
    else : // comments are closed
    endif;
endif;

上面是一个完整的评论循环,没有被精简。除非你需要加入对“没有评论”或“评论关闭”的支持。

针对上面的代码,有三个部分要着重说明一下。

  • 函数 have_comments() 替换了原来对全局变量 $comments 的检测;
  • 函数 wp_list_comments() 输出所有的评论,同时实现嵌套,加入一些 classes,和其他的一些功能;
  • 有一个新的导航部分对评论进行分页;

评论中 Javascript 的支持

为了能够充分使用评论中的 Javascript 支持,必须做出以下改动。

实现评论嵌套,请在主题的 header.php wp_head() 之前加入以下代码:

if (is_singular()) wp_enqueue_script(’comment-reply’);

这段代码加入评论回复功能所需的 Javascript,WordPress 不会自动加入这段代码,所以手动加入是唯一选择。

在评论表格中加入以下代码:

<?php comment_id_fields(); ?>

这段代码向评论表格中加入了两个隐藏的输入框:comment_post_IDcomment_parent。如果评论表格中已经有了 comment_post_ID,必须将它删除。comment_parent 是共评论回复所需的 Javascript 使用,以实现评论的嵌套。

评论输入去的 textarea 必须有一个 id="comment",Javascript 通过它来实现聚焦。如果你在其他地方使用了这个 id,将它修改为其他的名字,因为 id 具有唯一性。

同时,整个评论表格必须嵌套在一个 div 中,并且赋予 id="respond"。在某些主题中往往会包含一个锚记:

<a id="respond"></a>

这个锚记的作用是直接链接到文章的评论区。现在们还需要这样的功能,但同时们还要将它用于 Javascript,使整个评论表格移动到需要回复评论的地方。所以们将整个评论表格嵌套在一个 div 中,并将 respond 这个 id 赋予它。

接下来,将 “Leave a Comment” 替换为:

<h3 class="cyan"><?php comment_form_title(); ?></h3>

这段代码会给评论表格一个 “Leave a Reply” 的标题,而当回复某人的评论时就会变成 “Leave a Reply to xxx”。如果要改变标题文字,可以修改这个函数的两个参数:

<?php comment_form_title(’Leave a Reply’, ‘Leave a Reply to %s’); ?>

%s 会被自动替换称所回复评论的作者名字。如果没有包含上面的 wp_enqueue_script('comment-reply') 来调用所需 Javascript,就不会看到回复评论的链接。

最后,如果某人点击了回复评论的链接,评论表格已经出现了,而他却不想回复了,这时就需要一个取消回复的功能。下面的代码会实现取消回复,将这段代码放在评论表格的标题下。

<div id="cancel-comment-reply">
    <small><?php cancel_comment_reply_link() ?></small>
</div>

CSS 样式

新的评论循环,将每一个评论放入一个 li 中,也很好的做了嵌套的支持,将嵌套评论放入更深一层的 ul/li 中。而且还为每一个 li 加入了丰富的 class,简介如下。

  • comment/trackback/pingback:根据评论的类型加入三者之一;
  • byuser:如果评论来自站点注册用户;
  • comment-author-authorname:针对某一特定的注册用户;
  • bypostauthor:针对该文章作者的评论;
  • odd/even:针对评论的奇偶次序;
  • alt:每隔一个评论加入;
  • thread-odd/thread-even/thread-alt:类似于 odd/even/alt,不过只针对一群评论和回复的顶级;
  • depth-1:评论的顶级,depth-2 是第二级,依此类推;

WordPress 提供了一个 comment_class filter,允许加入自己定义的 class,下面是一个例子。

这个例子为每个评论的评论作者和评论作者的 email 加入 microid,可以通过插件来实现,或者将代码写入主题的 functions.php

// add a microid to all the comments
function comment_add_microid($classes){
    $c_email=get_comment_author_email();
    $c_url=get_comment_author_url();
    if(!empty($c_email) && !empty($c_url)){
        $microid = ‘microid-mailto+http:sha1:’ . sha1(sha1(’mailto:’.$c_email).sha1($c_url));
        $classes[] = $microid;
    }
    return $classes;
}
add_filter(’comment_class’,'comment_add_microid’);

这段代码将某个特定的 class 加入评论,而其他的 class 还是由 WordPress 自动加入。

自定义评论布局和显示格式

WordPress 默认通过内置的函数来显示评论,如果需要按照自己的方式来调整评论显示,通过设定 wp_list_comments()callback 参数实现。(译者注:callback 的进一步资料这篇文章没有提供,有待后续补充。)


WordZine 的新 Feed: http://feed.wordzine.cn

© Andor for WordZine, 2008. |
Permalink |
No comment |
Add to
del.icio.us

(阅读更多精彩内容...)
Dec 22

WordPress AIR Documentation

2008年12月22日,星期一,下午 9:09 | 分类:wordpress | 给我留言 | 0次浏览

有几天没更新了,忙于考试和这个小程序。

WordPress AIR Documentation 作为之前分享的 WordPress Template Tags 的后续和升级版本。由于完全重新制作,所以版本号直接跳到 2.0,较之前的版本有以下的改变:

  • 基于 Adobe Flex 框架制作,放弃在 Extjs 离线文档基础上的简单修改;
  • 使用自定义皮肤,但不是原创的;
  • 增加了一些 WordPress 2.7 中新加入的模板标签文档;
  • 优化了一些内容表现;

WordPress AIR Documentation

初学 Flex 框架和 AIR 程序制作,很多功能还没有实现,因此有以下的 ToDo list:

  • 解决打开外部链接的问题;
  • 升级提示;
  • Alert 的问题;
  • 其他相关功能的完善;

当前版本为 2.0 alpha,如果你不介意可能存在的一些问题,那么可以下载安装试用一下。如果你发现了一些 bug(s),欢迎反馈给

WordPress AIR Documentation (564 KB)
Version: 2.0 alpha // Build on an ASUS Laptop

License: Attribution-Noncommercial-Share Alike 3.0 Unported

当然了,WordPress AIR Documentation 需要 Adobe AIR 的支持,所以在安装该程序之前请确保你的电脑上已经安装了 AIR 运行环境。


WordZine 的新 Feed: http://feed.wordzine.cn

© Andor for WordZine, 2008. |
Permalink |
No comment |
Add to
del.icio.us

(阅读更多精彩内容...)
Dec 13

WordPress China officially

2008年12月13日,星期六,上午 1:01 | 分类:wordpress | 给我留言 | 0次浏览

们回到 theme paradise 时的一篇文章《 (阅读更多精彩内容...)

Dec 07

WordPress Theme List (Vol.3): themes from Wallace

2008年12月7日,星期日,下午 7:07 | 分类:wordpress | 给我留言 | 0次浏览

Chris Wallace 是最近发现的 WordPress 主题制作者,目前他对外发布了四款主题,由于质量很高,所以专门写一个特辑介绍一下这四个主题。

Rusty Grunge

Rusty Grunge

两栏,侧边栏支持 Widgets,基于 GPL 协议发布。预览地址下载地址

Absynthe

Absynthe

两栏,内置 Last.Fm RecordsTwitter for WordPress 两个插件,基于 GPL 协议发布。预览地址下载地址

Annexation

Annexation

两栏,内置 Last.Fm RecordsTwitter for WordPress 两个插件,基于 GPL 协议发布。预览地址下载地址

Holiday WordPress

Holiday WordPress

节日临近,发布这一款主题。两栏,基于 GPL 协议发布。预览地址下载地址


WordZine 的新 Feed: http://feed.wordzine.cn

© Andor for WordZine, 2008. |
Permalink |
No comment |
Add to
del.icio.us

(阅读更多精彩内容...)
Dec 02

WordPress 2.7 置顶文章功能

2008年12月2日,星期二,下午 10:10 | 分类:wordpress | 给我留言 | 0次浏览

本文为翻译+演绎文章,原文《Definitive Sticky Posts Guide for WordPress 2.7》。

引子

WordPress 2.7 加入了很多新特性,官方文档给出了一个列表,很多很多。其中一个新特性是“置顶文章(Sticky Posts)”,这个特性很多国人,特别是用过 PJBlog 的都不会陌生。置顶文章的作用基本固定,文章的内容是希望长时间引起读者注意,可以表明站点的简介、版权声明、友情链接的交换原则等。这一特性有很大的作用,鉴于还没有对此特性详细介绍的文章,遂写(翻译+演绎)此文。

将文章设置为“置顶文章”

WordPress Publish Module

将视线注意在 WordPress 2.7 发布面板(Write Panel)的发布模块(publish module),点击 “Visibility: Public”旁的“Edit”链接,打开更多选项,其中有一项为“Stick this post to front page”,勾选,即将对应文章设置为“置顶文章”。

或者在文章列表页面,对相应文章进行 Quick Edit,勾选“Make this post sticky”。

在对应的位置,取消勾选便取消对文章的置顶操作。

给“置顶文章”定义样式

因为置顶文章不同于普通文章,它不是按照时间顺序出现在页面中,所以比较好的建议是为置顶的文章设置特殊的样式,以区别于其他普通文章。WordPress 2.7 中加入了 post_class(《 (阅读更多精彩内容...)

Nov 28

Install and update WordPress via SVN

2008年11月28日,星期五,下午 5:05 | 分类:wordpress | 给我留言 | 0次浏览

通常,们选择通过 FTP 上传文件的形式将 WordPress 的原文件上传到空间中,然后进行安装。这是最常见的方法。显然,通过 FTP 的方法没有什么缺点,是空间提供商的标准服务。本文要介绍的是另一种方法,通过 SSH 连接 SVN 进行安装或升级。较之传统的 FTP 方式有一定的强处。

什么是 SVN

SVN 的全称是 Subversion,由 CollabNet 公司于 2000 年起开发。SVN 是一个版本控制系统,采用分支管理系统。其他的版本控制系统还有 CVS、GIT 等。由于 SVN 的开发目标就是要取代 CVS,所以改进了 CVS 的很多不足之处,较之 CVS 有以下的优点:

  • 原子提交。一次提交不管是单个还是多个文件,都是作为一个整体提交的。在这当中发生的意外例如传输中断,不会引起数据库的不完整和数据损坏。
  • 重命名、复制、删除文件等动作都保存在版本历史记录当中。
  • 对于二进制文件,使用了节省空间的保存方法,简单的理解,就是只保存和上一版本不同之处。
  • 目录也有版本历史。
  • 优化过的数据库访问,使得一些操作不必访问数据库就可以做到。这样减少了很多不必要的和数据库主机之间的网络流量。

由于 SVN 的很多优点,很多先前使用 CVS 的团队决定换用 SVN,包括 FreeBSD、Apache、GNOME 等。Google Code 也使用 SVN 做为版本控制系统。当然,WordPress 也是使用 SVN 的。

WordPress 的 SVN

WordPress 1.5 之前,WordPress 是托管在 Sourceforge 的,Sourceforge 使用 CVS 作为版本控制系统。从 WordPress 1.5 开始,开发团队自行搭建了自己的版本控制系统,基于 SVN。

SVN 对于一般的用户没有特别的作用,对于开发展的作用却很大。如果你不属于开发团队,也可以通过 SVN 贡献自己的代码,或者你是主题、插件的开发者,可以通过 SVN 获得最新的开发版本来测试其兼容性。

事先的准备

通过 SVN 安装、升级 WordPress 需要具备一些条件,这大概也就是这一方法不太普及的原因所在,因为这些条件往往不是标配,属于附加服务,这也使该方法看起来很高级、很 geek,实际上则很简单。让们来看看需要准本些什么。

  • 开通 SSH 连接的空间

    只有你所使用的空间支持 SSH 连接才能使用 SSH 连接到 SVN 服务器。对很多人使用的 Dreamhost 默认是开启 SSH 连接的,如果没有开通可以写信给客服请求开通。本站使用的 CPH 默认不开通,需要提供个人真实信息证明才可申请开通。

  • SSH 连接软件

    Windows 系统下使用较多的是 PuTTY目前使用的是基于 Putty 衍生的 PieTTY。通过 PieTTY 连接到 WordPress 的 SVN 服务器,将所需文件传输到空间。

安装 WordPress

做好准备后,开始全新安装 WordPress。

1. 连接 SSH

配置连接信息之后便可以连接到空间的 shell。

2. 进入相关目录

进入 shell 后,只是进入了空间的根目录,需要再次进入要安装 WordPress 的目录:

cd public_html

如果所需目录还没有建立,可以通过命令新建目录。比如想将 WordPress 安装在 public_html 目录下的 blog 子目录:

mkdir blog

然后再进入该目录:

cd blog

3. 获取 WordPress SVN 服务器上的文件

WordPress 的 SVN 服务器上有很多分支,在获取文件之前,先明确要获取的分支。分支的两个选择是:

  • trunk

    trunk 分支中的文件总是最新的,跟随开发的脚步,所以很可能会导致 WordPress 的不正常运行,除非用于测试目的,正常安装不建议使用这一分支

  • 某发布版本

    这一分支下的文件总是稳定的,正常安装推荐使用该分支。

明确所需分支后便可以获取对应的文件了:

svn co http://svn.automattic.com/wordpress/trunk/ ./

注意后面的 ./,这很重要,否则获得的全部文件将出现在 blog/trunk/ 目录中。这是获取 trunk 分支中的文件,怎么获取某发行版本的文件呢,很简单:

svn co http://svn.automattic.com/wordpress/tags/2.6.5 ./

上面的代码获取 WordPress 2.6.5 下的全部文件。相应的版本可以在“这里”查到。

升级 WordPress

通过 SVN 升级 WordPress 大概是这一方法最大的便利之处,而且可以说是无痛的,即便出了问题也有后悔药可以吃。升级类似全新安装,也分两种。升级到最新的 trunk 分支,执行下面的代码:

svn up

升级到某发行版本,执行下面的代码:

svn sw http://svn.automattic.com/wordpress/tags/2.7/ ./

如果升级到某一 trunk 或某一版本,发现和主题或插件不兼容,可以平滑的返回到之前的版本。例如,当前版本号是 9999,想回溯到 6666,执行下面的代码:

svn up -r6666

一个好的习惯是,在执行升级之前,先通过 svn info 查看当前版本信息,记住 revision 号,以防出现问题方面回溯。

总结

使用 SVN 安装、升级 WordPress 的好处很多,特别是针对升级,不需要“下载—解压—上传”,升级便利,方便回溯。如果条件允许,推荐使用 SVN 安装、升级 WordPress。

参考资料


WordZine 的新 Feed: http://feed.wordzine.cn

© Andor for WordZine, 2008. |
Permalink |
No comment |
Add to
del.icio.us

(阅读更多精彩内容...)
Nov 16

Add a meta box to the Write Panel

2008年11月16日,星期日,下午 5:05 | 分类:wordpress | 给我留言 | 0次浏览

WordPress 是高度可定制的,对后台也可以个性化。今天就为 Write Panel 加入了一个 meta box,提醒自己主题中定义的一些样式,以方便在书写文章时参考。最终结果如下图所示。

Add meta box to the Write Panel

add_meta_box

向 Write Panel 添加 meta box 的过程中最重要的函数是 add_meta_box,先来了解一下这个函数。

add_meta_box(’id’, ‘title’, ‘callback’, ‘page’, ‘context’, ‘priority’);

参数说明:

  • id:添加的 meta box 的 id
  • title:添加的 meta box 的标题;
  • callback:处理 meta box 中内容的函数;
  • page:向哪些页面添加 meta box,postpagelink
  • context:向 Write Panel 的哪一部分添加 meta box,normaladvancedside
  • priority:所添加的 meta box 的顺序,highlowdefaultcore

这几个参数很好理解,进一步说明一下 context,看下图:

Write Panle
WordPress 2.7 中默认没有 advanced 区域,但可以向其中添加 meta box。

代码

因为样式提示信息只是针对特定主题,所以将代码写入主题的 functions.php 中。如果有其他需求,可以自制插件。

首先定义处理 meta box 中内容的函数,也就是 callback 参数。

function ac_style_notes(){
    echo ‘<div id="h3_color" class="misc-pub-section"><strong><code>h3</code> color classes:</strong><p><span style="color:#4866A9;">blue</span>, <span style="color:#649005;">green</span>, <span style="color:#E87600;">orange</span>, <span style="color:#59438A;">purple</span>, <span style="color:#148488;">cyan</span>, <span style="color:#BD4746;">pink</span></p></div>’;
    echo ‘<div id="img_align" class="misc-pub-section misc-pub-section-last"><strong>Image classes:</strong><p>居中:center, 居右:alignright, 居左:alignleft, 边框:border</p></div>’;
}

这个函数相对简单,因为只是静态内容,不涉及动态文章处理过程。接下来定义添加 meta box 这一动作的函数。

function ac_add_style_notes(){
    add_meta_box(’ac_style_notes_id’, ‘Notes’, ‘ac_style_notes’, ‘post’, ’side’, ‘high’);
}

对应 add_meta_box 的参数:id——ac_style_notes_id,title——Notes,callback——ac_style_notes,page——post,context——side,priority——high。

最后,添加动作,执行 ac_add_style_notes

add_action(’admin_menu’, ‘ac_add_style_notes’);

Conclusion

定制 WordPress 的过程往往都很简单,不论是前台的主题,还是后台的管理,不需要关心表现,而将全部目光聚集在内容的执行上。这也是喜欢 WordPress 的原因之一。

参考文章


WordZine 的新 Feed: http://feed.wordzine.cn

© Andor for WordZine, 2008. |
Permalink |
No comment |
Add to
del.icio.us

(阅读更多精彩内容...)
Nov 01

WordPress 2.7 评论分页的一个 hack

2008年11月1日,星期六,下午 10:10 | 分类:wordpress | 给我留言 | 0次浏览

听说 WordPress 2.7 Beta 1 发布了,就等这一刻了,因为在之前的 nightly 版本中留言分页一直存在一个问题,至少的是这样。但,不幸的是,Beta 1 中,问题依旧,不知道开发者发现了没有。

问题描述

WordPress 2.7 中加入了这么一个函数 paginate_comments_links,用来给留言分页,类似 WP-PageNavi 插件所实现的格式。当然,同时也提供了 previous_comments_link & next_comments_link 两个函数用来实现“前一页”、“后一页”的效果。(《 (阅读更多精彩内容...)

Oct 25

WordPress 2.7 中增加的新模板标签

2008年10月25日,星期六,上午 5:05 | 分类:wordpress | 给我留言 | 0次浏览

WordPress 2.7 中增加了一些模板标签,简介如下。

1. post_class

为每一篇文章添加一些语义性 class

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    //post goes here
</div>
  • 置顶文章:为置顶文章添加 sticky
  • hentry:为 Microformats 而加入的
  • 分类:为文章加入分类标记 category-cat_slug
  • Tag:如果文章有 Tag 的话,加入 tag-tag_slug

2. get_search_form

获取搜索框文件,也就是们常用的 searchform.php。如果主题中没有该文件,调用默认的代码块。有了这个标签,主题文件完全可以没有 searchform.php 了,默认的代码写的很好,而往往们并不需要定制。

<form method="get" id="searchform" action="’ . get_option(’siteurl’) . ‘/" >
    <label class="hidden" for="s">’ . __(’Search for:’) . ‘</label>
    <div>
        <input type="text" value="’ . the_search_query() . ‘" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

3. wp_list_comments

列出文章的留言。这是 WordPress 2.7 引入嵌套评论后的一个重量级模板标签,相对比较复杂,将另写文章专门介绍。

4. previous_comments_link & next_comments_link

设置留言分页后,到前一页(后一页)留言的链接。

5. comment_form_title

留言框的标题,们熟知的 Leave a Reply。只有在用户启用浏览器的 Javascript 时才有效。

接受三个参数,均为可选。

comment_form_title($noreplytext = ‘Leave a Reply’, $replytext = ‘Leave a Reply to %s’, $linktoparent = TRUE)
  • $noreplytext:默认显示的值
  • $replytext:回复某个留言时显示的值,%s 是所回复留言的作者
  • $linktoparent:是否将所回复留言的作者作为链接,链接到原留言

6. cancel_comment_reply_link

一时冲动想回复某人的留言,但三思之后,决定不回复了,那么点击该链接,取消此次回复请求。

7. comment_id_fields

code 留言框时,们都会在提交按钮的后面加入这么一句:

<input type="hidden" name="comment_post_ID" value="$id" />

WordPress 2.7 加入了回复留言的功能,所以,们还需要紧随其后加入这么一句:

<input type="hidden" name="comment_parent" id="comment_parent" value="$replytoid" />

简化代码,现在们只需:

<?php comment_id_fields(); ?>

效率!

8. wp_login_url & wp_logout_url

登入、登出链接,均接受一个参数,登入、登出后转向的地址。

n. more

暂时讲这么多。由于 WordPress 2.7 还未正式发布,所以这些模板标签的功能可能有所改变,正式发布前,慎用。


WordZine 的新 Feed: http://feed.wordzine.cn

© Andor for WordZine, 2008. |
Permalink |
No comment |
Add to
(阅读更多精彩内容...)

Oct 14

WordPress 主题优化:页面标题

2008年10月14日,星期二,下午 7:07 | 分类:wordpress | 给我留言 | 0次浏览

按:这是一个小系列文章,主要内容为 WordPress 主题优化方面,或者可以说是 SEO,不过关注点不在 SEO 本身,而是为了 WordPress 主题更好的表现,和符合 Web Standards。

系列文章开篇,讨论页面标题的优化。首先们需要明白页面标题为何物,先看图:

Title of Web Page

浏览器中的页面标题往往还是被忽略的,因为他并不在视线的中间,而在最上面。但是,页面标题不能因为不引人注目就不重要,再看下面的图:

Page Title at SERP

现在似乎比较明了了,搜索结果页中比较显眼的,链接到具体页面的链接文本就是取自“页面标题”。

页面标题是一个页面最重要的信息,因为他传达给读者或搜索引擎关于这一页面的信息,或是一个简要。读者在搜索结果页中通过观察“页面标题”来筛选是否要查看该链接。由此可见“页面标题”对于一个网页的重要性。

了解了“页面标题”的重要,那么就应该合理的规划“页面标题”的内容。对于 WordPress 而言,页面标题可以针对不同页面动态显示,通过 wp_title() 来实现。具体要如何处理“页面标题”呢?

花了点时间,查看了一些(18个)基于 WordPress 所架构博客的“页面标题”,简要的统计如下。

先看首页的“页面标题”,大概是下面这几种:

  1. 站点名称
  2. 站点名称 - 站点描述
  3. 站点名称 | 站点描述
  4. 站点名称 // 站点描述

再看看单独文章页面的“页面标题”,大概是下面这几种:

  1. 文章标题
  2. 文章标题 - 站点名称
  3. 文章标题 — 站点名称
  4. 文章标题 | 站点名称
  5. 文章标题 at 站点名称
  6. 文章标题 : 站点名称
  7. 文章标题 :: 站点名称
  8. 文章标题 - 站点名称 - 站点描述
  9. 站点名称 » 文章标题

仔细的观察,大同小异,但其中是有学问的,也就是如何合理的放置及安排各项及其顺序。

这一问题的解答一句话也就说清楚了:重要的放前面,不重要的往后排。根据这一原则,想答案便呼之欲出了。

先看首页。首页标题最重要的信息是什么?很多同学都会说,站点名称。不过仔细想一想,站点名称真的这么重要吗?或者说,站点名称能传达给读者或搜索引擎什么直观而有意义的信息呢。相比站点名称,站点描述的重要性就更明显了。站点描述往往是一句话概述当前站点的主要关注领域,放在站点名称前则显得很合适了。

所以,首页的“页面标题”要用这样的结构:

站点描述 — 站点名称

对于单独文章页面而言,根据上述原则及上面的例子,举一反三,应该用这样的结构:

文章标题 — 站点名称

明确了以上的说明,动手修改一下主题的代码吧,在 header.php 中找到 <title> 中的内容,将其修改为:

<?php
    if (is_single() || is_page() || is_archive()) {
        wp_title(”,true);
    } else {
        bloginfo(’description’);
    }
?> — <?php bloginfo(’name’); ?>

至于其中的分隔符,上面的只是一个参考,至于什么样的分隔符对 SEO 更有利,还没研究过,有了解的同学可以指教一下

(阅读更多精彩内容...)
  • 广告赞助
  • FEED订阅
  • 热门日志
  • 关于本站
  • N/A
  • about...