显示标签为“iNove”的博文。显示所有博文
显示标签为“iNove”的博文。显示所有博文

2013年1月5日星期六

解决iNove主题评论的回复功能光标位置不正确的问题

iNove主题没有采用传统的评论嵌套回复的样式,而是使用鼠标悬停显示原始评论的方式,这样做的好处是可以使得评论看起来比较规整而且评论之间不受父子级的限制。

可是iNove的回复功能存在光标不跟随始终保持在@user的最前面的问题。具体描述为:当点击“回复”之后,鼠标的光标定位在@user的前面,而不是在@user的后面或者下一行。如下图所示:

@user1

控制“回复”功能的代码是comment.js文件(在主题目录下的js中),通过查看代码可以知道作者的本意是把光标放在@user的下一行。我一开始以为是这段JS的问题,难道是JS不换行的原因,但事实是它没有问题。
var insertStr = '@' + author.replace(/\t|\n|\r\n/g, "") + '  \n';


但是点击回复光标在@user的下一行的功能没有实现,而“引用”的功能却没有问题,仔细观察可以发现“回复”和“引用”的功能大同小异,对比代码最终找到问题出在field.focus()上(控制光标位置的聚焦函数)。

解决的方法是在function appendReply(insertStr, commentBox)函数中找到以下的代码,添加俩field.focus()函数:

if (field.value.replace(/\s|\t|\n/g, "") == '') {
field.value = insertStr;
} else {
field.value = field.value.replace(/[\n]*$/g, "") + '\n\n' + insertStr;
}

修改成如下的代码:

if (field.value.replace(/\s|\t|\n/g, "") == '') {
field.focus();
field.value = insertStr;
} else {
field.focus();
field.value = field.value.replace(/[\n]*$/g, "") + '\n\n' + insertStr;
}

最终的效果如下图所示:

@user2

2013年1月4日星期五

解决iNove主题评论的回复功能光标位置不正确的问题

iNove主题没有采用传统的评论嵌套回复的样式,而是使用鼠标悬停显示原始评论的方式,这样做的好处是可以使得评论看起来比较规整而且评论之间不受父子级的限制。

可是iNove的回复功能存在光标不跟随始终保持在@user的最前面的问题。具体描述为:当点击“回复”之后,鼠标的光标定位在@user的前面,而不是在@user的后面或者下一行。如下图所示:

@user1

控制“回复”功能的代码是comment.js文件(在主题目录下的js中),通过查看代码可以知道作者的本意是把光标放在@user的下一行。我一开始以为是这段JS的问题,难道是JS不换行的原因,但事实是它没有问题。

var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\n|\r\n/g, "") + ' </a> \n';

但是点击回复光标在@user的下一行的功能没有实现,而“引用”的功能却没有问题,仔细观察可以发现“回复”和“引用”的功能大同小异,对比代码最终找到问题出在field.focus()上(控制光标位置的聚焦函数)。

解决的方法是在function appendReply(insertStr, commentBox)函数中找到以下的代码,添加俩field.focus()函数:

if (field.value.replace(/\s|\t|\n/g, "") == '') {				field.value = insertStr;	} else {				field.value = field.value.replace(/[\n]*$/g, "") + '\n\n' + insertStr;	}

修改成如下的代码:

if (field.value.replace(/\s|\t|\n/g, "") == '') {		field.focus();		field.value = insertStr;	} else {		field.focus();		field.value = field.value.replace(/[\n]*$/g, "") + '\n\n' + insertStr;	}

最终的效果如下图所示:

@user2

2012年6月2日星期六

iNove导航栏和侧边栏样式的修改

此次iNove导航栏的修改是完全参照WordPress的经典主题Twenty Eleven,貌似最近导航栏流行的都是黑底白字的样式,这不得不说谷歌老大是互联网行业的风向标。

先看一下更改后的样式效果:

inove_change

iNove导航栏和侧边栏样式的修改

此次iNove导航栏的修改是完全参照WordPress的经典主题Twenty Eleven,貌似最近导航栏流行的都是黑底白字的样式,这不得不说谷歌老大是互联网行业的风向标。

先看一下更改后的样式效果:

inove_change

2012年4月8日星期日

iNove主题侧边栏宽度修改的方法

iNove是一款两栏的WordPress主题,使用者众多。由于其是固定宽度,所以在放置广告时多有不便。为了使右边侧边栏可以放置广告投放多、展示效果好、用户偏向点击的300*250和160*600的广告,需要增加右边侧边栏的宽度(减少右边侧边栏的宽度类推)。

改变前:默认页面宽度为936px,右边侧边栏为300px;

改变后:页面宽度为960px,右边侧边栏为324px;

前后相差:24px.

以下的数据修改都是基于24px来操作的。

iNove

1、样式表(style.css)

页面宽度:936px改为960px.


#container {
margin:0 auto;
width:936px;
}


更改为:


#container {
margin:0 auto;
width:960px;
}


右边侧边栏宽度:300px改为324px.


#sidebar {
background:#F7F7F7 url(img/sidebar_shadow.gif) top repeat-x;
width:300px;
float:right;
font-size:95%;
line-height:145%;
overflow:hidden;
padding-top:8px;
}


更改为:


#sidebar {
background:#F7F7F7 url(img/sidebar_shadow.gif) top repeat-x;
width:324px;
float:right;
font-size:95%;
line-height:145%;
overflow:hidden;
padding-top:8px;
}


2、图片(img)

header.jpg、footer.jpg宽度:936px改为960px.

sidesep.gif宽度:301px改为325px.

注:iNove两栏之间的分隔线是由sidesep.gif决定的。

2012年4月7日星期六

iNove主题侧边栏宽度修改的方法

iNove是一款两栏的WordPress主题,使用者众多。由于其是固定宽度,所以在放置广告时多有不便。为了使右边侧边栏可以放置广告投放多、展示效果好、用户偏向点击的300*250和160*600的广告,需要增加右边侧边栏的宽度(减少右边侧边栏的宽度类推)。

改变前:默认页面宽度为936px,右边侧边栏为300px;

改变后:页面宽度为960px,右边侧边栏为324px;

前后相差:24px.

以下的数据修改都是基于24px来操作的。

iNove

1、样式表(style.css)

页面宽度:936px改为960px.

#container {    margin:0 auto;    width:936px;}

更改为:

#container {    margin:0 auto;    width:960px;}

右边侧边栏宽度:300px改为324px.

#sidebar {    background:#F7F7F7 url(img/sidebar_shadow.gif) top repeat-x;    width:300px;    float:right;    font-size:95%;    line-height:145%;    overflow:hidden;    padding-top:8px;}

更改为:

#sidebar {    background:#F7F7F7 url(img/sidebar_shadow.gif) top repeat-x;    width:324px;    float:right;    font-size:95%;    line-height:145%;    overflow:hidden;    padding-top:8px;}

2、图片(img)

header.jpg、footer.jpg宽度:936px改为960px.

sidesep.gif宽度:301px改为325px.

注:iNove两栏之间的分隔线是由sidesep.gif决定的。

2012年1月2日星期一

静风博客顶部图片汇总

截止到2012年4月7日,静风博客使用的主题顶部图片的像素大小是936×130。不管多么漂亮的图片时间久了总会产生厌烦的情绪,Jasmine一直吵着要换个顶部图片来(她自己总是频繁地更换Windows桌面壁纸),所以在她的驱使下博客的顶部图片(header.jpg)时不时地会发生变化。下面就是这些图片的汇总陈列。

注意:以下显示的是图片的中型图,图片地址样式如:http://farm8.static.flickr.com/7156/6611896423_31ceae1e51_z.jpg,如果想得到原始大小的图片只需把以上地址后缀的_z改成_b即可,如:http://farm8.static.flickr.com/7156/6611896423_31ceae1e51_b.jpg,这就是936×130像素大小的图片了。

蝴蝶(2010.9.15-2011.9.31)

蝴蝶

铅笔(2011.10.1-2011.12.31)

铅笔

2012(2012.1.1-2012.2.18)

2012

江南水乡(2012.2.19-2012.5.27)

江南水乡

我们从使用iNove的第一天开始就替换掉了主题默认的顶部图片,同时修改了顶部图片的像素大小。2012年4月7日又对主题进行了一次修改,拉宽了侧边栏,这样顶部图片的像素长度随之变大,同时Jasmine一直抱怨由于宽度限制作图不方便,于是我们又往下拉长了宽度,所以现在的顶部图片像素为960×160。以下的图片原图大小都是基于此像素的。(当然获取以下图片的原图的方法和上面说的一样:把_z改成_b

黄色男女(2012.5.28-2012.6.15)

黄色男女

紫色女孩(2012.6.16-2012.6.29)

紫色女孩

温情咖啡(2012.6.30-2012.10.22)

温情咖啡

小蜜蜂(2012.10.23-2012.12.31)

СÃÛ·ä

2013(2013.1.1)

2013

2012年1月1日星期日

静风博客顶部图片汇总

截止到2012年4月7日,静风博客使用的主题顶部图片的像素大小是936×130。不管多么漂亮的图片时间久了总会产生厌烦的情绪,Jasmine一直吵着要换个顶部图片来(她自己总是频繁地更换Windows桌面壁纸),所以在她的驱使下博客的顶部图片(header.jpg)时不时地会发生变化。下面就是这些图片的汇总陈列。

注意:以下显示的是图片的中型图,图片地址样式如:https://live.staticflickr.com/7156/6611896423_31ceae1e51_z.jpg,如果想得到原始大小的图片只需把以上地址后缀的_z改成_b即可,如:https://live.staticflickr.com/7156/6611896423_31ceae1e51_b.jpg,这就是936×130像素大小的图片了。

蝴蝶(2010.9.15-2011.9.31)

蝴蝶

铅笔(2011.10.1-2011.12.31)

铅笔

2012(2012.1.1-2012.2.18)

2012

江南水乡(2012.2.19-2012.5.27)

江南水乡

我们从使用iNove的第一天开始就替换掉了主题默认的顶部图片,同时修改了顶部图片的像素大小。2012年4月7日又对主题进行了一次修改,拉宽了侧边栏,这样顶部图片的像素长度随之变大,同时Jasmine一直抱怨由于宽度限制作图不方便,于是我们又往下拉长了宽度,所以现在的顶部图片像素为960×160。以下的图片原图大小都是基于此像素的。(当然获取以下图片的原图的方法和上面说的一样:把_z改成_b

黄色男女(2012.5.28-2012.6.15)

黄色男女

紫色女孩(2012.6.16-2012.6.29)

紫色女孩

温情咖啡(2012.6.30-2012.10.22)

温情咖啡

小蜜蜂(2012.10.23-2012.12.31)

СÃÛ·ä

2013(2013.1.1)

2013

2011年4月24日星期日

延迟加载图片的实现

随着文章中图片的增多,拖慢了页面载入速度,本人急需图片的延迟加载。网络上流行最广的是使用jQuery 插件Lazy Load,可参考Lazy Load, 延迟加载图片的 jQuery 插件

作者介绍丰富,可我还是不清楚该怎么用,也就是不知道该怎么在网站中实施。因为这个jQuery 插件(下载后的文件是jquery.lazyload.js)它只是个js文件并不是Wordpress原生的打包插件,不能通过后台直接上传添加。我连把这个js文件放到网站服务器中的哪里都不知道,请教高人方才知道:“随便你放到哪里,你在要调用的地方写对调用路径就可以了。也就是你想要在wordpress的什么地方调用这个插件了,在哪里调用就在哪里加入插件代码”。

本人使用的是inove模板,现在就介绍一下在inove中实现图片延迟加载的效果的方法。另外,因为是jQuery 插件,所以需要jQuery 库的支持,这里我们使用google托管的js库。

  1. 下载 jquery.lazyload.js(作者Lazy Load 原文介绍及最新版

  2. 放到主题的js文件夹中(public_html/wp-content/themes/inove/js)

  3. 主题的header.php中添加如下代码:(public_html/wp-content/themes/inove/)










在这里,<?php bloginfo('template_url'); ?>是主题模板的路径,另外我们需要在主题模板的img文件夹中添加一个占位图片(例如ajax-loader.gif),它的作用是,当页面上图片尚未载入时,就显示这张图片。

2010年8月4日星期三

Inove修改汇总

Wordpress搭建的博客建起来第一件事就是更改主题(Themes),总觉得老外欣赏美的眼光与国人不同,他们做出来的主题虽然也美丽大方,可感觉缺少东方人简约含蓄的味道来,换了不知多少主题后,终于选用了MG12的Inove主题。

在Inove主题上做了不少的修改,现总结如下。

404页面模板(404.php)

1、  去掉了咸湿佬图片的链接。

2、  添加了谷歌自定义404错误页面

主题支持函数 (functions.php)

Wordpress默认的标签云略显单调,为此实现了彩色标签云。参考wordpress免插件实现彩色标签云

Tags页面模板(tag-page.php)

实现了标签云页面,由于已经添加了彩色标签云函数,故而这里的标签云页面为彩色标签云页面。参考inove主题添加标签页

cse页面模板(cse.php)

实现页内的谷歌搜索,也就是对搜索结果提供内页处理, 搜索后不会转跳到 Google.com.参考整合 Google 自定义搜索 CSE美化iNove的Google自定义搜索

底部 (footer.php)

主要是修改了底部的CSS样式,添加了协议声明。

文章页面模板 (single.php)

主要在文章末尾添加版权申明以及少许广告片段。

样式表 (style.css)

大部分修改花在样式表上。

导航栏和侧边栏样式的修改侧边栏宽度的修改

延迟加载图片的实现鼠标悬浮显示评论添加站点统计功能 、顶部图片汇总