1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress站点通过Readmore实现展开阅读全文

经常在很多博客网站上看到文章页添加有“阅读全文”按钮,点击之后才能看到该文章的全部内容,boke112 也不知道这种做法有什么特殊好处,不过也不妨研究一番。网络上很多 wordpress 网站文章页添加“阅读全文”都有点名不副实,利用的是文章页某些内容的“展开/收缩”功能,还需要人工去添加内容。

1、在主题的 header.php 文件中引入 Readmore.js 文件(PS:经 boke112 测试,在页脚添加死活不成功,在页头添加就可以,不知道是为什么)

  1.     <?php if (is_single() ) { ?>
  2.     <script src="https://cdn.bootcss.com/Readmore.js/2.2.1/readmore.min.js"></script>
  3.     <?php } ?>

当然,也可以直接将该 readmore.js 下载到自己主题的 JS 文件夹内,然后再引用。其他版本的 readmore.js 请前往BootCDN查阅。

2、在主题的 footer.php 文件中添加以下代码:

  1.     <?php if (is_single()) { ?>
  2.     <script>$('.single-content').readmore();</script>
  3.     <?php } ?>

以上代码默认在文章页显示“Read More”链接按钮,点击即可展开该文章的全部内容,然后在最后显示“Close”链接按钮,点击即可收回所展开的文章内容。
.readmore()选项内容:

  • speed: 100 以毫秒为单位
  • collapsedHeight: 200 以像素为单位
  • heightMargin: 16  以像素为单位,避免折叠块仅比 collapsedHeight
  • moreLink: ‘<a href=”#”>Read more</a>’
  • lessLink: ‘<a href=”#”>Close</a>’
  • embedCSS: true 动态插入所需的 CSS,false 如果在样式表中包含必要的 CSS ,请将其设置为
  • blockCSS: ‘display: block; width: 100%;’设置块的样式,如果 embedCSS 是则忽略 false
  • startOpen: false 不要立即截断,从完全打开的位置开始
  • beforeToggle: function() {} 在单击或多或少的链接之后但在折叠或展开块之前调用
  • afterToggle: function() {} 块折叠或展开后调用

建议大家在使用的过程可以通过设置参数更改这些链接按钮的名称以及设定在文章页大概什么位置开始隐藏内容和显示按钮等。这里就提供一种样式给大家参考:

  1.     <?php if (is_single()) { ?>
  2.     <script>
  3.     $('.single-content').readmore({
  4.     collapsedHeight: 180,
  5.     speed: 200,
  6.     moreLink: '<a href="#" style="font-size:15px;color:#c01e22;text-align:center;">展开阅读更多 ↓</a>',
  7.     lessLink: '<a href="#" style="font-size:15px;color:#c01e22;text-align:center;">关闭阅读更多 ↑</a>'
  8.     });
  9.     </script>
  10.     <?php } ?>

以上的 JS 代码大家可以将它添加到主题的其他 JS 文件中,这样就不用单独在页脚添加代码了,理论上讲会更好。至此,我们已经为 WordPress 的文章页添加了展开阅读全文的功能,而且可以展开和关闭,还可以设置按钮出现的高度和展开的速度等。这种方法的优点就是简单,新手根据教程都可以实现“阅读全文”功能;缺点就是需要额外引入一个 Readmore.js。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/86822

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注