本站建站技术合集

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

一、主题

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

二、插件

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的元素，两个鼠标事件。源码直接就在页面上，大家可以看得到，这里就不贴了。

在分析QRCode的时候，还发现移动版的腾讯TT浏览器也可以生成二维码，并且微信能够识别，通过解码工具分析，并没有在网址上添加识别参数来生成二维码，那应该是二维码上面有差别，对比Google生成的二维码，的确是显得丰富很多，不知道TT浏览器在二维码中添加了什么内容。

效果截图：

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

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

【更新历史记录】

08/03/2014：禁用插件和主题更新提示。因为对插件和主题做了非常多的定制化修改，一不小心点击了更新链接，所有修改将被覆盖。已经吃过好几回这样的亏了。修改方法，在主题的functions.php文件中添加如下代码：

add_filter('pre_site_transient_update_core',    create_function('$a', "return null;")); // 关闭核心提示
add_filter('pre_site_transient_update_plugins', create_function('$a', "return null;")); // 关闭插件提示
add_filter('pre_site_transient_update_themes',  create_function('$a', "return null;")); // 关闭主题提示
remove_action('admin_init', '_maybe_update_core');    // 禁止 WordPress 检查更新
remove_action('admin_init', '_maybe_update_plugins'); // 禁止 WordPress 更新插件
remove_action('admin_init', '_maybe_update_themes');  // 禁止 WordPress 更新主题

remove_action( 'load-update-core.php', 'wp_update_plugins' );
add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) );

07/24/2014：添加微信机器人。绑定微信账号。

07/14/2014：使用七牛的镜像存储服务，托管本站的静态资源：链接。

05/01/2014：添加日志列表插件，并生成一个“全部日志列表”的日志，效果链接，插件名为：“Archivist – Custom Archive Templates”。

04/23/2014：添加“评分插件”：WP-PostRatings。

04/12/2014：从美国的主机搬家到香港主机，衡天小张，主机不错，速度够快，终于不用再忍受蜗牛一样的打开网页速度了。只留了news.codefine.site/wp-content/uploads的域名在BlueHost托管。从下面的ping值的对比好像不能完全体现速度的差异：

03/28/2014：添加百度sitemap1.0插件。

10/13/2013：使用updraftplus插件本分主题、插件、上传的文件和数据库。以前一直自己手动将代码复制到本地，非常麻烦，速度慢，这个插件直接在服务端备份到网络存储，支持Email、Gdrive、Dropbox等，非常实用。还支持周期自动备份。不过如果需要定时功能则需要安装付费插件。