Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >给你的博客文章加入”展开/收缩功能‘’

给你的博客文章加入”展开/收缩功能‘’

作者头像
Youngxj
发布于 2018-06-06 10:02:59
发布于 2018-06-06 10:02:59
1K00
代码可运行
举报
文章被收录于专栏:YoungxjYoungxj
运行总次数:0
代码可运行

1.在header.php中添加下面的代码,或者也可以单独写进一个js文件中然后在header.php中引入也可以。我是引入的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
 jQuery(document).ready(function(jQuery) {
 jQuery('.collapseButton').click(function() {
 jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
 });
 });
</script>

2.在function.php中加入下面的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 //展开收缩功能
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');

3.可以优化一下代码,因为默认是靠左的,不好看,我们让他往中间一点显示,具体的距离可以自行调整。当然这一步忽略也是可以的。

在style.css中添加以下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.xControl {
padding-left: 32px;
}

教程结束,本教程转自风神博客

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-4-25 1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
为wordpress文章添加额外功能[移植自DUX主题]
.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 阴影 */ background-color: #FFFFFF;/* 背景颜色 */ border-bottom: 2px solid #e74c3c;/* 边 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }
AlexTao
2019/12/13
1.1K0
为wordpress文章添加额外功能[移植自DUX主题]
更换主题-七彩之家BLUE2.0以及后续的修改
作者:matrix 被围观: 9,648 次 发布时间:2013-07-31 分类:Wordpress 兼容并蓄 零零星星 | 2 条评论 »
HHTjim 部落格
2022/09/26
3540
更换主题-七彩之家BLUE2.0以及后续的修改
丰富排版页面——为你的wordpress主题添加短代码形式美化框
相信有些wordpresser知道这个东东,在一些主题上这是标配,如deve主题、iartwork主题。原理大概是通过wordpress本身的短代码功能,事先在主题用css样式定义一些美化框,在编辑文章时写入短代码修饰,正式发表后再前台就可以看到效果。 如果你不会或不想修改主题代码实现这个功能,可以考虑一款短代码插件S-shortcodes。使用插件与直接代码增加的效果几乎是一样的(即安装插件对WordPress 速度上影响不大)。详细可以见《S-shortcodes:WordPress短代码形式美
Jeff
2018/01/19
2.3K0
丰富排版页面——为你的wordpress主题添加短代码形式美化框
纯代码实现WordPress文章设置隐藏内容公众号可见
网上找了一圈找到了龙笑天下博主写的一篇文章:WordPress 文章部分内容关注微信公众号后可见
AlexTao
2019/07/22
1.4K0
纯代码实现WordPress文章设置隐藏内容公众号可见
WordPress短代码怎么在当前文章内引用评论
评论列表可以是整个博客或着一篇文章,支持的参数也有很多,比如post_id、user_id等等,自带排序
沈唁
2019/05/21
9100
WordPress文章添加彩色美化框及彩色按钮
有时候,wordpress的文章编辑器并不能满足我们的要求,那就要靠我们自己动手实现了。
AlexTao
2019/12/13
1.7K0
WordPress文章添加彩色美化框及彩色按钮
wordpress博客免插件实现隐藏内容回复可见-在文章中设置回复可见内容 三种样式附带效果图
可能大家已经发现,很多网站采用了评论后可见的下载策略,这种做法既鼓励了用户参与和互动,也提高了网站的用户粘性。对于网站运营者来说,这还能帮助他们筛选出真正有需求的用户,同时收集到宝贵的用户反馈。
飞鱼籽
2024/07/13
1500
wordpress博客免插件实现隐藏内容回复可见-在文章中设置回复可见内容 三种样式附带效果图
WordPress某篇文章显示所有评论者名称或头像
在某篇文章或当前文章的适当位置显示所有评论者名称列表,或在文章列表摘要下方显示评论者头像,可以引导读者也发个热情洋溢的评论。
楚客追梦
2024/08/07
1200
7b2主题,文章中添加渐变框
放入主题的functions.php中,或新建一个文件,require_once()方式引入。
小狐狸说事
2022/11/17
4320
7b2主题,文章中添加渐变框
WordPress集成DPlayer支持m3u8视频播放
阳春三月,我们等来不是草长莺飞,也不是拂堤杨柳,而是居家工作和学习。不知不觉小王子在家上网课已有2周了,虽然现在没有2020年时的慌乱,但还是让我多了一些事,除了盯作业外,还有就是帮他找一些学习资源,只是现在好多网站的视频都是m3u8流媒体,下载下来某些视频软件不支持,另外发现本站也不支持m3u8播放。
楚客追梦
2022/11/11
2.6K0
WordPress给文章内容添加密码查看
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
5820
WordPress给文章内容添加密码查看
纯代码给WordPress文章添加卡片式内链的方法
写文章的时候会经常文章中引用其他文章链接,是为了让用户方便浏览,也增加文章关联度;更重要的是适当的引用文章,也可以让内容更加丰满,对用户体验上也是有提高;但是常规的文章内链一般就是直接放一个链接进去,干巴巴的一个链接不管是美观度还是用户体验都不是很好,所有全百科网搞了个简约美观的卡片内链样式。
于飞云计算
2019/07/22
1.4K0
纯代码给WordPress文章添加卡片式内链的方法
wordpress免插件设置回复后可见
作者:matrix 被围观: 32,998 次 发布时间:2014-01-26 分类:Wordpress | 68 条评论 »
HHTjim 部落格
2022/09/26
5620
wordpress免插件设置回复后可见
WordPress 回复可见【非插件】
网上随便搜了一下,发现这个功能的文章基本都是抄来抄去抄的。我也抄了一份发现不大好用,因为发表评论之后看了一下发现根本没有cookie信息。如果要使用这个功能首选需要开启下面的选项:
obaby
2023/02/22
4460
腾讯云:WordPress创建带缩略图文章内链
如何用 WordPress 短代码或可视化编辑器按钮来创建一个图文混排的文章内链 更多内容关注qq群(197783973) 文章内链在 SEO 链接建设中一直是相当重要的,良好的内链结构对 SEO 十
Wordpress教程
2019/06/11
9990
腾讯云:WordPress创建带缩略图文章内链
WordPress免插件仅代码实现文章归档模板 II
不多说了,本站目前使用的效果,可以到我的存档页一览,该方法来自zww,感谢原作者,在这之前,建议你: 1、你的博客存档页面地址后面的应该为/articles,而不是常见的/archives 。在英文中,article表示“文章”,而archive意为“档案”,使用archive貌似不那么规范;2、你的博客存档页面应该禁止搜索引擎访问,因为这会造成内容重复(在你启用站点地图插件的情况下)。 折腾功能:代码实现WordPress归档页面模板[WP原生函数篇] 原创作者:zwwooooo 特点: 1. 按
Jeff
2018/01/19
2.4K0
WordPress免插件仅代码实现文章归档模板 II
DIV展开收缩效果
<html> <head> <title>div展开收缩代码</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bo
botkenni
2022/01/10
2K0
DIV展开收缩效果
WordPress添加暗黑模式并集成到主题教程
之前用darkmode.js给主题适配了一个暗黑模式,操作很简单,但体验感不是很好,于是用了几天就干掉了。
楚客追梦
2022/11/11
1.1K0
WordPress添加暗黑模式并集成到主题教程
Akina For Typecho主题修改记录分享
大多数博主,基本都换过各种类型的博客程序,WordPress、Typecho、hexo、Z-Blog等等太多了,最后选择Typecho,就是因为小巧不臃肿。本人一共使用过两款:Cactus来自仙岛驿站和Akina来自子虚之人。
目的地-Destination
2023/10/12
3600
Akina For Typecho主题修改记录分享
WordPress的主题添加AJAX无刷新提交评论功能
有时主题在提交评论后会刷新整个网页才可获取资源,别人家的都不是这样的,以下可以改善评论后无刷新即可获取资源。
空木白博客
2019/04/23
1.7K0
推荐阅读
相关推荐
为wordpress文章添加额外功能[移植自DUX主题]
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验