美化、优化博客

这几天在参照别人的经验来美化和优化我的博客，连去万戈那里灌水刷屏都少了点。暂告一段落了，总结一下。

添加中文语言包

我使用3.0时，尚无中文语言包，所以后台一直英文。虽说不是看不明白，但到底不是母语，思考需要转个弯，所以决定打个语言包。

在wordpress中文团队下载简体中文语言包，解压到wp-content/languages目录，然后编辑根目录下的wp-config.php文件，将语言定义宏改为 

define ('WPLANG', 'zh_CN');

保存即可。

Ctrl + Enter提交评论

添Ctrl + Enter提交评论功能是很有必要的，因为省去了移动鼠标或用Tab来移动焦点的时间。

实现也很简单，如同Java中的addKeyListener一样添加按键监控即可，我使用的是万戈给WP添加Ctrl+Enter快捷回复一文中木木提供的代码。

在所用主题中的comments.php中找到评论框的代码，形如：

<textarea name="comment" id="comment" cols="105" rows="10" tabindex="4"></textarea>

修改为：

<textarea name="comment" id="comment" cols="105" rows="10" tabindex="4" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById(‘submit’).click();return false};"></textarea>

最好还将提交按钮改成形如以下形式以提示可以使用Ctrl+Enter快捷键来提交评论。

<input name="submit" type="submit" id="submit" class="button" tabindex="5" value="我说(Ctrl+Enter)" />

评论表情

在评论中使用表情可参照万戈的WordPress非插件调用表情符，使用由Willin大师改进的方法，下面简述一下：

  1. 从万戈那里下载smiley.rar文件，将其中的PHP文件解压到当期主题目录。最好为该PHP文件中的表情链接添加上title属性以提示该表情的含义。
  2. 在comments.php中的适当位置（譬如上一小节中的textarea前）加上以下代码即可：
    <?php include(TEMPLATEPATH . ‘/smiley.php’); ?>
  3. 个性化表情：用同名图片覆盖掉wp-includes/images/smilies中的图片即可。
  4. 邮件中显示表情参照墨白的wp-thread-comments评论邮件通知输出表情，其实原理很简单，利用convert_smillies()函数将评论中的wordpress内置的表情符号转换为对应的图片。如在wp-thread-comment中，只需要在$mail_message = str_replace(‘[cc_content]’, $cc->comment_content, $mail_message);之后，@wp_mail(parent_email,mail_subject, mail_message,mail_headers);之前添加上$mail_message = convert_smilies($mail_message);就可以了。

评论框圆角

找到评论框所对应的css的类，为其添加上如下代码即可： 

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

description 和keyword

本来我是手动为首页添加上description和keyword的，看到万戈的WordPress SEO之Meta信息后，实现了首先输出固定信息，文章输出文章内容摘要和关键字功能。在主题的header.php中添加如下代码（对万戈提供的代码有所修改）： 

<?php
if (is_home()){
    $keywords = "小居,流年,Wordpress,生活";
    $description = "所谓小居，乃一怡然之乐之地，自成一家";
} elseif (is_single()){
    if (post->post_excerpt) {description = $post->post_excerpt;
    } else {
    	mb_internal_encoding("UTF-8");
        $description = mb_substr(strip_tags(post->post_content),0,80);
    }keywords = "";
    tags = wp_get_post_tags(post->ID);
    foreach ($tags as tag ) {keywords = keywords .tag->name . ", ";
    }
}
?>
<meta name="keywords" content="<?php echo $keywords?>" />
<meta name="description" content="<?php echo $description?>" />
<meta name="Author" content="流年" />

添加归档（网站地图）

这个是使用插件Clean Archives Reloaded来实现的。安装激活后，新建一个页面，在HTML编辑模式下插入形如以下的文字即可（实际使用时去掉"/"）：

共 [/cartotalposts] 篇文章:

[/cleanarchivesreloaded]

网站测速

虽说火狐下有YSlow插件可用，但我倾向于使用Louis Han推荐的网站Gtmetrix，因为可以保存记录、对比网站，并且有很详细的优化说明和建议。

JS/CSS优化

JS/CSS优化包括压缩、合并等，这些都可以根据使用Gtmetrix测试后来针对性优化。需要注意的是，合并JS和CSS时需要根据调用的顺序来先后放置，也不要所有的都合并。

Add Expires headers

这以及以下共3个优化我参照的是断桥残雪部落格的简单修改.htaccess来提高Yslow等级。

在.htaccess文件中添加如下代码：

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault A600

ExpiresByType image/x-icon A2592000

ExpiresByType application/x-javascript A2592000

ExpiresByType application/javascript A2592000

ExpiresByType text/javascript A2592000

ExpiresByType text/css A604800

ExpiresByType image/gif A2592000

ExpiresByType image/png A2592000

ExpiresByType image/jpeg A2592000

ExpiresByType image/jpg A2592000

ExpiresByType text/plain A86400

ExpiresByType application/x-shockwave-flash A2592000

ExpiresByType video/x-flv A2592000

ExpiresByType application/pdf A2592000

ExpiresByType text/html A600

</IfModule>

Configure entity tags(ETags)

添加

FileETag none

启用gzip

这个功能需要服务器开发Gzip功能，若开放，添加

SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html text/css image/gif image/jpeg image/png application/x-javascript text/javascript application/javascript

万戈也写过一系列的关于Gzip的文章，可以参考其的WordPress之终极Gzip兼容IE6，里面包含了其他文章的链接。

这两天做的美化和优化大概如此，感谢万戈，感谢Louis Han，感谢为wordpress写出诸多优化和美化文章的博友，还要感谢提供了一个良好的免费空间的AtbHost。最后上张优化后的首页的测试图部分截图： YSlow评分图 当然，这只是首页的，内页的话分数低点。

82条评论

    1. @蛋卷, ^_^，我说的是前两天，今天基本完工，所以下午刷了一个下午。 😎 :mrgreen:

        2. @蛋卷, 话说，邮件中应该看到表情把

          1. @流年, 我看看，那啥俺的鑫不让俺发那一段，所以我把你评论和谐一点，嘿嘿

                1. @蛋卷, 我还看见我的哦！！有表情就好

                  1. @流年, 发火了鑫妹妹，我又和谐了，不能让她看见，不然我就麻烦啦 😆

    1. @签名, 因为我也还是小白，所以自认应该算写得明白的了吧

  7. 万戈是个关键词，你对他的崇敬之情真实溢于言表啊。。呵呵，而且留言刷的那么厉害，强 ❗

    1. @快乐的村长, 嘿嘿，不是崇拜，而是在那里可以找到很多wordpress相关的美化、优化资料，所以就扫荡了一边 :mrgreen:

  8. 嘿嘿，我还是不汉化了，决定以后一直都用英文版，很习惯嘛^_^ 💡

    1. @Mucid, E文好的人，当然没问题了。我还是比较习惯中文（我有个同学有英文原版书基本不读中文翻译的）

    1. @软件盒子, 😳 我可不是美化高手，因为我是自认和公认的没艺术细胞的人

    1. @mice, :mrgreen: 还可以，内页比首页慢了点，因为js之类的多了

        1. @mice, 看了一下，还以粗略做些优化，比如：将header.php中的javascript放到footer.php文件中（次序不要乱）；那些基本同时需要加载的js、css，可以将其合并；压缩js、css；再参照我上面提到的Add Expires headers和Etags来优化一下

          1. @流年, 😳 我试过把那些js放到底部 但是都失效=.=杯具.

            1. @mice, js已经压缩过了 css不能压缩 要不然IE6 就会杯具了

              1. @mice, 压缩应该不会改变样式的啊，只是去掉了换行、空格之类的吧

                1. @流年, 👿 我也不知道..反正css一压缩 IE6下就杯具 😐

                  1. @mice, 那 ➡
                    建议在本地建一个博客吧，这样子可以慢慢折腾好后才传到网上去

            2. @mice, 次序比较重要，比如如果你有使用的jQuery 的javascript代码，那么其必须位于jQuery后

                  1. @流年, 🙁 所以现在能优化的 都优化了..有时间再看看js好了..

                    1. @mice, 嗯嗯，等到有动力之时吧！！我现在也没动力了

                    2. @mice, Add Expires headers和Etags做了没？如果没，可以参照我的做法或文里万戈文章的链接来实现一下。
                      如果都做了那就是服务器不支持的原因了。
                      话说，你的首页在YSlow的Small site or blog的规则下已经是grade A了，虽然在Yslow(V2)下是C

                    3. @流年, 已经做了,但是还有别的几个图片不支持那个 所以是C 😥

                    4. @mice, 嗯，我也不是所有的图片、JS都能够缓存

                    5. @mice, 乐观一点想，嗯，在Small site or blog的规则下是grade A，很好！和别人说的时候就说是A就可以了

  11. 自从升了3.0后台就一直保持着英文，也就那几个选项习惯了

  12. 优化做的这么好啊。原来你写了这篇文章，我上午还到万戈那里看ctrl+enter的代码来着。 :mrgreen:

    1. @vastar, 🙂 我也是在万戈那里学来的

  13. thread comments评论框有时候太长，特别是当评论层数多的时候。不过你这里没有这个问题啊，你有秘技么？

    1. @vastar, 太长？你指的是什么呢？可以的话，截个图比较容易说明

  15. @流年,
    你看看http://www.happyla.net/archives/1587.html#comment-11376，输入框固定长度，不好。
    莫非thread comments新版没问题？

    1. @vastar, 哦，这个问题啊！！这个不是wp-thread-comment插件的问题，而是主题的问题。主要是因为主题设置的评论的textarea的宽度为固定值导致的，将其改为百分比形式的相对值即可。比如，快乐的村长博客的只要将style.css中第919行的#comment中的width的值改为98%之类的值就可以了。

      我开始时还以为说的是你的博客呢，过去看了下，没发现问题

      1. @流年, 朵末、快乐啦、快乐的村长，呃！我迷糊了

        1. @流年, 呵呵。又迷糊了啊 :mrgreen:
          我明白了。多谢解惑～我以前想用thread的，也有这个问题我就放弃了。

          1. @vastar, 是啊！又迷糊了 ❓
            嘿嘿，我以前用的时候也想改进，可是最近才改

  17. Pingback： 两步开启Gzip « 小居

    1. @liveasx, 若能对你有所帮助，我很高兴

  19. 我下了另一个clean-archive的插件 jQuery的效果超可爱的 本来一直在纠结要不要用的 一想到又要加js我就头疼 然后因为文章太多了 归档页满满一排超囧
    Add Expires headers Configure entity tags(ETags)那两个都直接加就可以了么
    Gzip也是加在.htaccess？我不知道主机有没有这个功能- –

    1. @snowxh, 没记错的话，我用的也是clean-archive插件，默认是缩起别的月份的，所以不用担心。
      后面三个都是加载.htaccess文件即可。（你原本可以使用gzip功能，主机应该就是支持的了）

          1. @流年, 其实是我刚刚500了。。终于明白willin大师为啥写500页面了
            不过已经解决了~ 谢谢哈

    1. @求索阁, 友情链接？咱是暗恋型的

  22. Pingback： 为原始comment_form添加表情 « 小居
  24. Pingback： 为原生comment_form添加表情 « 牧场勿语
  26. Pingback： 美化、优化wordpress-自定义comment_form() wp_list_comments() | 小平平的blog

评论已关闭。