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

2021-05-22 0 1,631 百度已收录

经常在许多博客网站上看到文章页添加有“阅读全文”按钮,点击之后才气看到该文章的所有内容,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。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress站点通过Readmore实现展开阅读全文 https://zhutizhen.com/14732.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章