【wordpress】文章添加展开折叠隐藏功能

• 需求场景：

  自从着手整理只是文档后，发现整理一个知识小组合，文章篇幅实在太长了，如果分页的话，来回翻页又不是很方便，毕竟咱们不是看小说；于是博主就想，在文章里，能不能手动指定一些内容给隐藏起来，并添加展开按钮，这样文章更加整洁有条理，并且一定程度上减少篇幅哦；

就像这样 【显示↓/↑隐藏】

• 具体步骤：

  事实上博主也有参考文档：WordPress文章页添加展开/收缩功能

接下来看一下博主实际操作过程：

①、首先，如参考添加了此功能的js代码到自己主题文件中，这里博主只在打开文章时使用，所以加到single.php文件中；

!--文章折叠隐藏--!
<script>jQuery(document).ready(
 function(jQuery){
 jQuery('.collapsesButton').click(function(){
 jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
 });
});</script>

②、然后就是添加如下代码变量样式到自己主题的function.php文件中；

/*--文章添加折叠功能应添加按钮--*/
function xcollapses($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="collapsesButton xButton">【显示↓
/↑隐藏】</a>
 <div style="clear: both;"></div>
 </div>
 <div class="xContent" style="display: none;">'.$content.'</div>
 </div>';
}
add_shortcode('collapses', 'xcollapses');

[collapses title=”标题”]需点击展开的内容[/collapses]

但是为了使用更友好，我们都喜欢在编辑器中添加工具按钮：

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'collapses', '展开/收缩按钮', '[collapses title="说明文字"]','[/collapses]' );
// ]]></script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

当然有主意的朋友会看到上面div调用的class：xControl:是用来自定义其属性的；

美化一下吧！添加如下样式到个人主题的style.css文件中：

.xControl {
padding-left: 32px;
}

function appthemes_add_collapse() {
?><script type="text/javascript">if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'collapses', '展开/收缩按钮', '[collapses title="说明文字"]','[/collapses]' );
}</script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

（哈哈，就这么多了，不明白记得留言哦！）

Edit@bigmouth【原创博文】®【经验汇总】