实现WordPress文章展开/收缩的效果
1、修改footer.php文件
加入到body之前
<script>jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});</script>
2、修改functions.php文件
加入到主题functions.php文件中
//展开收缩功能
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"><span class="xbtn02">展开/收缩</span></a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');
3、代码使用：
{collapse title=”标题”}需点击展开的内容{/collapse}
将上述代码中的{}分别替换为[]
补刀：CSS美化一下吧
/* 展开收缩*/.xControl {
background: #f6f6f6;
}
.xTitle {
color: #333;
}
.xbtn02{
color: #428bca;
text-decoration: underline;
}
在编辑文章的时候快速添加该按钮 :
//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'collapse', '展开/收缩按钮', '{collapse title="说明文字"}','{/collapse}' );// ]]>
</script><?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );
将上述代码中的{}分别替换为[]
将上述代码添加到主题functions.php文件中，然后在编辑文章的时候切换到文本模式，就可以看到该按钮.
按钮使用方法：先单击一次，然后输入你想要收缩的内容，再单击一次按钮，然后替换替换其中的说明文字。
WordPress
