摘要：站长在发布一些教程或是内容资料是会遇到内容过长过多需要显示的内容，我们可以通过点击展开收缩的功能来让用户主动选择是否打开...
站长在发布一些教程或是内容资料是会遇到内容过长过多需要显示的内容，我们可以通过点击展开收缩的功能来让用户主动选择是否打开所有的内容，这样一来，一方面可以优化wordpress主题内容页面的加载速度，另一方面可以有效提升用户体验。那其实完成这个功能很简单，今天大挖教大家用短代码完成内容展开收缩内容的功能。
内容短码样式展示预览
[collapse title=”“点击展开”预览”]嗯哌，传递价值资讯;SocialMedia运营解决方案。[/collapse]
一、将以下代码加入至wordpress主题文章内容页面的底部，通常为single.php
|
1 2 3 4 5 6 7 8 9 10 |
<script> /* 为wordpress主题添加“内容展开/收缩”功能开始 */ jQuery(document).ready( function(jQuery){ jQuery('.collapseButton').click(function(){ jQuery(this).parent().parent().find('.xContent').slideToggle('slow'); }); }); /* 为wordpress主题添加“内容展开/收缩”功能开始 */ </script> |
二丶将下方代码添加到“模板函数 (functions.php)”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* 为WordPress添加“点击展开/收缩”功能开始 */ function xcollapse($atts, $content = null){ extract(shortcode_atts(array("title"=>""),$atts)); return '<div style="margin: 0.5em 0;"> <div class="xControl"> <span class="xTitle">'.$title.'</span> <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;">'.$content.'</div> </div>'; } add_shortcode('collapse', 'xcollapse'); /* 为WordPress添加“点击展开/收缩”功能结束 */ |
三丶进行到我们的写文章页面，切换点文本模式点击“展开/收缩”
[collapse title=”“点击展开”预览”]嗯哌，传递价值资讯;SocialMedia运营解决方案。[/collapse]
