纯代码为WordPress文章内容添加展开收缩功能美化版

由于该版本样式有些老旧了，文字咖特意写一篇目前来讲比较满意的展开收缩功能二次美化版，详细情况，请点击下面这篇文章：

最近博主还算是比较空闲，无聊的时候，静下来，折腾一下 DUX 主题，之前博主的博客就已经实现在文章里面实现部分内容收缩展开的功能，当然代码用的是蝈蝈要安静的，这里非常感谢蝈蝈要安静大佬，无私的把这些代码，免费的分享出来！

但是，博主总觉得这个样式不好看，并且在晚上搜了一圈，发现那些代码都是直接搬运的蝈蝈要安静的代码，一脸无奈的我，只能又一次开启自己的折腾之路。

代码很简单，主要还是仿照蝈蝈大神的代码，自己稍微改了下样式，所以在这里分享给大家！

1. 添加JS代码

这个代码直接用的蝈蝈大神的，博主没有修改，将以下代码添加到你主题 header.php 文件的 <body> 标签前面

// 添加文章页展开收缩JS效果
<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
			    function(){
                    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
                }
		    );
        }
    );
</script>

2. 添加代码至主题 functions.php 文件

这里的代码，博主稍微改动了一下，感觉比之前的更好看，并且更具人性化一些！

// 文章页添加展开收缩效果
function xcollapse($atts, $content = null){
	extract(shortcode_atts(array("title"=>""),$atts));
	return '<div style="margin: 0.5em 0;">
		    <div class="xControl">
			    <a href="javascript:void(0)" class="collapseButton xButton"><span class="xTitle">'.$title.'</span></a>
			    <div style="clear: both;"></div>
		    </div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
    <script type="text/javascript">
        if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'collapse', '展开/收缩按钮', '【collapse title="点击展开 查看更多"]','【/collapse]' );
        } 
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

注意：把上面代码的【都改成 [ ！
添加完以上代码，在后台点击文章编辑的文本菜单，便会出现一个展开/收缩按钮的一个快捷按钮！

3. 添加 css 样式

将下面的代码添加到 main.css 文件中，即可显示你想要的文章内容收缩展开样式了！

.xControl {
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0;
    background-color: #f5f5f5;
    border-bottom: 4px solid #d0d0d0;
    transition: all 0.3s linear;
    text-align: center;
    border-radius: 0 0 5% 5%;
}
.xControl a{
    text-decoration: none;
    display: block;
}

教程结束！

下载说明：

1、本站资源都是白菜价出售，同样的东西，我们不卖几百，也不卖几十，甚至才卖几块钱，一个永久会员能下载全站100%源码了，所以单独购买也好，会员也好均不提供相关技术服务。

2、如果源码下载地址失效请/联系站长QQ进行补发。

3、本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4、本站站内提供的所有可下载资源（软件等等）本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发）；但本网站不能保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug；同时本站用户必须明白，【源码源码ui网】对提供下载的软件等不拥有任何权利（本站原创和特约原创作者除外），其版权归该资源的合法拥有者所有。

5、请您认真阅读上述内容，购买即以为着您同意上述内容。

EB站 » 纯代码为WordPress文章内容添加展开收缩功能美化版