热搜：编程 Python Microsoft 编程语言 C++

WordPress站点通过Readmore.javascript如何实现展开阅读全文的好代码教程

发布时间：2022-12-25 14:07:08 来源：互联网

.

渐渐地，那原本被夜幕笼罩的天空出现了微明。一颗颗启明星逐渐变得苍白无力，在浅浅的日光的照射下，胆怯的它们终于退却了。随着启明星的消失，害羞的太阳射出了几道耀眼的金光。

经常在很多博客网站上看到文章页添加有“阅读全文”按钮，点击之后才能看到该文章的全部内容，boke112 也不知道这种做法有什么特殊好处，不过也不妨研究一番。网络上很多 WordPress 网站文章页添加“阅读全文”都有点名不副实，利用的是文章页某些内容的“展开/收缩”功能，还需要人工去添加内容。今天 boke112 联盟就跟大家说一下如何通过 Readmore.js 自动实现文章页展开阅读全文。

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

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

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

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

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

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

.readmore()选项内容：

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

以上参数用得比较多的应该就是 speed、collapsedHeight、moreLink 和 lessLink，其他的一般不折腾。

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

<?php if (is_single()) { ?>
<script>
$('.single-content').readmore({
collapsedHeight: 180,
speed: 200,
moreLink: '<a rel="nofollow noopener noreferrer" href="#" style="font-size:15px;color:#c01e22;text-align:center;">展开阅读更多 ↓</a>',
lessLink: '<a rel="nofollow noopener noreferrer" href="#" style="font-size:15px;color:#c01e22;text-align:center;">关闭阅读更多 ↑</a>'
});
</script>
<?php } ?>

以上的 JS 代码大家可以将它添加到主题的其他 JS 文件中，这样就不用单独在页脚添加代码了，理论上讲会更好。

两者的效果如下图所示：

2.1 Read More 样式对比