为WordPress添加展开全文功能

心如碧海宽有容乃大
身如荷莲洁淤泥不染

因MAC软件下载站的页面需要同时提供软件简介、软件截图、软件下载等内容，势必会大幅增加页面高度。大概看了一下软件站的几个页面，以每张图片800PX的高度来说，8张截图大概就能达到10几屏的高度。如果用鼠标滚轮往下滑动大概要滑动5秒的时间才能正确的找到下载软件的正确位置。可想而知，这对于需要下载软件的用户体验是极其不友好的，太浪费时间不说，很有可能用户根本不需要看截图或者简介。

很长一段时间发现CSDN上的技术文章都是只显示一部分，想全部把文章内容显示出来的话需要用户自己点击一下“展开阅读全文”的按钮。这几天闲暇的时间想了一下关于这个功能的优缺点，一句话，毕竟用户体验高于一切，感觉还是可行的。演示？这就是啦！

找了一下相关资料，当然也顺便看了CSDN这部分的源码。整理代码如下，有喜欢的朋友可以直接拿去使用。CSS部分就不发出来了，自己抄一下举一反三即可。

1、PHP部分，将下面的代码复制到funcions.php

//内容展开功能
function xcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div class="hide-box-content">'.$content.'</div><div class="hide-content-box hide-content-pos">

    <div class="hide-box-control">
            <a href="javascript:void(0)" class="hide-box-collapse btn btn-red-line" title="'.$title.'">展开全文<i class="iconfont icon-arrow-crude"></i></a>
    </div>
    </div>';
}
add_shortcode('collapse', 'xcollapse');

function appthemes_add_collapse() {
?>
<script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'collapse', '内容收缩按钮', '[collapseX title="说明文字"]','[/collapseX]' );//因本站已经开始使用，直接贴出短代码会直接启用展开全文的功能，所以加了X绕过编译，复制后请把大写的X去掉
    }
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

2、JS部分，将以下代码复制到你的js文件，依赖于jq

//内容展开功能
$('.hide-box-collapse').click(
	function(){
	$(this).parent().parent().prev('.hide-box-content').slideToggle('slow');
	$(this).parent().parent().slideToggle('slow');
	}
);

展开全文