WordPress添加“点击展开/收缩内容”功能

WordPress添加“点击展开/收缩内容”功能,此功能能够很好解决扩展资料过长的问题,点击按钮后才展开内容,不会影响排版。

  • 将下面的JS加入functions.js 内,也可以加入其他JS文件内,只要能保证此段代码能够被引入就行:
/*为网站添加“点击展开/收缩”功能*/
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
  • 将下面的代码加入 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> 
<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');
  • 使用时可以直接在文章中插入 [collapse title="标题"]此处填写内容[/collapse] 即可实现此功能。
《WordPress添加“点击展开/收缩内容”功能》版权归逐凨所有
转载请保留原文链接:https://izhizu.com/wordpress/77.html
THE END
分享
二维码
< <上一篇
下一篇>>