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

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

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

1、首先我们引入JS

→ 点此获取正规游戏试玩赚钱软件~

[code]

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

[/code]

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

2、在主题文件夹Functions.php中添加如下代码:

[code]

//展开收缩功能
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');

[/code]

3、添加CSS样式美化一下

[code]

.xControl {
padding-left: 32px;
}

[/code]

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

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

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

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

具体规定:

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

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

游乐星球 点此下载

相关推荐