web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

wordpress如何封装短代码功能(点击展开/收缩)

386 ℃
     

wordpress建站中如何封装一些短代码功能,下面web建站小编给大家简单介绍一下“点击展开/收缩”功能的实现方法!

1、在functions.php中新增以下代码:

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="cBtn">展开/收缩</a>
		<div style="clear: both;"></div>
	</div>
	<div class="divBox" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');

2、在页面中引用以下代码:

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

WordPress的SaaS属性有什么优点

WordPress故障排除大全,网站访问不了解决方法

wordpress获取当前文章ID自定义meta移动端链接

wordpress用栏目名称(category_name)调用指定栏目下的文章

wordpress自定义设置首页、分类、tag标签页文章数

标签: wordpress入门, wordpress短代码

上面是“wordpress如何封装短代码功能(点击展开/收缩)”的全面内容,想了解更多关于 wordpress 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_4397.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > wordpress
本文共计614个字,预计阅读时长5分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款免费在线图片处理工具——佐糖图片平台
下一篇: 推荐一款优设网免费可商用字体——优设标题黑体
x 打工人ai神器