代码实现WordPress主题文章中“阅读全文”折叠效果

经常在一些APP或者网站上面看到“阅读全文”这个功能按钮,实现的功能就是将长篇文章折叠起来。如果看到一半的时候,失去了兴致也就不用点开继续阅读余下的内容。如果这篇文章写得很优秀,觉得有意思那就点开“阅读全文”继续看下去。

现在很多网站都有这个功能,给人一种很友好的感觉,毕竟我们都处于一个信息爆炸的年代中。大部分的用户都在心底产生了一种“信息毒”的概念,所以如果这些信息对该用户不重要的话,用户不喜欢说不定带来适得其反的效果。小编觉得这个小小的功能对于大多数用户来说,网页文章中拥有“阅读全文”是挺重要,帮助用户筛选一些不必要的“信息毒”用户自主选择是否需要继续往下阅读。

可能对于很多刚入门WordPress博客用户来说,不一定知道如何实现网页文章实现“阅读全文”功能的实现。

今天小编在好友“老将部落”中看到一个比较简单就可以实现WordPress主题“阅读全文”功能的方法,现在就给大家讲讲。

1、JS代码

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

说明;将以上代码粘贴到主题的footer中,或者是WordPress主题的自定义js代码框中。

2、功能代码

// 收缩和展开功能 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');

说明;将以上代码粘贴到您当前WordPress博客正在使用的主题中的functions.php当中,以实现该功能。

3、功能添加

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' );

说明;将以上代码粘贴到您当前正在使用主题中的functions.php当中,以实现该功能的调用。改方法基于之前小编说的在Tinymce编辑器添加自定义功能按钮功能实现。具体您可以看看我的这篇文章。

代码实现WordPress主题文章中“阅读全文”折叠效果
代码实现WordPress主题文章中“阅读全文”折叠效果

WordPress Tinymce编辑器添加自定义功能按钮

WordPress 在5.0以前的版本中,默认的编辑器是“Tinymce编辑器”,但是WordPress 5.0以后WordPress的官方就将Gutenberg编辑器内置到了WordPress中,将其设成WordPr

4、“阅读全文”功能自定义添加在指定文章

此次分享的“阅读全文”实现的方法是手动的,所以操作起来相对比较的灵活,看您可以在您的长篇文章中添加该功能,如果是短篇文章则就无所谓是否有“阅读全文”这个功能。

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

将您需要折叠的内容使用该短代码包裹起来,就可以实现超出的内容显示出“阅读全文”功能。代码部分您可以根据自己的实际需求改成您需要的样式。

人已赞赏
WordPress功能扩展代码WordPress功能扩展教程

百度快速收录API代码实现主动推送教程

2020-5-28 22:36:01

WordPress功能扩展代码

WordPress实现用户访问页面自动推送至百度

2020-5-31 16:51:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索