wordpress增加展开查看全文功能，长文章可折叠/展开

有时候文章比较长，用户体验就不是太好，这时候可以选择折叠长文章，用户确实需要看余下的内容，点击一下就能展开全文。那么在wordpress上怎么实现这个功能呢？

1、首先我们引入JS

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

可以专门写一个JS然后引用，也可以直接加入到你主题模板的主JS文件中。

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、添加CSS样式美化一下

.xControl {
padding-left: 32px;
}

现在就可以使用了，使用的时候，调用使用如下代码

  [collapse title="标题"]需点击展开的内容[/collapse]

不过之前百度发了一个禁止页面主体内容折叠的要求，大致意思就是在首页第一屏必须是要全部显示文章内容，不能有折叠。所以我们在使用折叠代码的时候，一定要保证在一屏内容以后再加入，不然对SEO不太好。

总而言之，可以用折叠，但不能用在第一屏，第一屏以后可以用。

具体规定：

百度APP内，通过搜索分发的页面（智能小程序、H5页面），各级页面主体内容在展示完全之前不允许折叠。请广大资源方尽快自查整站，优化整改站点内涉及的相关内容，达到百家号式的浏览体验。

自《百度移动搜索落地页体验白皮书5.0》上线以来，针对“展开全文”的设置进行了详细的说明规范，但仍然接到了用户的大量投诉。百度搜索一直致力于让用户快速便捷的从搜索中获取所需内容，减少用户浏览信息的操作成本，保障用户的浏览体验。

相关推荐