原文:
WordPress文章页添加展开/收缩功能
https://dedewp.com/2262.html by.陌小雨
需求:
之前在做窝窝屎殉爆榜的用户消失记录时,因为每周都有几十位用户消失,几周后页面过长,不方便用户查看,因此考虑将每一周详细的用户消失记录先折叠隐藏起来,需要查看时再手动展开查看。善用搜索引擎后, 找到上述文章进行学习,实现了该功能,特此记录。
步骤:
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文件末尾添加如下代码
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 在文章需要折叠的地方添加如下代码
[collapse title="标题"]需点击展开的内容[/collapse]
效果:
[collapse title=”标题”]需点击展开的内容[/collapse]
编辑文章时快速添加折叠块:
在主题文件夹目录内的functions.php文件末尾添加如下代码
//添加展开/收缩快捷标签按钮 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' );
即可在编辑文章的文本界面看到展开/收缩按钮。
0 条评论