手工代码方法设置WordPress点击展开和收缩内容可见

我们是不是看到有一些网站文章较长，可以用隐藏收缩的方法展现提高体验。如果用户希望阅读更多可以点击展开。有些WordPress主题是自带的，但是有些没有自带我们可以自己设置，具体如何设置呢？这里麦子整理几个方法提供给大家选择参考使用。

第一、JS代码部分文章源自国外主机测评-https://www.zjcp.org/5555.html

jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});

根据需要我们可以将JS代码放到JS文件中，也可以单独做一个JS文件后面引用到HEAD里。文章源自国外主机测评-https://www.zjcp.org/5555.html

第二、功能代码文章源自国外主机测评-https://www.zjcp.org/5555.html

/* 展开和收缩功能 */

function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '

 

 '.$title.' 
 展开/收缩
 

 
 
'.$content.'
 
';
}
add_shortcode('collapse', 'xcollapse');

这样，我们可以将代码加入functions.php中。文章源自国外主机测评-https://www.zjcp.org/5555.html

第三、如何实现功能文章源自国外主机测评-https://www.zjcp.org/5555.html

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

这样，我们可以将需要隐藏和展现的内容丢到对应的标签里。文章源自国外主机测评-https://www.zjcp.org/5555.html 文章源自国外主机测评-https://www.zjcp.org/5555.html