缓存Google Web 字体

WordPress 终于也升级到了4.0,默认主题会加载google web font,这导致wp加载异常的慢。

鉴于google 的部分网站长期处于被Q的状态。我朝子民还是尽量自备“梯子”,以便出墙。

在这里推荐红杏的chrome插件,简单实惠,不用复杂的设置,不用到处找代理,安装即可用。

红杏 按照这个链接购买红杏,你和我可以获取10天的奖励。不用谢。

回到正题

新版的WordPress为了优化主题,会加载open sans的字体。所以在页面的head中可以看到类似这样的链接:

通过特殊手段打开这个文件,我们可以看到类似这样的css代码:

 @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTSUUniRZcd_wq8DYmIfsw2A.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

这段css代码会去加载google font的静态站点。那些没有“梯子”的人们,博客就会异常的慢。因为打不开google font的静态站点。为了响应博主们的号召,解决google 字体的问题,博主开发了Cache Google Font插件。

Cache Google Font插件会去查找类似的链接,直接下载css文件到本地,然后根据css文件中的链接去下载google font,并缓存到本地。是不是很智能?:)。

欢迎大家试用。

Cache Google Font插件已经上传到WordPress 的插件目录

项目托管在GitHub上,如果使用中遇到bug,请直接提Issues

常用的jQuery插件

工作中主要接触的是jQuery这个轻量级优秀javascript库,喜欢它优美的query语法,丰富的插件,下面在工作中常用到的一些jQuery插件。

插件名称 :easyslider1.7

不错的jQuery数字导航Slider插件,可自定义度较高:

自定义前后按钮

自定义数字导航

循环展示内容

容易集成到网站

Demo

插件名称:jcarousel

滑动列表浏览插件

可水平或垂直

列表可以为html或者利用ajax载入

Demo

插件名称:galleria

Galleria是一个javascript的图片相册框架,目的是创建统一的Web和移动相册体验,

基于插件创建常用工具,最大的特点是可子弟难以主题和添加易于扩展的插件!

Demo

插件名称:bxSlider

轻量级的滑动插件,支持内容展示和图片展示

支持水平、垂直、淡出效果

一次展示多个内容

导航控制

带有缓冲效果

随机开始

定时模式

开发友好的API接口:before, after, first, last, next, prev 回调函数

自定义展示CSS样式

Demo

wordpress 3.0 中使用session

wordpress在处理query variables时,会对$_GET和$_POST变量进行处理,大概是这样子:对$_GET和$_POST数组进行遍历,将数据的key处理为php变量,举个例子,有一个值为$_GET['category_name'] or $_POST['category_name']的query variables,wordpress处理后就会把它变为$category_name变量,这样就可以使用$category_name变量了。

然后就会华丽的忽略SESSION。在3.0版本中在wp-includes/load.php下第23行,唯独没有Session变量!

// Variables that shouldn't be unset
$no_unset = array( 'GLOBALS', '_GET', '_POST', '_COOKIE', '_REQUEST', '_SERVER', '_ENV', '_FILES', 'table_prefix' );

那我要想在wordpress中使用SESSION,该怎么办咧?

我们可以使用Filter Reference,手动开启SESSION

具体代码如下,例如我想在single模板下特定的文章页面使用Session


//开启SESSION
add_action('init','session_manager');
function session_manager(){
session_start();
}
add_filter('single_template','session_single');
function session_single(){
//判斷特定的文章頁面
if(is_single('108') || is_single('106') ||is_single('74') || is_single('131') || is_single('128')){
$_SESSION[session_id()] = true;
}
}

参考资源:

Enabling Sessions in WordPress 3.0

How To: Enable the Use of Sessions On Your WordPress Blog

wordpress对请求的处理 简单架构

WordPress Code Flow

wp-setting.php文件详解

X1 主题发布

忙活了几天几夜终于把主题给改出来了,因为本人对apple情有独钟,简约而不简单的风格,看着就喜欢,就将robinhotnews主题修改过来的。

初次看到这个主题就很是喜欢,可惜很多地方都不适合做blog,倒是做新闻类的cms比较合适,没办法,没有找到比这个更好的主题,所以就不满意的地方小小的修改了一下

这个主题内置的东东还是比较多的,从修改主题来讲,做一个主题真的不容易,做一个让人满意的主题更不容易。

好了,简单的介绍一个X1主题的特点

1.通过了valid XHTML 1.1 and CSS 3验证

2.首页去掉了顶部的演示栏图片

3.修改gvatar的头像缓存和缩略图的缓存至uploads文件夹,

将目录图片移至主题文件夹目录images下,可一直调用,可后台开启

4.优化css 和js脚本

5.默认关闭首页缩略图显示,可后台开启

6.脚本自带了一套笑脸,可替换wp默认笑脸,主题中自带的笑脸的可在万戈下载

7.添加内置loazyload插件,延迟加载

8.还有一些其他的小小的修改,有兴趣可以自行发现!!!

9,支持的插件有

wp-postviews

google-analyticator

codecolorer

tinymce-advanced

BackUpWordPress

Google XML Sitemaps

wp slug translate

暂未发现以上插件与主题冲突

在通过w3c验证时遇到一些趣事,为了通过html验证,遇到了下面这个提示


 警告: <input> ID "_wp_unfiltered_html_comment" uses XML ID syntax

感觉很奇怪的问题,平时没有什么事情,一但你登入了后台,验证器就会报错。登出以后反而可以通过验证。

百思不得其解,于是问问谷哥到底是怎么回事,终于功夫不负有心人,在wordpress的官方论坛里看到有人跟我遇到一抹一样的问题,于是有一堆人来围观,有人给出解决方案


找到<?php do_action('comment_form', $post->ID); ?>
替换为<p><?php do_action('comment_form', $post->ID); ?></p>
经试验,这个方法无效,登入后还是无法通过验证

有人提议修改wordpress下的模板

修改位于wp-includes/comment-template.php的函数

wp_comment_corm_unfiltered_html_nonce()

/*找到这一行*/

wp_nonce_field('unfiltered-html-comment_' . $post->ID, '_wp_unfiltered_html_comment', false);

/*在这一行下面添加*/

echo '<input type="hidden" id="wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="' . wp_create_nonce( 'unfiltered-html-comment_' . $post->ID ) . '" />';
这个方法,我没去试,应该会有效,但我不想去动wp的模板!!!继续往下看 看到还有人搬出一堆链接,来证明验证的算法出现错误,这是一个bug 我看得满头大汗,后来又在wordpress的trac里看到,类似的ticket, 里面讲的是有人请求开发人员修改input的name属性_wp_unfiltered_html_comment改为wp_unfiltered_html_comment 这有什么难,当然开发者不愿意修改这个name属性,因为无法预料带来的后果影响,后来者ticket被closed又open,反复纠结中....... 最终也不了了之,被人移到最新wp版本去了 :cry: .......

做一个主题真的很不容易,非常感谢原作者的分享的精神,还有willinWordPress 標準的 script 掛法WordPress 內置嵌套評論專用 Ajax comments :-D,

x1主题下载地址 😛 😛 😛

显示不同类型的链接

ck的博客看到不一样的外链样式,突然想起先前看的书精通CSS-高级Web标准解决方案中利用css显示不同样式的章节,在ilmilk同学这还能看到全文+demo效果。

在做之前,起先是想利用jquery的选择器来实现添加外链样式,但仔细研究下ck的blog的样式发现,不是用js实现,思索再三,决定还是采用class来实现外链的样式。原因有以下几个:

1.利用jquery的属性选择器,可以很方便的实现区分站内和站外的链接,坏处是对js支持不算很好的浏览器(如手机浏览器,弱弱的uc….)访问时会看不到外链的样式,效果不是很好。

2.利用css的属性选择器来实现,比用js来实现有相当大的优点,但是要用到css3的属性选择,ie6表示无能为力….

3.如果要支持ie6的话又必须用到javascript,这相当的纠结了。

采用css的class就能很好的解决,这些问题了。因为本人比较懒就直接拿ck的外链样式了。

但是在添加链接的class name时却犯难了,我是自己手动添加class还是在mce编辑器插入/编辑链接里添加一个样式呢?

人都是懒惰的,所以我想在插入/编辑链接,这样我就不用自己手动添加了,插入链接时选择一个下拉的链接是多么的惬意啊,但是我寻遍了wp目录的js源代码,就是没办法找到添加class name的地方,找到WordPress修改外部链接补遗,还以为能实现我的功能,没想到却只是添加一个rel属性,大失所望,最后没办法了,只能使用我的杀手锏了,安装了tinymce-advanced插件,这个插件几乎可以替换自带的有点弱的mce了,还带了n多的高级功能,默认就添加了高级的链接管理,对本来的插入编辑链接的进行了扩展,可以添加事件属性,id,class一坨的自定义东东,最最重要的是可以安然无恙的和语法高亮codecolorer插件”和平”共处!!看这里开启CodeColorer的可视化插入代码功能

这是一个外链样式

这是一个下载文档的链接

下面实现的css代码:

.outsite{
background:url(images/common.png) no-repeat right -126px;
padding-right:28px;
}
.zip,.c{
background:url(images/common.png)  no-repeat right -216px;
padding-right:28px;
}