经常在很多博客网站上看到文章页添加有“阅读全文”按钮，点击之后才能看到该文章的全部内容，也不知道这种做法有什么特殊好处，不过也不妨研究一番。网络上很多 WordPress 网站文章页添加“阅读全文”都有点名不副实，利用的是文章页某些内容的“展开/收缩”功能，还需要人工去添加内容。
1、在主题的 header.php 文件中引入 Readmore.js 文件（PS：经测试，在页脚添加死活不成功，在页头添加就可以，不知道是为什么）
- <?php if (is_single() ) { ?>
- <script src="https://cdn.bootcss.com/Readmore.js/2.2.1/readmore.min.js"></script>
- <?php } ?>
当然，也可以直接将该 readmore.js 下载到自己主题的 JS 文件夹内，然后再引用。
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 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() {} 块折叠或展开后调用
建议大家在使用的过程可以通过设置参数更改这些链接按钮的名称以及设定在文章页大概什么位置开始隐藏内容和显示按钮等。这里就提供一种样式给大家参考：
- <?php if (is_single()) { ?>
- <script>
- $('.single-content').readmore({
- collapsedHeight: 180,
- speed: 200,
- moreLink: '<a href="#" style="font-size:15px;color:#c01e22;text-align:center;">展开阅读更多 ↓</a>',
- lessLink: '<a href="#" style="font-size:15px;color:#c01e22;text-align:center;">关闭阅读更多 ↑</a>'
- });
- </script>
- <?php } ?>
以上的 JS 代码大家可以将它添加到主题的其他 JS 文件中，这样就不用单独在页脚添加代码了，理论上讲会更好。至此，我们已经为 WordPress 的文章页添加了展开阅读全文的功能，而且可以展开和关闭，还可以设置按钮出现的高度和展开的速度等。这种方法的优点就是简单，新手根据教程都可以实现“阅读全文”功能；缺点就是需要额外引入一个 Readmore.js。
文章標題：WordPress站点通过Readmore实现展开阅读全文
文章連結：https://www.wuyanshuo.cn/741.html
更新時間：2022年4月14日
1、本站所有資源均不添加推廣檔案或浮水印，壓縮包內若有廣告檔案和浮水印請勿輕易相信。
2、本站資源均為兩層壓縮，第一層7z（尾碼若為wys，請自行修改為7z）有解壓密碼； 第二層zip或cbz，無解壓密碼，可直接使用漫畫類軟件程式查看； 詳情可參攷解壓教程。
3、本站大部分內容均收集於網絡！ 若內容侵犯到您的權益，請發送郵件至：admin#wysacg.top我們將第一時間處理！ 資源所需價格並非資源售賣價格，是收集、整理、編輯詳情以及本站運營的適當補貼，並且本站不提供任何免費技術支援。 所有資源僅限於參攷和學習，版權歸原作者所有！
