开博一年以来，有大量的时间在做界面和易用性的优化。这里把用到的一些资源，开发过的一些特性，以及日常的维护工具介绍一下，也为能看到的新人提供一些帮助吧。

一、主题

   themtic -- 一个极其精简的主题，但是是英文的，一开始还讲究着用，后来发现实在有点难以忍受满屏的下划线链接和比较杂乱的字体，于是一点点的汉化加修改，做成了现在的样子。

二、插件

   1、All In One SEO Pack -- SEO优化的插件，可以让博客的页面中的关键词和标题更加醒目，使得页面更容易被搜索引擎抓取。

   2、Baidu Tongji generator -- 百度统计，虽然很多人觉得这款插件不怎么好，因为Google的analytics经常出现无法访问的问题，因此两个插件都在用，互备吧，通过analytics和百度统计的对比，的确发现百度统计的数据要少一些。

   3、Google Analytics for WordPress -- 大名鼎鼎的Google统计，不用多说了。另外不得不说一下Google还提供了一个屏蔽analytics抓取本终端数据的浏览器插件，链接：https://tools.google.com/dlpage/gaoptout?hl=zh-CN，支持目前所有的浏览器。

   4、Google XML Sitemaps v3 for qTranslate -- 站点地图生成插件。站点地图很有用，搜索引擎抓取到站点地图后，都该站出现搜索结果的第一条时，搜索引擎会全方位展现搜索结果。

   5、SyntaxHighlighter++ -- 代码高亮插件，在博客后台发布文章时使用。其实我一直用Windows Live Writer加上一个代码高亮的插件来写博客，几乎没用过后台来写，这两个插件对于我来说都用不着，但是还是一直保留着，后面的评论高亮代码中用得着。

   6、WP-Syntax -- 同上，使用pre标签的代码高亮插件，本站在评论中引用了该插件，使得评论可以插入高亮代码。有需要该功能的同学可以联系博主获取。

   7、WPtouch Mobile Plugin -- 使用最广泛的一动终端检测插件，使用手机打开PC版的网页时，会非常消耗流量，同时网页字体显得过于小，无法浏览，该插件为手机等移动终端提供移动版主题。该插件还支持自定义需要移动版本主题的终端。如iPad默认是访问PC版的主页，但是可以指定iPad访问移动版本的。

   8、Yet Another Related Posts Plugin -- 相关文章阅读插件。在单个文章的页面下方会有相关文章的标题提示。同时还可以设置侧边栏也出现该列表。

   9、简单算术题评论验证码插件 -- 解决垃圾评论的插件，该插件实现非常简单，本站在使用时做了小量改动。将随机数的计算修改成了固定的5 - 2的计算，感觉这样比较合理，因为本来就不是要为难评论者，是想解决机器人的垃圾评论问题。有写过一篇文章介绍使用方法：链接。

三、特性开发

   1、网站的favicon.ico制作，折腾了很久才找到透明背景色图标的制作方法，如果不是透明背景色，圆角矩形的就做不出来。做好了这个，后来做返回顶部的按钮也就很轻松了。  

   效果截图：

   2、返回顶部按钮，也有写过一篇文章介绍用法：链接。    

   效果截图：    

   3、分享按钮，包括文章底部的分享按钮和侧边栏上面的百度分享按钮。互联网上面对于这两种按钮的介绍已经非常全面了，这里说一下我在使用过程中遇到的一个问题：左侧的分享按钮是直接按照百度的说明实现的，有个小问题，就是在Pad和手机上面访问时，按钮会跑到中间去。这是因为脚本中再计算按钮的位置时用到了两个相对距离，一个是相对于屏幕左边界的距离，一个是右边距的距离，在本站中，距离左边距的距离为0，距离右边距的距离即为整个屏幕的宽度。之所以用两个距离，我想是开发者为了方便重用，因为有的人会选取按钮停靠在屏幕右边，这样如果代码实现好了，那么只用输入相关的参数即可。但是没有想到，其实只做一个相对距离也能达到同样的扩展。正是因为有两个值用于定位，而Pad和手机对网页进行了适合屏幕的缩放，因此最终以距离右边距的距离为准，导致了按钮悬浮在屏幕的中间而不是最左边，解决办法是将修改后的百度JS的脚本直接保存在了服务器本地，页面直接从服务器上面加载脚本。

   对于微信分享按钮也折腾了好几天时间，首先是分析二维码原理，然后分析jiathis网站的分享按钮实现，不想依赖该网站，觉得自己也能搞定。于是找到了强大的Google，他有一个简单的接口将网址直接转为二维码。只需要拼接一个网址发出GET请求即可获取到图片，太简单了，下面get_qr($url, $path)方法代码是直接将生成的图片保存在本地，以免每次都要到Google去获取。其中get_qr调用处的代码为：

<?php  
    $localqr =  ABSPATH .'qrcode/'.get_the_id().'.jpg';
    if (!file_exists($localqr)) 
    {
        //如果图片已经存在,则不会再次保存
        get_qr( "http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=L|4&chl="
                 .google_shortlink(get_permalink(), get_the_id()) , $localqr);
        //图片名以文章id命名
    }
    ?> 

   很快就搞定了，二维码，但是发现直接用微信扫描该二维码，提示的是警告，说我的网站的网址不被信任，需要有公众帐号进行认证才行。没那么多时间折腾公众帐号。因此想到了微博用的是短网址，短网址不会被警告，因此也想把网址缩短后再计算二维码。但是微博并不开发缩短网址的接口，于是四处搜寻，又找到了Google，不亏是“谷人希”(Google 人类的希望的简称)。这一次稍微要麻烦一点，需要向API网址提交一个POST请求，但是互联网上面也能搜索到现成的PHP实现。见下面的google_shortlink()方法。再往后就是浏

   览器端的简单动态脚本的实现了，用到了JQuery，两个html的元素，两个鼠标事件。源码直接就在页面上，大家可以看得到，这里就不贴了。

   效果截图：

function get_qr($url, $path)
    {
        set_time_limit ( 10 ); // 设置十秒超时
        
        $file = fopen ( $url, "rb" );
        // fopen函数的r+模式: 读写方式打开 文件指针指向文件头
        if ($file)
        {
            $newf = fopen ($path, "wb+");
            // w+,读写方式打开 文件指针指向文件头 如果文件不存在则尝试创建之
            if ($newf)
            {
                while ( ! feof ( $file ) )
                {
                    fwrite ( $newf, fread ( $file, 1024 * 2 ), 1024 * 2 );
                    // 写入文件,fread控制文件最大的大小,这里是2M
                }
            }    
        }
        if ($file)
        {
            fclose ( $file ); // 关闭fopen打开的文件
        }
        if ($newf)
        {
            fclose ( $newf );
        }
    }
    function google_shortlink($url, $post_id)
    {
        global $post;
        if (! $post_id && $post)
            $post_id = $post->ID;
        
        if ($post->post_status != 'publish')
            return "";
        
        $shortlink = get_post_meta ( $post_id, '_googl_shortlink', true );
        if ($shortlink)
            return $shortlink;
        
        $permalink = get_permalink ( $post_id );
        
        $http = new WP_Http ();
        $headers = array ('Content-Type' => 'application/json' );
        $result = $http->request ( 'https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyDjz_SaOHwqcTslqlYtQPWaJCS-k1AWeGc', 
                                    array ('method' => 'POST',
                                     'body' => '{"longUrl": "' . $permalink . '"}',
                                      'headers' => $headers ) );
        $result = json_decode ( $result ['body'] );
        $shortlink = $result->id;
        
        if ($shortlink)
        {
            add_post_meta ( $post_id, '_googl_shortlink', $shortlink, true );
            return $shortlink;
        }
        else
        {
            return $url;
        }
    }
    

   4、大量的CSS优化，根据自己的审美观来进行的优化。每一个div的宽度，边界和颜色等都仔细调了一下。可以说在这上面花的时间最多了。

   5、评论中支持代码高亮，一个朋友在评论的时候想贴一段代码，结果发现贴上去的代码格式都乱了，因此我联想到发布文章的时候支持插入代码，那么评论的时候应该也支持。于是自己实现了插入代码高亮的文本框，具体的实现也是较多的客户端脚本，需要的朋友可以自行查阅。

   5、支持归档页面在最上方给出文章标题列表和业内链接，效果：

四、关于本站的一些建站基础设施

   1、本站有一些较大的资源都是放在SkyDrive上面的，页面里提供访问链接。

   2、日常的博客开发中的工具：1)Chrome调试客户端脚本；2)zend studio + zend debug + Chrome调试php脚本，环境：nginx + php + mysql；3)CSS编辑和代码同步：dreamweaver，自带ftp提交功能和svn提交功能非常赞；4)本机建立svn服务，用于跟踪代码修改历史。5)文章写作发布工具：Windows Live Writer + 代码高亮插件。

   3、本站的域名和空间解决方案：域名来GoDaddy.com，空间来自bluehost，都是买得乞丐版，不过国外的乞丐版都比国内的便宜，真的有点不可思议。但是在国内访问速度有时实在是太慢了，有统计说，如果一个页面三秒中都无法打开，那么用户就会失去耐心，转而找其他的替代网址。因此在这种国外的域名加空间的组合情况下，只能靠非常努力做好网站内容来吸引用户了。

   到目前为止，网站外形和特性开发也就告一段落了，后面会聚焦到内容和自己的主行业技术研究上面。