改变wordpress评论列表嵌套样式
wordpress对于php的开发者来说相信并不陌⽣,它的最⼤优势是开源且全世界有⾮常庞⼤的开发者和追求者。
本⼈也是⼀个wordpress的开发者,也开发过主题,但仅仅限制⾃⼰⽤。
这篇⽂章是要介绍⼀下wordpress的评论嵌套。
相信开发过主题的⼈都知道这个功能,⾮常好⽤的⼀个功能,但是不知道朋友们发现没有,在嵌套评论多了的时候,会不会就显得不是那么好看了。
那么我们今天就来⽤jquery来改造⼀下嵌套的代码结构。
提前说⼀下,wordpress嵌套评论的代码格式是这样的,如果你的不是这样的格式,可以做⼀些修改,或者是直接修改我的jquery代码。
1<ul class="comment-list">
2<li class ="comment">
3<div class=".....">这⾥⾯是⼀些⽤户信息、评论信息和相关功能,就不写了</div>
4<ul class="children">
5<li class ="comment">
6<div class=".....">这⾥⾯是⼀些⽤户信息、评论信息和相关功能,就不写了</div>
7<ul class="children">
8<li class ="comment">
9<div class=".....">这⾥⾯是⼀些⽤户信息、评论信息和相关功能,就不写了</div>
10</li>
11</ul>
12</li>
13</ul>
14</li>
15</ul>
这是⼀个三层嵌套的样式,接下来的代码就要对这个样式进⾏重新构造了。
1var comment = $('ment-list').children('ment');
2 comment.children('ul').each(function(){
3var self = $(this);
4if ($(this).children('li').length == 1) {
5var li = $(this).find('.children>li').clone();
6 $(this).append(li);
7 }else if($(this).children('li').length > 1) {
wordpress主题怎么安装8 $(this).children('li').each(function(index){
9 index = index + 1;
10var div = $('<ul>', {class: 'anchie_' + index});
11var li_2 = $(this).find('.children>li').clone();
12var li_1 = $(this).clone();
13 self.append(div);
14 div.append(li_1);
15 div.append(li_2);
16 $(this).remove();
17 })
18 }
19 $(this).find('.children').remove();
20 })
把以上代码复制到你主题的js⽂件中,然后在查看⼀下你的代码结构,是不是发⽣变化了。
css样式我这边就不弄了,这个完全看⾃⼰的爱好。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论