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

我们在写博客文章的时候经常会有很长篇幅内容，特别是技术类文章经常需要很多补充资料，但是如果将这些补充资料都一一列出来的话，页面反而会变得很长，用户体验效果不好。下面码云笔记就来教大家如何为 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)" class="collapseButton xButton">展开/收缩</a>
	    <div style="clear: both;"></div>
	</div>
	<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');
/* 为 WordPress 添加“点击展开/收缩”功能结束（由码云笔记制作） */

以上关于WordPress主题添加点击展开/收缩短代码功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。