纯代码为 WordPress Modown 主题添加文章内容折叠隐藏，点击按钮展开阅读的功能[PHP]

鉴于文章过长或者其中有不太重要可选择阅读的内容，很多WordPress网站会添加收缩折叠文章，通过点击后展开，查看更多内容的功能。折叠部分内容可以是文字也可以是图片等等，效果如下：

想要实现该效果，需要用到三部分代码：

1、php功能代码；  2、js代码；  3、css样式代码；

PHP代码

一般是放到functions.php文件中，也可以自己编辑个小插件，然后可以把自定义增加的功能代码全放到自建小插件中。这样，也可以避免直接修改主题文件可能导致的问题。

内容已被隐藏

微信扫码或搜索关注“小白书签”发送“代码”获得提取码，然后返回此网页提交

提交

JS代码

一般是添加到网站js文件中，或者自建js文件后引用。目前大部分WordPress国产主题，比如Modown主题的设置中，可以直接添加js代码，简单方便。

<script>
jQuery(document).ready(function(jQuery) {
jQuery('.collapseButton').click(function() {
var button = jQuery(this).find('span');
var content = jQuery(this).parent().find('.xContent');
if (content.css('display') === 'none') {
button.text(button.data('collapse'));
} else {
button.text(button.data('expand'));
}
content.slideToggle('slow');
});
});
</script>

CSS代码

同js代码一样，Modown主题也支持在设置（样式 -自定义CSS样式）中添加。

内容已被隐藏

微信扫码或搜索关注“小白书签”发送“代码”获得提取码，然后返回此网页提交

提交

如何使用

上述代码全部添加以后，我们应该如何在文章中使用呢？其实也很简单，通过短代码就可以快速添加需要折叠隐藏的内容。

【collapse title="按钮显示的文字"]需要隐藏的内容[/collapse】

如果不需要自定义按钮文字，也可以直接使用下方的短代码，

【collapse]需要隐藏的内容[/collapse】

实际使用时，注意“【】”替换为“[]”，总之还是挺方便的。