我要投稿

WordPress主题添加点击展开/收缩短代码功能

猪小侠源码 WordPress教程

2022-01-08 0 711

我们在写博客文章的时候经常会有很长篇幅内容，特别是技术类文章经常需要很多补充资料，但是如果将这些补充资料都一一列出来的话，页面反而会变得很长，用户体验效果不好。下面码云笔记就来教大家如何为 WordPress 主题添加“点击展开/收缩” 短代码功能，让一些部分内容可以优先隐藏起来，重点内容优先展示给用户，让你的网页在更加丰富的同时，也更加的简洁清晰！也方便用户的浏览体验，岂不完美。

步骤一：

首先将以下 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)" rel="external nofollow"  rel="external nofollow"  class="collapseButton xButton">展开/收缩</a>
	    <div style="clear: both;"></div>
	</div>
	<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');
/* 为WordPress添加“点击展开/收缩”功能结束（由码云笔记制作） */

现在我们可以直接在文章中插入


		    
			      标题
			    
		    
		需点击展开的内容

就可以使用本功能啦。

收藏 (0) 点赞 (0)

：本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性，不附带任何技术服务！
2、本站提供的模板、软件工具等其他资源，均不包含技术服务，请大家谅解！
3、本站提供的资源仅供下载者参考学习，请勿用于任何商业用途，请24小时内删除！
4、如需商用，请购买正版，由于未及时购买正版发生的侵权行为，与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中，请提前注册好百度网盘账号，下载安装百度网盘客户端或其他网盘客户端进行下载；
6、本站部分资源文件是经压缩后的，请下载后安装解压软件，推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益，请邮件联系： 442469558@qq.com 进行处理！

猪小侠源码-最新源码下载平台 WordPress教程 WordPress主题添加点击展开/收缩短代码功能 http://www.20zxx.cn/292525/wordpres/wordpressq.html