华仔博客

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

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

2023年7月25日 1031点热度 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
WordPress教程-WordPress常规设置 GSA Search Engine Ranker代理服务推荐 ios开发_UIView的常见属性 GSA Search Engine Ranker搜索引擎提交服务推荐 竞价必备神器,页面访客QQ提取工具 siteapp实用后的一些感想 seo博客_本地dedecms安装方法 转发:胡导再谈爱情 WordPress教程-WordPress撰写设置 怎样利用网摘收藏做好网站推广? seo博客_说说外链和反链的区别 你真的会换链接吗 北京seo_404页面对seo有什么影响 谷歌SEO的页面标题和元描述的长度多长最合适? a5杂谈区秒杀外链了 phpstudy forbidden 403错误的处理方法 2014的前半年。。。。。。 济南seo解释很多人不愿意原创的原因 seo工具_免费刷百度下拉框,百度相关词 seo详解企业优化容易作弊的3点 谷歌nofollow插件百度知道链接已加nofollow iRedMail 支持的密码 网络口碑传播的特点 济南seo教程:怎样让网站的百度排名再度提升 SEO外链时代已过时原创时代来了 传统制造业开展SEO 普遍存在的四大问题 转载:seowhy夫唯的人生经历 营销魔术师的最新举动......震撼了100万营销人 centos7 mysql5.7安装教程 dedecms当前栏目高亮以及主页高亮的方法

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

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

京ICP备12020022号