前言

我越来越沉迷折叠这个功能了。

但是wp的各种成品插件过于臃肿,不适合我的需求,所以仿着nga的折叠标签自己写了一个。需要用到 jquery。

 

如何安装

位置在主题的function.php,插入到最底下就行了。

/* add by OCEANUS */
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<hr>
<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>
<hr>
</div>';
}
add_shortcode('collapse', 'xcollapse');

位置在footer.php,插入到最下面</body>之前就行了。

/* add by OCEANUS */
<script>jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('fast');
});
});</script>

如果懒得打collapse这个单词,可以直接用编辑器插入(仅在文本模式下生效)

同样是function.php中插入:
/* add by OCEANUS*/
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' );

注意上面的'[//collapse]’,实际上只有一个反斜线,复制的时候记得自己改过去。我这里为什么这么写你懂的。

 

如何使用

很简单,格式是【collapse title=“标题”】折叠的内容【/collapse】,把【】替换成 [] 即可。

 

 

显示不正确?

上下两条水平线是我自己加的,你若是不喜欢可以去function里面删掉那两个 “hr”。但是这两个水平线理论上应该与标题文本贴的很近,如果你看到的特别远,有可能是你的css有问题。

我给你看了我这个主题的css是如何定义的hr水平线,就离谱!40px的上下间距!

直接去style.css里覆盖修改成4px就好看很多了。

改完记得ctr+F5强制刷新css缓存,不然看不出来区别。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源
在线客服
在线客服
旺旺客服