搬码资源网广告位 搬码资源网广告位

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

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

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

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 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。

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11478.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?