统计
  • 建站日期:2022-12-01
  • 文章总数:5933 篇
  • 评论总数:34324 条
  • 分类总数:14 个
  • 最后更新:3月31日
文章 网页代码

WordPress博客文章页添加阅读全文功能(阅读全文按钮)

首页 > 网页代码 > 正文
WordPress博客文章页添加阅读全文功能(阅读全文按钮)-酷库博客-第4张图片

发现很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介绍一种可以展开/收缩文章内容的功能。
WordPress博客文章页添加阅读全文功能(阅读全文按钮)-酷库博客-第5张图片

教程如下:

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

<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中加入下面的代码:

文章回复-酷库博客.png
此处内容已隐藏,评论后刷新即可查看!

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

.xControl {
    padding-left: 32px;
}

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

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

来使用此功能了。其中title是指添加一些提示内容,当然也可以省略title不写。
一方面可以优化WordPress主题内容页面的加载速度,另一方面可以有效提升用户体验。

免责申明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
运动世界校园跑步(运动世界校园app如何作弊刷跑步)
« 上一篇 03月07日
轻量服务器linux系统挂载数据盘教程(linux挂载数据盘)
下一篇 » 03月07日
为了防止灌水评论,登录后即可评论!
注册登录

已有 1 条评论

  1. ugbBtXYm Lv.3
    2023-03-17 17:26 安徽省 移动数据上网公共出口

    说道:6666

    HI ! 请登录
    注册会员,享受下载全站资源特权。

    最新文章

    本周热门


    登陆
    还没有账号?立即注册
    点击按钮进行验证
    登陆
    忘记密码
    已经有账号?马上登陆
    获取验证码
    重新获取(60s)
    点击按钮进行验证
    重置密码
    注册
    已经有账号?马上登陆 获取邀请码
    点击按钮进行验证
    立即注册