鉴于文章过长或者其中有不太重要可选择阅读的内容,很多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】
实际使用时,注意“【】”替换为“[]”,总之还是挺方便的。
评论0