这个代码直接用的 蝈蝈 大神的，博主没有修改，将以下代码添加到你主题 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>
这里的代码，博主稍微改动了一下，感觉比之前的更好看，并且更具人性化一些
// 文章页添加展开收缩效果
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' );
注意：把上面代码的【 都改成 [ ！
添加完以上代码，在后台点击文章编辑的 文本 菜单，便会出现一个 展开/收缩按钮 的一个快捷按钮
添加 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;
}
签名：这个人很懒，什么也没有留下！
