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

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

游乐星球 点此下载

相关推荐

WordPress去掉网址后缀index.php

最近网站降权的厉害,可以说一撸到底,不过也让我发现了个问题,那就是明明设置了伪静态,竟然还是收录了带index.php的页面,真的有点奇怪啊。 不过我们可以通过一些设置来避免这个。 Apache(一般配置文件是.ht ...

wordpress纯代码添加一个下载按钮 简单快捷

想给其他站添加一个下载按钮,按照一些教程搞好以后,出错了,估计是代码有问题。 于是571分享家找了朋友给我写了一个纯代码的,想在文章插入下载按钮的话,直接代码复制上去就好了,恰好那个站用的不多,这样的 ...