WordPress实现文章内容收缩和展开功能

转载 老蒋部落  2022-03-02 13:37  阅读 297 次
【阿里云】新老特惠,云服务器0元试用,首购低至0.9元/月起!

我们经常在浏览有些网站的时候看到内容只展示部分内容,如果需要阅读全文的话需要点击阅读更多内容按钮才可以展现全部内容。这样的好处就是不至于一次将文字页面全部打开,使得页面不至于一次加载太长。这个功能到底如何实现的呢?是否可以在WordPress程序中实现?

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

第一、JS代码部分

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

需要将JS部分添加到内容页模板中,或者我们有全局JS的可以添加。

第二、内置功能模块

// 收缩和展开功能 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', '内容收缩按钮', '' );
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

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

第四、实现方法:纯文本短代码

[Collapse title="说明"]请将C更改为c[/Collapse]

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

本文地址:https://8ik.cn/archives/294
关注我们:请关注一下我们的微信公众号:扫描二维码捌佰科的公众号,公众号:Hey_MrBoss
温馨提示:文章内容系作者个人观点,不代表捌佰科对观点赞同或支持。
版权声明:本文为转载文章,来源于 老蒋部落 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
【腾讯云】买云服务器,参与礼品兑换、抽奖,最高送价值8000元IPad,还有Bose耳机、千元京东卡等您来!

发表评论


表情