华仔博客

  • 首页
  • seo
  • 网站建设
  • 工具资源
  • 生活
  • 程序开发
  • 网上那点事
  • 网络营销
华仔博客
一个经验分享的博客
  1. 首页
  2. 程序开发
  3. 正文

WordPress文章页添加展开/收缩功能

2023年7月25日 1097点热度 0人点赞 0条评论

很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介绍一种可以展开/收缩文章内容的功能。

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

1
2
3
4
5
6
7
<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中加入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
//展开收缩功能
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中添加以下代码:

1
2
3
.xControl {
    padding-left: 32px;
}

4.下面就可以在文章中通过插入短代码

[collapse title=”标题”]需点击展开的内容[/collapse]

来使用此功能了。其中title是指添加一些提示内容,当然也可以省略title不写。

标签: WordPress
最后更新:2023年7月25日

admin

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复
广告
搜索
最新 热点 随机
最新 热点 随机
WhatsApp收不到验证码、一小时死循环现在可付费接码 win7惠普m227fdw打印机扫描仪不能用解决办法 WordPress教程-WordPress撰写设置 GTranslate3.04翻译插件不工作的原因找到了 WordPress教程-WordPress常规设置 wordpress教程-WordPress 安装 WordPress教程-WordPress概述 wordpress 导入word文档插件Seraphinite Post .DOCX Source 谷歌SEO的页面标题和元描述的长度多长最合适? 如何利用wordpress编辑网站页面 Hitpaw watermark remover去图片视频水印神器 WordPress博客页面和文章 如何充分利用您的 SEMrush 帐户 什么是 Robots.txt 文件以及Robots.txt 文件如何工作 ? WordPress列表页分页制作教程 youtube视频响应式插件Simple YouTube Responsive WordPress文章页添加展开/收缩功能 WordPress栏目调用去掉Ul标签 WordPress如何调用置顶文章 如何使用奈飞Netflix cookies登录奈飞Netflix GSA Search Engine Ranker项目屏幕 GSA Search Engine Ranker内容创建服务推荐 GSA Search Engine Ranker 仿写服务推荐 GSA Search Engine Ranker电子邮件账户推荐 GSA Search Engine Ranker搜索引擎提交服务推荐 GSA Search Engine Ranker索引服务推荐 GSA Search Engine Ranker验证码服务推荐 GSA Search Engine Ranker代理服务推荐 GSA Search Engine Ranker介绍 ChatGPT for Wechat-在微信上使用ChatGPT
新手微商如何做论坛的推广与引流? 谷歌nofollow插件百度知道链接已加nofollow 如何增强执行力将推广方法用到极致? 年度最给力,冰点促销来袭,你准备好了吗? dede网站建设实用篇 软文营销的关键环节有哪些? 网站更换主题喽 如何将你裂变与转换的效率提升10倍 dedecms 点击加载更多功能的实现 ios开发_什么是UIImageView 李彦宏“改变,从你我开始”为题的公开信 新手做淘宝电商要学会的心态 织梦dedecms集成微信公众平台功能(成功版最新版) 网站必备神器,页面即时QQ提取并发起会话发送邮件 ios6.1正式发布,ios6.1完美越狱工具可能在周末发布 织梦ckplayer播放器插件v1.6.1 北京seo说下新浪博客seo的利弊 北京seo_robots.txt和nofollow的用法 seo博客_网站图片的优化 GSA Search Engine Ranker 仿写服务推荐 404错误页面返回上一页 个人微信号怎么实现公众号自动回复功能 Burn It All Down (ft. PVRIS) _Worlds 2021 - League of Legends seo博客_seoer能干什么,干什么才能赚到钱 生活_昨天顺利将我的小三降到了ios5.01 什么是 Robots.txt 文件以及Robots.txt 文件如何工作 ? 为什么要研究页面价值 《微信引流与变现》-微信营销神器 北京seo介绍了最新的百度知道挂链接的技巧 北京seo_关于6.22号和28号的百度更新lee说话了

© 2012-2025 sem-home.com.版权所有.

主题KRATOS貌似作者网站打不开了,就没加,嗯就这样

京ICP备12020022号