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;
}

javascript插入视频类

上一篇中是利用jQuery来实现插入视频,那为什么不用js原生来写呢,这样就不加载jQuery的库了。顺便学习了javascript的面向对象实现类。

调用方式如下


/**
*先实例化对象,调用对应的实例的方法
*/

var v= new video('video');
//插入youku的视频
v.youku('rCWLA1bRkUE');
//可自定义宽度和高度
v.youku('rCWLA1bRkUE',100,100);
//tudou
//v.tudou('rCWLA1bRkUE');
//ku6
//v.ku6('XXX');
//youtube
//v.youtube('XXX');

video.js源代码


/**
*javascript 插入视频类
*Author:Arthur
*Blog:http://www.xbc.me
*/

function video(id){
    this.id = id;
    this.flash = '<object width="mywidth" height="myheight" type="application/x-shockwave-flash" data="myurl"><param name="quality" value="high"><param name="allowScriptAccess" value="always"><param name="flashvars" value="playMovie=true&isAutoPlay=true"></object>';
    this.youku = function(code,width,height){
        if(width == undefined){
        width = 480;
        }
    if(height == undefined){
        height =400;
        }
    var url ='http://player.youku.com/player.php/sid/myid/v.swf';
    document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
        }
    this.tudou = function(code,width,height){
        if(width == undefined){
        width = 480;
        }
    if(height == undefined){
        height =400;
        }
    var url ='http://www.tudou.com/v/myid/v.swf';
    document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
        }
    this.ku6 = function(code,width,height){
        if(width == undefined){
        width = 480;
        }
    if(height == undefined){
        height =400;
        }
    var url ='http://player.ku6.com/refer/myid/v.swf';
    document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
        }
    this.youtube = function(code,width,height){
        if(width == undefined){
        width = 480;
        }
    if(height == undefined){
        height =400;
        }
    var url ='http://www.youtube.com/v/myid&hl=en_US&fs=1&autoplay=1';
    document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
        }
}

视频短代码

在WordPress中有很多种方法插入视频,当WordPress自带的插入视频又比较笨,当然也有一些插件像WordPress Video Plugin,smart-video,这些插件用起来也很不 “听话”,你说我首页要输出摘要的,你也播放视频,这就不靠谱了…..

所以就自己写了一个插件,添加了几个短代码,可以添加国内的视频。

1. 支持视频网站的列表:

  • 优酷
  • 土豆
  • 搜狐
  • 腾讯视频
  • 乐视
  • 酷6
  • 56

2. 支持直接粘贴视频地址,Video Short Code插件会自动转为视频短代码。支持以上视频网站,暂时不支持搜狐视频。

Update:2013.4.4


关于如何查找视频的code,以youku视频为例
例如http://player.youku.com/player.php/sid/XXXXXXX/v.swf
XXXXXXX为视频代码
使用方法
[youku code="XXX" width="100" height="100"]

Update:2013.4.5
Video Short Code插件上传到WordPress的插件目录,可在WordPress后台直接搜索Video Short Code,进行安装。

Update:2014.9.16

  1. 更新插件到1.1
  2. 支持直接粘贴部分视频网站的视频URL。

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