WordPress网站使用ReadmorJS插件来实现展开阅读全文的功能

前言

在许多WordPress博客网站上，我们经常会看到文章页上有一个“阅读全文”按钮。点击这个按钮后，才能查看文章的全部内容。虽然不清楚这种做法有什么特殊的好处，但我们可以进行一番研究。在网络上，许多WordPress网站的文章页添加了“阅读全文”按钮，但实际上并没有提供完整的内容。相反，它们利用了文章页中某些内容的“展开/收缩”功能，需要手动添加内容。
1、在主题的 header.php 文件中引入 Readmore.js 文件。（经测试，在页脚添加无效，在页头添加有效，原因不明）

代码如下：

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

当然，你也可以直接下载readmore.js文件并将其放置在你的主题的JS文件夹中，然后再进行引用。

另外，在你的主题的footer.php文件中添加以下代码：

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

默认情况下，上面的代码在文章页面上显示“阅读更多”链接按钮。点击它可以展开文章的全部内容，然后在最后显示“关闭”链接按钮。单击它可以恢复展开的文章内容。

。readmore()选项内容:

速度:100以毫秒为单位。
CollapsedHeight: 200像素。
HeightMargin: 16像素，避免折叠仅大于collapsedHeight的块。
moreLink:“阅读更多”
lessLink:“关闭”
EmbedCSS: true动态插入所需的CSS，false如果所需的CSS包含在样式表中，则将其设置为。
block CSS:’ display:block；宽度:100%；’设置块的样式，如果embedCSS为，则忽略false。
StartOpen: false不要立即截断，从完全打开的位置开始。
BeforeToggle: function() {}在单击更多或更少的链接之后，折叠或展开块之前调用。
切换后:在function () {}块折叠或展开后调用。
建议你可以通过设置参数改变这些链接按钮的名称，并在文章页面上设置大概的位置开始隐藏内容和显示按钮。这里有一个风格供你参考:

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

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

转载请注明：汇站网 » WordPress网站使用ReadmorJS插件来实现展开阅读全文的功能