为了满足不同用户对文章内容的理解，需要将文章内容编写的尽可能详细，对于有些用户而言会觉得啰嗦，就需要使用“展开/收缩”功能，那么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添加文章内容展开收缩的功能，是不是很简单。
本文来源于 网络，由本站搜集发布，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。如需转载，请注明文章来源。
