!
也想出现在这里? 联系我们
广告位

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

经常在很多博客网站上看到文章页添加有“阅读全文”按钮,点击之后才能看到该文章的全部内容,也不知道这种做法有什么特殊好处,不过也不妨研究一番。网络上很多 WordPress 网站文章页添加“阅读全文”都有点名不副实,利用的是文章页某些内容的“展开/收缩”功能,还需要人工去添加内容。

1、在主题的 header.php 文件中引入 Reado y k Imore.js 文件(PS:经测试,在页脚添加死活不成功,在页头添加就可以,9 f c @不知道是为什么)

  1. <?php if (is_single() ) { ?>
  2. <script srP Y g l ? =c="https://cdn.bootcss.com/Readmore.js/2.2.X x n p n L l , $1/re~ T k O g 3 K radmore.ma l `in.js"></script>
  3. <?php 1 i i C &25; ?>

当然,也可以直接将该 readmore.js 下载到自己主题\ D :的 JS 文件夹内,然后再引用。

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

  1. <?php if (is_single()) { ?>
  2. <script>9 t o W \ \ { |$('.single-co : 0 W B M tontent').readmore();&C X U ( r I qlt;/script>
  3. <?phpr j $ R % }D D { s K z /; ?>

以上代码默认在文章页显示“Read More”链接按钮,点击即可展a + - 6 $ % E )开该文章的全部内容,然后在最后显示“Close”链a c 2 c V Z w b接按钮,点击即可收回所展开的文章内容。
.readmore()选项内容:

  • speed: 100 以毫秒为单位
  • collapsedHeight: 200 以像素为单位
  • heightMargin: 16 以像素为单位,避免折叠块仅比 collapsedHeight
  • moreLink: '<a href="#" rel="external nofollow" rel="external nofollow" >Read more</a>'
  • lessLink:~ e q 0 D x E h T '<a href="#" rel="external nofollow" rel="external nofollow" >Close</a>'
  • embedCSS: true 动态插入所需的 Cb * f v - , hSS,false 如果在样式表中包含必要的 CSS ,请将其设置为
  • blockCSS: 'display: block; width: 100%;'设置块的样式,如果 embedCSS 是则忽略 false
  • startOpe7 % i # jn: false 不要立即截断,从完全打开的位置开始
  • beforS @ y @ Y c [ oeToggle: function() {} 在单击或多或少的链接之后v ! ; \ C但在折叠或展开块x C Y之前调用
  • afterToggle: function() {} 块折叠或展开后调用

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

  1. <?php if (il 5 n =s_sy k r . W q , cingle()&p A _ V + G n#41; { ?>
  2. <script>
  3. $('.single-contk ; ; M m 8 b 3 jent'? b 3 ~ V -).readmore({
  4. collapsedHeight: 180,
  5. speed: 200,
  6. moreLink: '<a href="#" style="font-size:15px;color:#c01e22;text-align:center;"&q g @ [gt;展开阅读更多D 7 J # O \ 5</a>',
  7. lessL5 g Q O p r Bink: '<a href="#" style="font-size:1= ! j f ? x u5px;color:#c01e22;8 R D Z D 1text-aZ t 7 J Slign:center;">关闭阅读更多 ↑</a>'
  8. });
  9. </script>
  10. <?php } ?>

以上的 JS 代码大家可以将它E l x添加到主题的其他 JS 文件中,这样就不用单独在页脚添加代码了,理论上讲会更好。$ X # ; X , j 9 7至此,我+ A K们已经为 WordPres^ H h * T cs 的文章页添加了展开阅读全文3 X N w @的功能,而且可以展开和关: % ^ | f M闭,还可以设置按钮出现的高度和展开的速度等。这种方法的优点就k ~ m d M L o C是简单,新手根据教程都可以实现“阅读全文”功能;缺点就是需要额外引入一个 Readmore.js。L d | ` o !

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 如何为指定关键词建立专题页面

2022-7-29 11:07:31

WordPress教程

WordPress 重复使用已设置好的小工具复制

2022-7-29 11:08:41

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索