【Wordpress教程】wordpress如何给文章内容页添加展开收缩功能

我们经常在浏览有些网站的时候发现内容只展示部分内容,如果需要阅读全文则需要点击"阅读更多内容"按钮才可以展现全部的内容。这样的好处就是不至于一次将文字页面全部打开,使得页面不至于一次加载太长。并且有利于文章页打开的速度,给用户更好的体验。这个功能到底如何实现的呢?能否用插件实现呢?

其实wordpress用户都知道插件是能不用尽量不用,如果每个小功能都要用插件来实现,随着插件的增多,你会发现网站的响应速度会非常的卡顿,所以这边推荐直接用代码直接修改从而达到想要的功能!当然,也有部分主题是自带此项功能。

但是大部分WordPress主题都不带这样的功能,这就需要我们自行修改模板来实现。那具体如何实现的呢?这里我们一起整理实现WordPress文章内容收缩和展开的功能。

第一、JS代码部分

在header.php中添加下面的代码,或者也可以单独写进一个js文件中然后在header.php中引入也可以。

<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery('.collapseButton').click(function() {
            jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
        });
    });
</script>

第二、内置功能模块

在function.php中加入下面的代码:

// 收缩和展开功能 itbulu.com修改
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<span class="xTitle">'.$title.'</span><i class="fa fa-plus-square" aria-hidden="true"></i><a href="javascript:void(0)" class="collapseButton xButton">内容收缩和展开</a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');

 

第三、添加短代码按钮

同样添加到Functions.php文件中,用来编辑器中有一个按钮,这样添加的时候直接点击按钮。

function appthemes_add_collapse() {
?>
<script type="text/javascript">
if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'collapse', '内容收缩按钮', '[collapse title="说明文字"]','[/collapse]' );
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

 

 

 

第四、实现方法

根据实际需要我们可以在编辑内容的时候以上面格式出现。把需要展现的内容添加到对应标签中。

[collapse title="说明"]内容部分[/collapse]

 

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gwph.xyz",如遇到无法解压的请联系管理员!
8.源社区是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系

源社区 » 【Wordpress教程】wordpress如何给文章内容页添加展开收缩功能

发表评论

提供最优质的资源集合

立即查看 了解详情