美化、优化博客

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

添加中文语言包

我使用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:

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

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

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

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

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

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

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

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

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

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

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

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

            1. @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就可以了

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

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

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

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

  6. @流年,
    你看看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, 是啊!又迷糊了 ❓
            嘿嘿,我以前用的时候也想改进,可是最近才改

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

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

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

评论已关闭。