php 展开收缩,WordPress文章页添加展开/收缩功能

效果：



效果预览

功能代码：

1、js



加入到 body 之前

function(jQuery){

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

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

});

});

2、functions.php



加入到主题 functions.php 文件中

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

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

return '

'.$title.'

展开/收缩

'.$content.'

';

}

add_shortcode('collapse', 'xcollapse');

3、代码使用：

{collapse title="标题"}需点击展开的内容{/collapse}

将上述代码中的{}分别替换为[]

补刀：css 美化一下吧

.xControl {

padding-left: 32px;

}

2015-11-8 日更新：如何在编辑文章的时候快速添加该按钮呢？陌小雨博客(www.dedewp.com)给大家分享下面的好办法：

//添加展开/收缩快捷标签按钮

function appthemes_add_collapse() {if (wp_script_is('quicktags')){

?><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

将上述代码中的{}分别替换为[]

将上述代码添加到主题 functions.php 文件中，然后在编辑文章的时候切换到文本模式，就可以看到该按钮啦，是不是很编辑呢？

按钮使用方法：先单击一次，然后输入你想要收缩的内容，再单击一次按钮，然后替换替换其中的说明文字，什么是说明文字呢，就比如本文上面的加入到 body 之前和加入到主题 functions.php 文件中。