原文：
WordPress文章页添加展开/收缩功能
https://dedewp.com/2262.html by.陌小雨
需求：
之前在做窝窝屎殉爆榜的用户消失记录时，因为每周都有几十位用户消失，几周后页面过长，不方便用户查看，因此考虑将每一周详细的用户消失记录先折叠隐藏起来，需要查看时再手动展开查看。善用搜索引擎后， 找到上述文章进行学习，实现了该功能，特此记录。
步骤：
1 在主题文件夹目录内的footer.php文件内</body>标签前添加如下代码
|
1 2 3 4 5 6 |
<script>jQuery(document).ready( function(jQuery){ jQuery('.collapseButton').click(function(){ jQuery(this).parent().parent().find('.xContent').slideToggle('slow'); }); });</script> |
2 在主题文件夹目录内的functions.php文件末尾添加如下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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">展开/收缩</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;">'.$content.'</div> </div>'; } add_shortcode('collapse', 'xcollapse'); |
3 在文章需要折叠的地方添加如下代码
|
1 |
[collapse title="标题"]需点击展开的内容[/collapse] |
效果：
[collapse title=”标题”]需点击展开的内容[/collapse]
编辑文章时快速添加折叠块：
在主题文件夹目录内的functions.php文件末尾添加如下代码
|
1 2 3 4 5 |
//添加展开/收缩快捷标签按钮 function appthemes_add_collapse() {if (wp_script_is('quicktags')){ ?><script type="text/javascript">// <![CDATA[ QTags.addButton( 'collapse', '展开/收缩按钮', '[collapse title="说明文字"]','[/collapse]' ); // ]]></script><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' ); |
即可在编辑文章的文本界面看到展开/收缩按钮。
1 条评论
坚果呀 · 2020年3月18日 下午2:44
twenty sixteen的主题