很多时候写文章都想给它加上一个预览图或者广告图来吸引读者眼球，wordpress现在有了这个功能，写文章的右上角点击“显示选项”，里面就有一个“特色图像”的选项，勾上以后在下面的模块里就会出现特色图像的模块，在那里面设置图片就可以了，可以设置相同大小，等宽等高的优质图片，博客首页就会非常整洁好看。

WP-PageNavi是WordPress的一个分页插件，虽然 WordPress自身也有这个功能，但是过于简单，只能翻至前后页，因此对读者来说有时会造成阅读障碍，而安装 WP-PageNavi 之后就可以彻底解决这一问题。当你的Blog的文章数比较多的时候，就可以直接跳到某页去，而不用上一页下一页的点。

安装步骤不用说了，直接在后台搜索这个插件就可以了，我装的时候已经提示不一定兼容最新版本的wordpress了，但是仍然可以成功安装，启用后来适当位置插入

就大功告成了。

附上本站分页的CSS代码：

时间代码为，其中F表示月分，j表示日，Y不用说就是表示年了。要修改时间的格式通过修必这三个参数即可。下面是WordPress 博客时间格式的相关参数列表，供各博主参考使用：

用法：

代码很简单，如下，兼容chrome和IE

document.onclick = function(e) {
    var e = e ? e : window.event;
    var tar = e.srcElement || e.target;
    var tarClass = tar.className;
    // var tarClass = $(tar).attr(‘class’);
    var tarId = tar.id;
    // var tarId = $(tar).attr(‘id’);

console.log(tarClass);
console.log(tarId);

}


说下用处，肯定不是为了获取点击元素的ID和Class

这里用到的一个地方可能就是模拟select标签的下拉层，当select处于下拉状态时点击页面其他区域，下拉层隐藏。可以判断点击元素的CLASS或者ID是否为下拉层来实现。

介绍一个很有趣的JS插件，可以生成如下的loading动画，用的是CSS3动画
这个插件使用起来很简单，首先引用插件源代码：spin.js
然后是配置调用代码：

var opts = {
    lines: 13, // loading动画的线的数目   The number of lines to draw
    length: 20, // 线的长度，值为0时为圆   The length of each line
    width: 10, // 线的宽度，粗细   The line thickness
    radius: 30, // 线离中心点的距离   The radius of the inner circle
    corners: 1, // 线两端的圆角的值，取值范围0-1   Corner roundness (0..1)
    rotate: 0, // 整体旋转度数   The rotation offset
    direction: 1, // 1: 时钟方向动画, -1: 时钟反方向动画   1: clockwise, -1: counterclockwise
    color: ‘#fff’, // 线的颜色#rgb or #rrggbb or array of colors
    speed: 1, // 动画速度Rounds per second
    trail: 60, // 透明度Afterglow percentage
    shadow: false, // 阴影Whether to render a shadow
    hwaccel: false, // 使用应用加速Whether to use hardware acceleration
    className: ‘spinner’, //父级的class名 The CSS class to assign to the spinner
    zIndex: 2e9, // z-index取值The z-index (defaults to 2000000000)
    top: ‘auto’, // TOP值，默认父级为relative（Top position relative to parent in px）
    left: ‘auto’ // LEFT值，默认父级为relative（Left position relative to parent in px）
};

var target = document.getElementById(‘spin-preview’);
var spinner = new Spinner(opts).spin(target);

这里主要总结-webkit内核浏览器支持的滚动条CSS样式，IE的不讨论
-webkit内核浏览器支持的滚动条CSS样式主要有一下几条：

::-webkit-scrollbar               /  滚动条整体部分，可以设置宽度啥的  /
::-webkit-scrollbar-button        /  滚动条两端的按钮                /
::-webkit-scrollbar-track         /  外层轨道                       /
::-webkit-scrollbar-track-piece   /  内层滚动槽                     /
::-webkit-scrollbar-thumb         /  滚动的滑块                     /
::-webkit-scrollbar-corner        /  边角                          /
::-webkit-resizer                 /  定义右下角拖动块的样式           /

最近在看jquery插件开发，google找了很多教程看，现在总结一下，主要是对知识的一个总结和记录，很多都是参考别人的教程的，最后会贴参考链接。
最后的jquery插件模板：

(function($){
    $.fn.插件名 = function(settings){

        /* 合并默认参数和用户自定义参数 */
        settings = $.extend({},$.fn.插件名.defaultSettings,settings);
        return this.each(function(){

              debug(this);

              // 引用回调函数,引用位置自己把握
              if (typeof settings.initFn == 'function') { // 确保类型为函数类型
                  settings.initFn.call(this); // 执行回调函数
              }

        });

    }

    // 私有函数：debugging
    function debug($obj) {
        if (window.console && window.console.log)
        window.console.log('hilight selection count: ' + $obj.size());
    };

    // 插件的defaultSettings
    var defaultSettings = {
        initFn : null //当插件初始化完成后执行的回调函数， 默认为null
    }
})(jQuery)

在jQuery插件开发中，我们需要在执行某个动作的情况后促发一些回调函数，如hover, click, change等，或者当插件初始化完成后执行一个简单的回调函数。

$.fn.myPlugin = function( setting ) {
  var defaults = {
    color: 'red',
    size : '12px',
    initFn : null //当插件初始化完成后执行的回调函数， 默认为null
  }

  //默认值继承
  var config = $.extend( defaults, setting || {});

  // 引用回调函数
  if (typeof config.initFn == 'function') { // 确保类型为函数类型
        config.initFn.call(this); // 执行回调函数
  }
};

在页面中调用

$('#icon').myPlugin({
    color  : 'yellow',
    initFn : function () {
        alert('init successfully');
    }
})

这里关键是要介绍FOUC（Flash of Unstyled Content）这个名词，他的现象和避免方法其实一般做网站的都知道。

FOUC即文档样式短暂失效，也就是HTML代码加载成功时它的CSS文件还没有加载，导致出现的网页内容没有样式，一般有这几种情况会导致FOUC：

1、使用import方法导入样式表；

2、HTML代码在前，CSS样式表在后

解决方法也很简单：

1、尽量减少使用import方法导入样式表；

2、CSS样式表全部放到HEAD里