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]

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！