创客云
更专业,更规范,更实效,更懂营销

为WordPress添加“点击展开/收缩”短代码 功能

  大家可能在wordpress中写文章中经常需要很多补充资料,但是如果将这些补充资料都一一列出来的话,页面反而会变得很长,嗯哌搜索了大量资料测试无数次后终于实现了此功能,下面就来教大家如何为WordPress添加“点击展开/收缩” 【collapse】 短代码功能,让你的网页在更加丰富的同时,也更加的简洁清晰!

预览:

点击展开 展开/收缩

步骤一:

  首先将以下JS代码加入至你网站所引用的JS文件内(例如“functions.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添加“点击展开/收缩”功能结束(由创客源码制作) */

短代码:

  现在我们可以直接在文章中插入[-collapse title=”标题”]需点击展开的内容[-/collapse]就可以使用本功能啦 (填写简码时其中 删除)!

WordPress主机推荐:创客主机 | 预约汉化(承接wordpress主题|插件汉化服务!联系客服
分享到:更多 ()

评论 抢沙发

评论前必须登录!

 

本站承接WordPress等系统建站仿站、二次开发、主题模板插件定制等服务!

关于我们联系我们