Home > WordPress > 修改inove主题

修改inove主题

December 6th, 2008 yinheli
Skip to Comments

Mg12的主题的强大没话说.但是我们总是喜欢对主题做些个性化的修改.我的修改可以说全部是从xiaorsz那里偷来的.哈哈.当然在修改的同时也经过了很多次的调试.有时候出现了冲突.然后又调试.反反复复.经过了好久.inove主题也几经更新.好了.废话不多说.我总结一下修改.更多详细方法我会链接到xiaorsz的博客上.
实现ajax留言效果.
是通过jQuery来实现的.这里几乎没有遇到什么问题.详细修改方法: 使用jQuery实现wordpress的Ajax留言
Ctrl+Entert提交留言
这个很简单.几行js就实现了.详细查看
滑动效果隐藏留言者信息
详细查看
如果你觉得代码有点罗嗦了,注意查看评论.名为’等待’的留言者给出了很简单的实现方法.但是有一定的问题.需要修正.
我的实现代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

if(jQuery('input#author[value]').length>0){
jQuery("#author_info").css('display','none');
var change='<span  id="show_author_info" style="cursor: pointer; color:#3B5998;">change &raquo;</span>';
var close='<span  id="hide_author_info" style="cursor: pointer;color:#3B5998;">close &raquo;</span>';
jQuery('#welcome').append(change);
jQuery('#welcome').append(close);
jQuery('#hide_author_info').css('display','none');
jQuery('#show_author_info').click(function() {
jQuery('#author_info').slideDown('slow')
jQuery('#show_author_info').css('display','none');
jQuery('#hide_author_info').css('display','inline');
jQuery('#hide_author_info').click(function() {
jQuery('#author_info').slideUp('slow')
jQuery('#hide_author_info').css('display','none');
jQuery('#show_author_info').css('display','inline'); })})}

对于comment.php的修改和xiaorsz文章描述一样.
外部链接识别并在新窗口打开
猛点这里查看.这个照着做没有什么问题.
Rss弹出动画
新版的inove Mg12增加了一个很好玩的特效.鼠标悬浮是让rss订阅图标渐渐弹出.我觉得这个功能非常酷.这也是我升级这个主题的主要原因之一.原版的是用js来实现的.代码很长.比较多.我换成了用jQuery来实现这种效果.代码是:

jQuery ('#subscribe').hover(function(){jQuery('#feed_readers').fadeIn("slow");},function(){jQuery('#feed_readers').fadeOut('slow');});

关于fadeIn, fadeout是出现时的效果.in和out很容易理解吧.具体的还有其他的效果.很好玩.大家可以Google一下.为什么我的有透明的效果?(这个在IE下无法看到)因为我在css里加了透明的代码了当然改用这种方式来实现弹出了需要对css进行一些修改.我的代码.大家参考一下,其中position:absolute;这一句很重要,它让ul浮出来.

1
2
3
4
5
6
7
8
9
10
11
12
13

#subscribe ul {
	display:none;
	filter:alpha(opacity=70);opacity:0.70;
	background:#F4F5F7;
	border:1px solid #B7B7B7;
	width:180px;
	padding:5px;
	position:absolute;
	margin:32px 0 0 -45px;
}
#subscribe ul:hover{
	filter:alpha(opacity=90);opacity:0.90;
	}.

另外一个比较酷的地方是实现页面链接的平滑移动
同样也是通过jQuery来实现的.这个xiaorsz还没有写出相应的教程.但是他有篇叫”分享JS代码同一页面链接平滑跳转”
文章讲到了用一个js文件来实现.我尝试了一下.但是有些地方实现实在让人不满意.甚至无法实现.xiaorsz本人也没有用这个方法,而是用jQuery.我的就是从他那里偷来的.哈.分享一下.代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

//创建平滑移动函数
jQuery.getPos = function (e)
{
 var l = 0;
 var t = 0;
 var w = jQuery.intval(jQuery.css(e,'width'));
 var h = jQuery.intval(jQuery.css(e,'height'));
 var wb = e.offsetWidth;
 var hb = e.offsetHeight;
 while (e.offsetParent){
 l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
 t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
 e = e.offsetParent;
 }
 l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
 t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
 return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
};
jQuery.getClient = function(e)
{
 if (e) {
 w = e.clientWidth;
 h = e.clientHeight;
 } else {
 w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
 h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
 }
 return {w:w,h:h};
};
jQuery.getScroll = function (e)
{
 if (e) {
 t = e.scrollTop;
 l = e.scrollLeft;
 w = e.scrollWidth;
 h = e.scrollHeight;
 } else {
 if (document.documentElement && document.documentElement.scrollTop) {
 t = document.documentElement.scrollTop;
 l = document.documentElement.scrollLeft;
 w = document.documentElement.scrollWidth;
 h = document.documentElement.scrollHeight;
 } else if (document.body) {
 t = document.body.scrollTop;
 l = document.body.scrollLeft;
 w = document.body.scrollWidth;
 h = document.body.scrollHeight;
 }
 }
 return { t: t, l: l, w: w, h: h };
};
jQuery.intval = function (v)
{
 v = parseInt(v);
 return isNaN(v) ? 0 : v;
};
jQuery.fn.ScrollTo = function(s) {
 o = jQuery.speed(s);
 return this.each(function(){
 new jQuery.fx.ScrollTo(this, o);
 });
};
jQuery.fx.ScrollTo = function (e, o)
{
 var z = this;
 z.o = o;
 z.e = e;
 z.p = jQuery.getPos(e);
 z.s = jQuery.getScroll();
 z.clear = function(){clearInterval(z.timer);z.timer=null};
 z.t=(new Date).getTime();
 z.step = function(){
 var t = (new Date).getTime();
 var p = (t - z.t) / z.o.duration;
 if (t >= z.o.duration+z.t) {
 z.clear();
 setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
 } else {
 st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
 sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
 z.scroll(st, sl);
 }
 };
 z.scroll = function (t, l){window.scrollTo(l, t)};
 z.timer=setInterval(function(){z.step();},13);
};
//调用那个平滑移动函数
jQuery(document).ready(function(){
jQuery('#gotop').click(function(){jQuery('#wrap').ScrollTo(1000);return false;});
jQuery('.addcomment').click(function(){jQuery('#respond').ScrollTo(1000);return false;});
jQuery('.comments').click(function(){jQuery('#comments').ScrollTo(500);return false;});
});

解释:
#gotop我替换了主题里用的util里的gotop函数.因此要用到这句话就需要修改footer.php的gotop链接.
jQuery(‘.addcomment’)中用到的.addcomment是指class(类)这里设置了属于这个类的移动方法.那句话的意思可以介绍为名(类)为.addcomment的链接.平滑移动到ID号为respond的地方.所用用时间设定为1000毫秒这个操作不返回值(return false).
今天,我又加了新东西
就是插入表情旁边的”B”按钮.通过这个可以为评论框添加简单的编辑器并实现平滑隐藏和出现的效果.和主题修改风格保持一致.对于这个的实现.看xiaorsz的文章

下面讲讲要注意的地方.
对于按钮类的css控制由于IE的bug我们一般需要加一句话overflow:visible;对于这个我曾经写了篇文章(评论按钮被拉伸Bug)详细说明过.这当然对于其他涉及按钮的都适用.
对于平滑移动的实现.reply和quote等链接.需要改functions.php的相应地方添加addcomment这个class 即class=”addcomment”.做好这个后还需要该comment.js这个文件.将所有的field.focus();删除好像有5个.为什么要删掉? field.focus();是用来定位到留言框的.前面我们已经用了平滑移动.如果还继续使用这个函数的话就会失去平滑移动的效果而直接跳转到留言框.
另外我还对comment.js的replace部分经行了修改.在其前面增加了个判断浏览器的if.以使replace的这支表达式分别使用不同的浏览器.是输出显示显示在各个浏览器一样.当然这主要是针对Opera浏览器而言的.貌似这个浏览器对于replace中使用的正则表达式理解不一样.老是多出几个回车.改用/\t|\r\n/g后firefox又显示不正常了.所以我的代码如下:

1
2
3
4
5
6
7

function reply(authorId, commentId, commentBox) {
	var author = MGJS.$(authorId).innerHTML;
	if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
	var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\n/g, "") +' ' +'</a> \n';
	}else var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\r\n/g, "") +' ' +'</a> \n';
	appendReply(insertStr, commentBox);
}

针对quote函数部分.做类似的修改.
好了.佩服一下自己写了这么多.哈.还有些细节问题.再做补充了.欢迎大家讨论.

声明:本站遵循署名-非商业性使用-相同方式共享3.0共享协议. 转载请注明转自 PhilNa ™

WordPress , ,
«
»
Comments ( 27 )
Feed for this Entry Trackback Leave a comment
  1. Fantasy Jun 8th, 2010 @ 11:27 | #26
    Reply Quote

    看来，我的代码要修改了~~~

  2. knife Jul 15th, 2010 @ 17:30 | #27
    Reply Quote

    非常牛叉

Submitting Comment, Give me a second...
Comment pages 1 2

Leave a comment

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 1 )
Toggle the list
  1. Dec 14th, 2008 @ 00:02 | #1
    Pingback: 再次修改inove的comment.js