WordPress教程

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

也想出现在这里?联系我们
创客云

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

步骤一:

首先将以下 JS 代码加入至你网站所引用的 JS 文件内(例如“functions.js”等):

也想出现在这里?联系我们
创客主机
  1. /* 为网站添加“点击展开/收缩”功能开始(由创客源码制作) */
  2. jQuery(document).ready(
  3. 	function(jQuery){
  4. 	jQuery('.collapseButton').click(function(){
  5. 		jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
  6. 	});
  7. });
  8. /* 为网站添加“点击展开/收缩”功能结束(由创客源码制作) */

步骤二:

然后将下方代码添加到“模板函数 (functions.php)”的最底部 ?> 之前:

  1. /* 为WordPress添加“点击展开/收缩”功能开始(由创客源码制作) */
  2. function xcollapse($atts, $content = null){
  3. 	extract(shortcode_atts(array("title"=>""),$atts));
  4. 	return '<div style="margin: 0.5em 0;">
  5. 		<div class="xControl">
  6. 			<span class="xTitle">'.$title.'</span> 
  7. 			<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
  8. 			<div style="clear: both;"></div>
  9. 		</div>
  10. 		<div class="xContent" style="display: none;">'.$content.'</div>
  11. 	</div>';
  12. }
  13. add_shortcode('collapse', 'xcollapse');
  14. /* 为WordPress添加“点击展开/收缩”功能结束(由创客源码制作) */

短代码:

现在我们可以直接在文章中插入[collapse title="标题"]需点击展开的内容[/collapse]就可以使用本功能啦

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件