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

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

2023-08-10 0 270

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 插件来实现展开阅读全文的功能

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 WordPress教程 WordPress网站使用ReadmorJS插件来实现展开阅读全文的功能 https://www.huizhanii.com/32814.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com