怎么添加一个隐藏收缩文章,展开全文的按钮

站长每天边学习边分享~

美化版代码如下:

1.下方代码添加到 body 前

<!--为wordpress主题添加“内容展开/收缩”功能开始-->
<script>
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
</script>

2.找到主题的 functions.php文件 把代码放进去

/* 为WordPress添加“点击展开文章”功能开始 */
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></div></div></div>
<a href="javascript:void(0)" class="collapseButton xButton">点击展开文章 <i class="fa fa-angle-double-down"></i></a>

<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');

3.CSS美化代码

/* 文章展开文章按钮美化 */ 
.xControl {
  width:120px;height:25px;
  border-radius:20px;
  border:0px #ff6600 solid;
  background-color:#FFD637;  
  margin: 0 auto; text-align: center
}

4.怎么使用?

每次编辑文章的时候,添加下方代码:{}改成[]

{collapse title="文章收缩文字提示开始"}这里是隐藏的内容{/collapse}

效果:

相关文章

版权声明: 本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件联系站长,一经查实,本站将立刻删除。 不知名站长 发表于 2021年11月27日 上午1:10。
转载请注明:怎么添加一个隐藏收缩文章,展开全文的按钮 | 不知名站长网