wordpress,  工具,  技术

wordpress折叠效果

在wordpress使用过程中,经常会用到折叠的效果,比如书籍目录之类,如:

实现方法如下

步骤1: 利用自定义html小工具,将工具加入页首,页脚等公共模块,模块配置代码如下:

<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
                function(){
                    jQuery('.x325aFoldingContent').slideToggle('slow');
                }
            );
        }
    );
</script>
<!--此处代码仅为记录,因每次更新主题,都会将下一步修改的functions.php覆盖
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
    return '<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a> 
        <div class="x325aFoldingContent" style="display: none;">'.$content.'</div>';
}
add_shortcode('collapse', 'xcollapse');
-->

步骤2: 在打开主题编辑器,在functions.php中增加以下代码:

function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
    return '<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a> 
        <div class="x325aFoldingContent" style="display: none;">'.$content.'</div>';
}
add_shortcode('collapse', 'xcollapse');

ps: 小工具中的代码也可放在主题编辑器中的header.php中head标签内,但要注意,同functions.php一样,更新主题后,会被覆盖,需要重新编辑,但如若利用小工具的方法,主题更新则不会对其造成影响


精品课程


guest

1 评论
最新
最旧 最多投票
内联反馈
查看所有评论

[…] wordpress折叠效果 […]