WordPress文章页面添加展开收缩功能（提高相关内容互动率）

最近老蒋在看到有些人的博客内容有看到内容中有相关的文章是通过展开和搜索隐藏起来的，但是确实可以提高站内内容的相关联互动。这个是如何实现的呢？这里简单的整理方法，后面试试看。

1、功能部分

    //功能部分
    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');  

添加到当前主题功能代码里。

2、JS部分

    <script type="text/javascript">  
        jQuery(document).ready(function(jQuery) {  
            jQuery('.collapseButton').click(function() {  
                jQuery(this).parent().parent().find('.xContent').slideToggle('slow');  
            });  
        });  
    </script>  

展开和搜索需要用到JS。

3、调用方法

[collapse title=“展开”]内容部分[/collapse]

这里根据需要的位置调用包含起来。我们也可以用短代码添加到编辑器中。

本文出处：老蒋部落 » WordPress文章页面添加展开收缩功能（提高相关内容互动率） | 欢迎分享（ 公众号：老蒋朋友圈 ）