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

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

<script type="text/javascript" src="/wp-content/themes/xx/my_jQuery.js"></script>

接着，在functions.php中加入：

function xcollapse($atts, $content=null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div style="margin:0.5em 0;width:98%"><div class="xControl"><span class="xTitle">'.$title.'</span><a href="javascript:void(0)" class="collapseButton xButton">detail</a><div style="clear:both"></div></div><div class="xContent" style="display:none">'.$content.'</div></div>';
}
add_shortcode('dee','xcollapse');

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

[dee title="内容A"]
<p>
A的细节
</p>
[/dee]

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

.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 '<div style="margin:0.5em 0;width:98%"><div class="xControl"><span class="xTitle"><span class="'.$class.'">'.$title.'</span></span><a href="javascript:void(0)" class="collapseButton xButton">detail</a><div style="clear:both"></div></div><div class="xContent" style="display:none">'.$content.'</div></div>';
}
add_shortcode('dee','xcollapse');

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

[dee title="内容B" class="cgrey"]
<p>
B已经过时了
</p>
[/dee]

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

1
2
3

.cgrey {
        color:      #D3D3D3;
}

WordPress实现内容折叠笔记

《WordPress实现内容折叠笔记》有2个想法

发表评论取消回复

WordPress实现内容折叠笔记

《WordPress实现内容折叠笔记》有2个想法

发表评论 取消回复

发表评论取消回复