有时候文章比较长,用户体验就不是太好,这时候可以选择折叠长文章,用户确实需要看余下的内容,点击一下就能展开全文。那么在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》上线以来,针对“展开全文”的设置进行了详细的说明规范,但仍然接到了用户的大量投诉。百度搜索一直致力于让用户快速便捷的从搜索中获取所需内容,减少用户浏览信息的操作成本,保障用户的浏览体验。
