WordPress网站如何给文章设置展开阅读功能？
发布于
by
为了满足不同用户对文章内容的理解，需要将文章内容编写的尽可能详细，对于有些用户而言会觉得啰嗦，就需要使用“展开…
为了满足不同用户对文章内容的理解，需要将文章内容编写的尽可能详细，对于有些用户而言会觉得啰嗦，就需要使用“展开/收缩”功能，那么WordPress网站如何给文章设置展开阅读功能？
方法一
采用的是CSS+jQuery方式，不仅仅可以在wordpress上使用，也适用于所有网站。
<!doctype html>
<html lang=”en”>
<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>
<head>
<meta charset=”UTF-8″>
<meta name=”Generator” content=”EditPlus®”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<title>Document</title>
<script src=”jquery.min.js” type=”text/javascript”></script>
<style> body{
position: relative;
}
.show_text{
width: 100%;
margin:0 auto;
}
.show_text p{
height:71px;
overflow:hidden;
}
.mask{
width:100%;
position: absolute;
top:0;
height: 71px;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
}
.showall{text-align:center;}</style>
</head>
<body>
<div class=”show_text”>
<p>他一次萍聚，让多少午夜梦回，衣袖盈香？一次邂逅，让多少暗香浮动，刹那芳华？一份爱情，从开始到结束，初见，永远是最美丽的风景；一个故事，从上演到谢幕，初见，永远是最难忘的情节。初见，它可以是朦胧到极致，又可以是清晰到极致的画面；初见，它可以是淡雅到极致，又可以浓烈到极致的情愫。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。从古至今，人生遗憾的事，莫过于故事还未开始就已结束；人生痛苦的事，莫过于故事未完主角就已匆匆离场；人生悲哀的事，莫过于故事还在继续悲剧就已注定。缘来缘去，若一切如初见那该有多美妙、多幸福，若相看两不厌那该有多难得、多可贵。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。从古至今，人生遗憾的事，莫过于故事还未开始就已结束；人生痛苦的事，莫过于故事未完主角就已匆匆离场；人生悲哀的事，莫过于故事还在继续悲剧就已注定。缘来缘去，若一切如初见那该有多美妙、多幸福，若相看两不厌那该有多难得、多可贵。</p></div>
<div class=”mask”></div>
<p class=”showall”>展开阅读全文<svg viewBox=”0 0 10 6″ width=”10″ height=”16″ aria-hidden=”true” style=”height: 16px; width: 10px; margin-left: 8px; vertical-align: text-bottom;”><title></title><g><path d=”M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z”></path></g></svg></p>
<script>
$(function(){
$(‘.showall’).click(function(){
$(“.show_text p”).css(“height”,”100%”);
$(“.mask”).css(“display”,”none”);
$(“.showall”).html(“”);
})
})
</script>
</body>
</html>
方法二
此方法仅适用于WordPress主题
第一，首页我们需要添加一个JS效果代码在header.php中，放在body标签前面，当然你也可以只添加在sinlge.php内。
// 添加文章页展开收缩JS效果
<script type=”text/javascript”>
jQuery(document).ready(
function(jQuery){
jQuery(‘.collapseButton’).click(
function(){
jQuery(this).parent().parent().find(‘.xContent’).slideToggle(‘slow’);
}
);
}
);
</script>
第二，需要编辑wordpress主题的functions.php文章，将下面代码添加到你的主题的funtions.php.文件中
// 文章页添加展开收缩效果
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’);
完成上面内容，我们就可以通过短代码来编辑内容文章实现内容的展开全文功能了
[collapse title=”说明文字”]需点击展开的内容[/collapse]
为了方便我们后面对文章内容的操作，可以将短码直接写进我们的编辑器中，继续复制下面的代码到function.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’ );
美化展开收缩功能
如果你想要改变“展开/收缩”字符在前端的显示效果，可以通过添加、、等标签来实现，例如下面的代码。
<span style=”font-size: 18pt; font-family: impact, sans-serif;”><em><strong><span style=”color: #ff0000;”>展开/收缩</span></strong></em></span>
当然，如果你不会编辑这些标签，一个简单的方法是你先在WordPress文章可视化编辑窗口编辑好字符样式，然后进入代码窗口复制代码即可。如果你的主题支持Font Awesome字体，你可以通过在上面functions.php文件中代码内的“展开/收缩”字符前面添加Font Awesome图标标签来为你的展开/收缩按钮添加一个美化图标；当然如果主题不支持Font Awesome字体也没关系，你可以安装Font Awesome 4 Menus插件进行拓展。具体设置代码可参照下面示例。
<i class=”fa fa-plus-square” aria-hidden=”true”></i> <a href=”javascript:void(0)” class=”collapseButton xButton”>展开/收缩</a>
通过上面的代码添加就完成了我们wordpress添加文章内容展开收缩的功能，是不是很简单。
类别：WordPress入门、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
还没有任何评论，赶紧来占个楼吧！