本站建站技术合集

新浪微博 QQ空间 腾讯微博

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

一、主题

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制作,折腾了很久才找到透明背景色图标的制作方法,如果不是透明背景色,圆角矩形的就做不出来。做好了这个,后来做返回顶部的按钮也就很轻松了。
效果截图:

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.shentar.me/wp-content/uploads的域名在BlueHost托管。从下面的ping值的对比好像不能完全体现速度的差异:

对比

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

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

新浪微博 QQ空间 腾讯微博

| 1 分2 分3 分4 分5 分 (4.90- 20票)
Loading ... Loading ... | 这篇文章归档在:建站技术, 移动互联
| 标签: , , , , , , , , , , , , , , , , , , , , , , , , , . | 永久链接:链接 | 评论(15) |

15 条评论

  1. miyan
    评论于 三月 24, 2015 at 23:47:19 CST | 评论链接

    前辈写文章的功底确实不错!最近正好搞云存储项目,收获颇丰。

    • 童燕群
      评论于 三月 25, 2015 at 09:00:50 CST | 评论链接

      多谢肯定,共同学习进步!

  2. 匿名
    评论于 十二月 27, 2014 at 18:35:12 CST | 评论链接

    很不错的一篇博文,内容很充实的说

  3. ansonyi
    评论于 十一月 20, 2014 at 19:22:16 CST | 评论链接

    关于favicon,求助一个问题,
    IOS设备的Safari显示有问题呢。
    收藏也没有

    • 童燕群
      评论于 十一月 21, 2014 at 08:50:10 CST | 评论链接

      具体是啥问题,可以一起探讨下。微信:shentar

  4. 评论于 八月 29, 2014 at 20:12:42 CST | 评论链接

    SEO – 内容为王

  5. meppy
    评论于 九月 27, 2013 at 10:08:41 CST | 评论链接

    我觉得主题非常好,要这么炫有什么用,内容好才是王道。况且简洁的主题看着更舒服。

    • 评论于 九月 27, 2013 at 11:44:46 CST | 评论链接

      不能赞同更多,我也一直追求简洁实用、聚焦内容。希望没有把这个主题弄得更复杂。

  6. 对酒当歌
    评论于 九月 20, 2013 at 22:30:36 CST | 评论链接

    界面能做得炫一些吗?

  7. 评论于 九月 20, 2013 at 04:42:14 CST | 评论链接

    我只能说,真正的博主可能不会用这么多时间去关注主题和插件,因为他们除了关注内容还是关注内容。

    • 评论于 九月 20, 2013 at 09:51:26 CST | 评论链接

      内容是主要的,但是外观很大程度上也反映了个人的审美观不是,找妹子的时候漂亮与否不可谓不关键啊,哈哈。

      • 评论于 九月 21, 2013 at 18:54:26 CST | 评论链接

        这个也有一句话说:拉了灯都一样。

        • muzi131313
          评论于 十一月 15, 2013 at 22:13:41 CST | 评论链接

          我只想说,不拉灯的时候肿么办?

      • muzi131313
        评论于 十一月 15, 2013 at 22:18:23 CST | 评论链接

        很佩服博主花费这么多时间,做这么多优化,还有博主大公无私的把建站经验给分享出来,受教了。

        • 童燕群
          评论于 十一月 15, 2013 at 22:30:35 CST | 评论链接

          多谢肯定!爱好使然,分享快乐!

评论

邮箱地址不会被泄露, 标记为 * 的项目必填。

8 - 2 = *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <img alt="" src="" class=""> <pre class=""> <q cite=""> <s> <strike> <strong>

返回顶部