php标题内容折叠显示,WordPress实现内容折叠笔记

在WordPress文章中，有的内容不希望在第一层次显示出来，而让有兴趣的读者通过点击来显示。同时，超链接的方式响应太慢，且层次性体现得不好。我所想要的就是如下效果：

[dee title=”内容A”]

A的细节

[/dee]

[dee title=”内容B” class=”cgrey”]

B已经过时了

[/dee]

[dee title=”内容C”]

C的细节

[/dee]

参考网上的文章之后，找到一种实现方法。首先，安装WP jQuery CDN插件并启用。然后，在当前使用的WordPress主题目录下新建my_jQuery.js并加入以下内容，处理展开与折叠：

jQuery(document).ready(function($){

$('.collapseButton').click(function(){

$(this).parent().parent().find('.xContent').removeClass("xContent");

$('.xContent').slideUp('slow');

$(this).parent().parent().find('div:last').addClass("xContent");

$(this).parent().parent().find('.xContent').slideToggle('slow');

});

});

jQuery(document).ready(function($){

$('.collapseButton').click(function(){

$(this).parent().parent().find('.xContent').removeClass("xContent");

$('.xContent').slideUp('slow');

$(this).parent().parent().find('div:last').addClass("xContent");

$(this).parent().parent().find('.xContent').slideToggle('slow');

});

});

并在header.php中加入以下内容，加载以上javascript：

接着，在functions.php中加入：

function xcollapse($atts, $content=null){

extract(shortcode_atts(array("title"=>""),$atts));

return '

'.$title.' detail

'.$content.'

';

}

add_shortcode('dee','xcollapse');

function xcollapse($atts, $content=null){

extract(shortcode_atts(array("title"=>""),$atts));

return '

'.$title.' detail

'.$content.'

';

}

add_shortcode('dee','xcollapse');

现在，就可以在文章中通过如下代码来获取内容折叠展开的效果：

[dee title="内容A"]

A的细节

[/dee]

[dee title="内容A"]

A的细节

[/dee]

在主题样式表style.css中可以定义xControl、xButton、xTitle类的样式，来达到自己想要的显示效果。比如我的定义：

.xControl .xButton {

font-size: 0.8em;

font-style: italic;

color: #8470FF;

}

.xControl .xButton {

font-size: 0.8em;

font-style: italic;

color: #8470FF;

}

我并没有定义xTitle类的样式，因为无论怎么定义，以上方式都只能显示特定的一种title的样式。所谓xTitle，装饰的是上面例子中“内容A”字样。想要不同的title的样式，可以重写在functions.php中加入的函数：

function xcollapse($atts, $content=null){

extract(shortcode_atts(array("title"=>"","class"=>""),$atts));

return '

'.$title.' detail

'.$content.'

';

}

add_shortcode('dee','xcollapse');

function xcollapse($atts, $content=null){

extract(shortcode_atts(array("title"=>"","class"=>""),$atts));

return '

'.$title.' detail

'.$content.'

';

}

add_shortcode('dee','xcollapse');

现在，在文章中可以使用如下代码传入可选的第2个参数，这个参数传入一个类名，来装饰title。

[dee title="内容B" class="cgrey"]

B已经过时了

[/dee]

[dee title="内容B" class="cgrey"]

B已经过时了

[/dee]

当然，在style.css中加入对应的类，就可以随意控制title的样式：

.cgrey {

color: #D3D3D3;

}

.cgrey {

color: #D3D3D3;

}