华仔博客

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

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

2023年7月25日 69点热度 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

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

点赞
< 上一篇
下一篇 >

文章评论

取消回复
广告
搜索
最新 热点 随机
最新 热点 随机
谷歌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 Netflix奈飞,HBO Max,Disney+账号会员免费分享 免费的ChatGPT API接口网站-The Free ChatGPT API 最后的生还者4k阿里云盘分享 Ahrefs账号-Ahrefs的终极使用教程 Ahrefs正版账号共享使用 Ahrefs共享团购账号 Wordpress文章列表没有缩略图就显示默认图片
谷歌SEO的页面标题和元描述的长度多长最合适?
404错误页面返回上一页 SEMrush 团购账号-SEMrush 的优点 新手做淘宝电商要学会的心态 seo博客_什么是404页面及怎么制作404页面 siteapp实用后的一些感想 seo博客_百度11名的快速解决方法 关于近期k站问题百度大哥又发话了呵呵 网络营销_弱弱的说说什么是网络营销 seo博客_如何做一个合格的网站编辑 华仔教你如何看清一个网站和公众号 博客快照终于回来了 ecshop首页通过关键词调用产品 ChatGPT for Wechat-在微信上使用ChatGPT iRedMail 支持的密码 seo博客_引蜘蛛的目的以及怎么高效的引蜘蛛 史上最全的外链资源寻找方法 GSA Search Engine Ranker验证码服务推荐 如何将你裂变与转换的效率提升10倍 北京seo_dedecmsURL的优化 百度快照跟网站权重没半毛钱关系-lee如是说 ios开发_父控件、子控件 WordPress博客页面和文章 Ahrefs共享团购账号 H7N9来了,元芳,你怎么看? 织梦dedecms自定义表单发送指定邮箱 最后的生还者4k阿里云盘分享 近期我都去买干货的了 centos7下apache安装以及自动启动 绿萝算法升级,打击软文链接 Wild Rift 英雄联盟手游美服转日服(国际服之间的转换)教程

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

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

京ICP备12020022号